amicro-design-system

Amicro 设计系统与组件规范为 Amicro 仓库定义了权威的设计令牌、组件架构、样式规则与布局标准。所有新增功能、微交互、卡片、加载器与页面过渡都必须严格遵循这些规则，以保持完美的视觉和谐与质量。

一、核心设计令牌与调色板

字体：使用 'Outfit', sans-serif，在 index.css 的 @theme 中配置为 --font-sans: 'Outfit', sans-serif;。标题使用 font-medium 或 font-semibold，并配合紧凑字距（tracking-[-0.01em] 或 tracking-[-0.019em]）。

颜色调色板（深色与浅色主题）：

页面背景：深色模式 #121212，浅色模式 #f8f9fa
卡片容器背景：深色模式 #181818，浅色模式 bg-white
卡片容器悬停背景：深色模式 #202020，浅色模式 bg-white + hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]
预览舞台画布：深色模式 #131313，浅色模式 #f4f4f6
主文本：深色模式 #ffffff / #ededed，浅色模式 #000000
次要/弱化文本：深色模式 #767676 / text-neutral-400，浅色模式 text-neutral-600 / text-neutral-750
卡片内嵌边框光晕：深色模式 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]，浅色模式 border border-neutral-100/85
胶囊/按钮未激活：深色模式 bg-[rgba(255,255,255,0.07)]，浅色模式 bg-neutral-200/80
胶囊/按钮激活：深色模式 bg-[#2a2a2a] text-white，浅色模式 bg-white text-black shadow-sm

二、标准卡片架构

目录网格中的每个组件条目（按钮、卡片展开、3D 轮播、加载器、页面过渡）都必须使用完全一致的标准卡片布局几何结构，包括外层容器、内层预览舞台画布、卡片底部栏与操作复制按钮。代码结构如下：

<div className={relative w-full max-w-[320px] sm:w-[320px] h-[220px] sm:h-[268px] rounded-[24px] transition-all duration-300 group ${ theme === 'dark' ? 'bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-[#202020]' : 'bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04),0_1px_3px_rgba(0,0,0,0.02)] border border-neutral-100/85 hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)] text-black' }}> {/* Inner Preview Stage Canvas /} <div className={absolute left-[12px] top-[12px] right-[12px] h-[150px] sm:h-[188px] rounded-[14px] flex items-center justify-center overflow-hidden transition-colors duration-300 ${ theme === 'dark' ? 'bg-[#131313]' : 'bg-[#f4f4f6]' }}> <div className={absolute inset-0 rounded-[14px] pointer-events-none z-10 ${ theme === 'dark' ? 'shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]' : 'shadow-[inset_0_0_0_1px_rgba(0,0,0,0.03)]' }} /> {/ Component Live Interactive Preview Component Here */} </div>

{/* Card Footer Bar */} <div className="absolute left-[16px] bottom-[14px] right-[16px] flex items-center justify-between"> <span className={text-[13px] font-semibold tracking-[-0.01em] transition-colors ${ theme === 'dark' ? 'text-white' : 'text-black' }}> {label} </span>

{/* Action Copy Button */}
<motion.button
  whileHover={{ scale: 1.08 }}
  whileTap={{ scale: 0.92 }}
  onClick={handleCopy}
  className={`p-2 rounded-xl transition-all cursor-pointer border flex items-center justify-center ${
    isCopied
      ? (theme === 'dark' ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-emerald-100 text-emerald-600 border-emerald-300')
      : (theme === 'dark' ? 'bg-white/[0.08] border-transparent hover:bg-white/[0.14] text-neutral-300 hover:text-white' : 'bg-neutral-100 border-transparent hover:bg-neutral-200 text-neutral-650 hover:text-black')
  }`}
>
  <IconSwap>
    <IconSwapItem key={isCopied ? "check" : "copy"}>
      {isCopied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
    </IconSwapItem>
  </IconSwap>
</motion.button>

</div> </div>

三、目录导航与胶囊按钮样式

桌面端筛选胶囊栏：容器为 hidden sm:flex items-center p-1 rounded-full border shadow-inner transition-colors duration-300 bg-[#181818] border-white/5（深色）/ bg-neutral-200/50 border-neutral-300/30（浅色）。激活胶囊：bg-[#2a2a2a] text-white（深色）/ bg-white text-black shadow-sm（浅色）。未激活胶囊：text-[#767676] hover:text-white（深色）/ text-black opacity-70 hover:opacity-100（浅色）。

移动端下拉菜单：使用背景模糊模态下拉（backdrop-blur-xl bg-[#181818]/95 border-white/5）。

四、组件微交互与触觉反馈

动效：使用 motion/react（framer-motion），配合三次贝塞尔缓动 [0.16, 1, 0.3, 1] 实现指数级平滑显现。

触觉反馈：始终触发 useWebHaptics 钩子。复制代码时触发 triggerHaptic('success')；按钮点击或标签切换时触发 triggerHaptic('medium') 或 triggerHaptic('light')；错误时触发 triggerHaptic('error')。

Toast 通知：始终触发 showToast("Copied ... code!")。

五、CLI 注册表集成规则

每当新增组件或过渡时：在 registry/ui/<category>/<name>.tsx 中添加组件源文件；在 registry/registry.json 中注册组件条目并声明依赖（如 framer-motion 等）；提供复制用 CLI 命令片段：npx @subhanhq/amicro@latest add <kebab-name>。

技能介绍