用途:在复刻一个应用时,重建其设计系统而非照搬品牌素材。读取 replica/recon.md 与 replica/screens/ 中的截图,输出 replica/design/tokens.json、tokens.css、Tailwind 映射和 replica/design/components.md。
主要能力:
- 度量而不猜测:从截图提取颜色角色(bg、surface、border、text、accent 等)、字号阶梯、间距基准(通常 4 或 8)、圆角、阴影与动效、布局(最大内容宽度、栅格、断点等)。
- 编写令牌:填充 tokens.json 并保留角色名,生成 CSS 自定义属性并映射进 Tailwind 主题,使组件使用 bg-surface、text-muted 等语义类,而非原始色值。
- 组件规范:为侦察清单中的每个组件写一个块,含 variants、sizes、states(default、hover、active、focus-visible、disabled、loading、error、empty)、tokens、a11y、used on,并覆盖键盘与屏幕阅读器行为。
- 构建原语:在任何页面之前先在隔离环境(/design 路由或 Storybook)实现组件,可基于 Radix、shadcn/ui、React Aria 等无障碍基础。
必要用法: 添加文本与背景组合的 pairs 列表后运行: python3 contrast.py replica/design/tokens.json 该命令退出码 1 表示失败,需在令牌层修复而非逐个组件修改。
限制与规则:不得复制原应用 Logo、图标、插画、照片、声音、授权字体、文案与品牌色;应使用开放图标集(Lucide、Phosphor、Heroicons、Tabler)和开源字体(Inter、Geist、IBM Plex、Manrope、Source Serif),品牌色记录为 accent 角色并先用中性占位。对比度 AA 为底线:正文 4.5:1,大文本、输入边框与焦点环 3:1。后续步骤为 /replica-build。其他细节暂未提供。