replica-design

replica-design

读取 replica/recon.md 和 replica/screens/ 中的截图。写入 replica/design/tokens.json（模板在此文件夹中）、tokens.css、 Tailwind 映射，以及 replica/design/components.md。

python3 contrast.py replica/design/tokens.json     # every text pair, WCAG ratio

规则

重建的是系统：角色、比例、模式，以及表单或模态框的行为方式。这些不属于任何人，用户也对此有所期待。绝不要照搬以下内容：

• 徽标、图标、插画、照片、声音。 使用开源图标集 （Lucide、Phosphor、Heroicons、Tabler，均采用 MIT 或类似许可证），并自行制作或委托创作插画。不要描摹原作。
• 授权字体。 如果原作使用付费或专有字体，就选用用途相同的开源字体：Inter、Geist、IBM Plex、Manrope、Source Serif。
• 原作文案。 每个标签和空状态文案都要重新撰写。
• 原作品牌色。 将其记录为一个角色（accent），现在使用中性的占位色，之后由 replica-brand 为你打造专属品牌色。标志性色彩加上标志性布局属于商业外观，必须在发布前更改。

第 1 步：测量，不要猜

根据截图测量（放大查看，并在用户的设备上使用取色器）：

• 颜色角色，而非颜色：bg、surface、border、border-input、text、 text-muted、accent、on-accent、danger、success、warning。统计应用实际使用的灰色色阶数量。通常为 5 到 7 种。
• 字号比例：字号、行高、字重。采用一套比例（常见的有 12、14、16、 20、28、40）。记录字体类别，而非字体文件。
• 间距：测量元素之间的间隔。基数几乎总是 4 或 8。写下间距比例。
• 圆角、阴影、动效：每项取两到三种。
• 布局：内容最大宽度、网格、断点、侧边栏宽度、页眉高度。

第 2 步：编写令牌

填写 tokens.json。保留角色名称。replica-brand 只会更改值。 将 tokens.css 生成为自定义属性，并映射到 Tailwind 主题中， 以便组件使用 bg-surface text-muted，而不是原始十六进制颜色值。

为应用使用的每种文本与背景组合添加到 pairs 列表中，然后：

python3 contrast.py replica/design/tokens.json

AA 是最低标准：正文文本为 4.5:1，大号文本、输入框边框和焦点环为 3:1。检查失败时会以状态码 1 退出。请在令牌中修复，而不是逐个组件修复。

第 3 步：编写组件规范

对于 recon 列表中的每个组件，都在 components.md 中编写一个代码块：

Button
  variants  primary, secondary, ghost, danger
  sizes     sm 32px, md 40px, lg 48px
  states    default, hover, active, focus-visible (2px ring, accent), disabled, loading
  tokens    bg accent, text on-accent, radius md, font sm/600
  a11y      real <button>, visible focus, loading keeps the label for screen readers
  used on   S02, S07, S09

包括 recon 中发现的每种状态，以及应有的状态：焦点、禁用、加载、错误、空状态。键盘和屏幕阅读器的行为也属于规范的一部分。

第 4 步：构建基础组件

先在隔离环境中用代码构建一次这些组件（使用 /design 路由或 Storybook），然后再制作任何页面。如果技术栈提供无障碍基础组件，就使用它（Radix、shadcn/ui、React Aria）。截取页面截图。这就是设计系统检查。

输出

tokens.json、tokens.css、Tailwind 配置、components.md、已构建的基础组件，以及一份 AA 失败项为零的对比度报告。下一步： /replica-build。