Back to Details

replica-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

replica-design

replica-design

Reads 
replica/recon.md
and the screenshots in 
replica/screens/
. Writes 
replica/design/tokens.json
(template in this folder), 
tokens.css
, the Tailwind mapping, and 
replica/design/components.md
.
bash
python3 contrast.py replica/design/tokens.json     # every text pair, WCAG ratio
读取 
replica/recon.md
和 
replica/screens/
中的截图。写入 
replica/design/tokens.json
（本文件夹中提供了模板）、
tokens.css
、 Tailwind 映射，以及 
replica/design/components.md
。
bash
python3 contrast.py replica/design/tokens.json     # every text pair, WCAG ratio

The rules

规则

What you rebuild is the system: the roles, the scale, the patterns, the way a form or a modal behaves. Those are not ownable, and users expect them. What you never take:
  • Logos, icons, illustrations, photos, sounds. Use an open icon set (Lucide, Phosphor, Heroicons, Tabler, all MIT or similar) and make or commission your own illustrations. Do not trace theirs.
  • Licensed fonts. If the original uses a paid or proprietary font, pick an open one with the same job: Inter, Geist, IBM Plex, Manrope, Source Serif.
  • Their copy. Every label and empty state gets written fresh.
  • Their brand colour. Record it as a role (
    accent
    ), use a neutral placeholder now, and replica-brand gives you your own. The signature colour plus the signature layout is trade dress, and it changes before launch.
你重建的是整个系统：颜色角色、比例、模式，以及表单或模态框（modal）的行为方式。 这些内容并非专属于原作者，用户也期待它们得到复现。以下内容绝不采用：
  • Logo、图标、插画、照片和声音。 使用开放的图标集 （Lucide、Phosphor、Heroicons、Tabler，均为 MIT 或类似许可），并自行制作或委托制作 原创插画。不得描摹其素材。
  • 授权字体。 如果原应用使用付费或专有字体，请选择用途相同的开放字体： Inter、Geist、IBM Plex、Manrope、Source Serif。
  • 原有文案。 所有标签和空状态都需要重新撰写。
  • 原有品牌色。 将其记录为一种角色（
    accent
    ），暂时使用中性占位色， 之后由 replica-brand 提供你的专属颜色。标志性颜色与标志性布局的组合属于 trade dress，应在上线前作出调整。

Step 1: measure, do not guess

第 1 步：进行测量，不要猜测

From the screenshots (zoom in, use a colour picker on the user's machine):
  • Colour roles, not colours: bg, surface, border, border-input, text, text-muted, accent, on-accent, danger, success, warning. Count how many greys the app really uses. Usually 5 to 7.
  • Type scale: sizes, line heights, weights. Snap to a scale (12, 14, 16, 20, 28, 40 is common). Note the font category, not the font file.
  • Spacing: measure gaps between elements. It is almost always a 4 or 8 base. Write the scale.
  • Radius, shadow, motion: two or three of each.
  • Layout: max content width, grid, breakpoints, sidebar width, header height.
根据截图进行测量（放大截图，并在用户设备上使用取色器）：
  • 颜色角色，而不是具体颜色： bg、surface、border、border-input、text、 text-muted、accent、on-accent、danger、success、warning。统计应用实际使用了多少种 灰色，通常为 5 到 7 种。
  • 字号阶梯： 尺寸、行高和字重。归入统一的阶梯（常见阶梯为 12、14、16、 20、28、40）。记录字体类别，而不是字体文件。
  • 间距： 测量元素之间的间距。几乎总是以 4 或 8 为基准。记录间距阶梯。
  • 圆角、阴影和动效： 每类选择两到三种。
  • 布局： 最大内容宽度、网格、断点、侧边栏宽度和页眉高度。

Step 2: write the tokens

第 2 步：编写令牌

Fill 
tokens.json
. Keep the role names. replica-brand only changes values. Generate 
tokens.css
as custom properties and map them into Tailwind's theme so components use 
bg-surface text-muted
, never raw hex.
Add a 
pairs
list for every text and background combination the app uses, then:
bash
python3 contrast.py replica/design/tokens.json
AA is the floor: 4.5:1 for body text, 3:1 for large text and for input borders and focus rings. It exits 1 on a failure. Fix it in the tokens, not per component.
填写 
tokens.json
。保留角色名称。replica-brand 只修改对应的值。 将 
tokens.css
生成为自定义属性，并映射到 Tailwind 的主题中，使组件使用 
bg-surface text-muted
，而不是原始十六进制值。
为应用使用的每一种文字与背景组合添加一个 
pairs
条目，然后运行：
bash
python3 contrast.py replica/design/tokens.json
AA 是最低标准：正文文本的对比度不得低于 4.5:1，大文本、输入框边框和焦点环 不得低于 3:1。检查失败时，脚本以状态码 1 退出。应在令牌中修复问题， 而不是在每个组件中单独处理。

Step 3: component specs

第 3 步：组件规范

For every component in the recon list, one block in 
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
Every state the recon saw, plus the ones it should have: focus, disabled, loading, error, empty. Keyboard and screen reader behaviour is part of the spec.
对于 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 观察到的每一种状态，以及本应具备的状态：焦点（focus）、 禁用（disabled）、加载（loading）、错误（error）和空状态（empty）。 键盘操作和屏幕阅读器行为也是规范的一部分。

Step 4: build the primitives

第 4 步：构建基础组件

Build the components in code once, in isolation (a 
/design
route or Storybook), before any screen. Use an accessible base if the stack has one (Radix, shadcn/ui, React Aria). Screenshot the page. That is the design system check.
在开始构建任何页面之前，先以隔离方式将组件实现一次（放在 
/design
路由或 Storybook 中）。如果技术栈提供可访问的组件基础库，请使用它 （Radix、shadcn/ui、React Aria）。对页面进行截图，这就是设计系统的验收检查。

Output

输出

tokens.json
, 
tokens.css
, the Tailwind config, 
components.md
, the primitives built, and a contrast report with zero AA failures. Next: 
/replica-build
.
tokens.json
、
tokens.css
、Tailwind 配置、
components.md
、已构建的基础组件， 以及一份无 AA 失败项的对比度报告。下一步：
/replica-build
。