image-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Image to Code

Reconstruct a design from a visual reference as a real design system, not a one-off copy. Match the system (color/type/spacing language), never lift copyrighted imagery or brand assets.

从视觉参考素材中重构设计，打造真正的设计系统，而非一次性复制品。匹配系统层面的设计语言（色彩/字体/间距），严禁盗用受版权保护的图像或品牌资产。

Steps

步骤

Read the reference like a designer. Infer and write down:
- Palette — 1 dominant surface family, text colors, 1 primary action + at most 1 accent (sample the hues; don't guess random hex).
- Type — family feel (geometric/grotesk/serif), the scale jumps, display vs. body contrast, weights.
- Spacing & density — base unit, section rhythm, card padding; airy vs. compact.
- Radius & depth — radius language (sharp/soft/pill), shadow vs. hairline separation.
- Layout archetype + sequence — full-bleed hero / asymmetric split / bento / editorial stack (
```
taste/design-taste.md
```
  → Variance Mandate).
Anchor to a known system if it's close — browse
```
taste/aesthetic-systems.md
```
/
```
python3 scripts/design_systems.py search <term>
```
and adopt that recipe to stabilize decisions.
Build the token theme from the inferred values → 3-tier DTCG (
```
design-tokens
```
skill); generate a single
```
theme.css
```
. Verify every color pair with
```
scripts/contrast.py
```
/
```
scripts/validate_contrast.py
```
(light + dark) — a sampled brand color that fails AA gets adjusted; taste never overrides POUR.
Rebuild layout + components token-driven via
```
frameworks/adapter-protocol.md
```
+
```
components/*
```
: one shared primitive layer, all 8 states, a11y wired, no emoji (lucide), single theme. Apply taste (
```
design-taste.md
```
) so it doesn't regress to generic.
Verify against the reference — render and screenshot it, compare side-by-side to the reference; run
```
node scripts/measure_render.mjs
```
,
```
lint_hardcodes.py
```
,
```
taste_audit.mjs
```
, and
```
npm run verify
```
.

以设计师视角解读参考素材。推导并记录：
- 调色板 — 1组主导底色系列、文本颜色、1个主行动色 + 至多1个强调色（提取色调；请勿随意猜测十六进制色值）。
- 字体 — 字体风格（几何/无衬线/衬线）、层级跨度、标题与正文的对比度、字重。
- 间距与密度 — 基础单位、区块节奏、卡片内边距；宽松型 vs 紧凑型。
- 圆角与层次感 — 圆角风格（锐利/柔和/胶囊形）、阴影 vs 细边框的分隔方式。
- 布局原型与结构顺序 — 通栏英雄区 / 不对称分栏 / 网格布局 / 编辑式堆叠（参考
```
taste/design-taste.md
```
  → 差异规则）。
若风格接近，锚定已知系统 — 浏览
```
taste/aesthetic-systems.md
```
/ 执行
```
python3 scripts/design_systems.py search <term>
```
，采用现成方案来稳定设计决策。
根据推导值构建Token主题 → 遵循三级DTCG标准（参考
```
design-tokens
```
技能）；生成单个
```
theme.css
```
文件。使用
```
scripts/contrast.py
```
/
```
scripts/validate_contrast.py
```
验证所有颜色组合（亮色+暗色模式）——若提取的品牌色不符合AA级对比度要求，需进行调整；设计风格永远不能凌驾于POUR无障碍原则之上。
通过Token驱动重构布局与组件，遵循
```
frameworks/adapter-protocol.md
```
+
```
components/*
```
规范：采用统一的基础组件层，覆盖全部8种状态，接入无障碍功能，不使用emoji（改用lucide图标），仅使用单一主题。应用设计风格规则（
```
design-taste.md
```
），避免回归通用化设计。
对照参考素材进行验证 — 渲染并截图，与参考素材并排对比；运行
```
node scripts/measure_render.mjs
```
、
```
lint_hardcodes.py
```
、
```
taste_audit.mjs
```
，以及
```
npm run verify
```
。

Verification (definition of done)

验证标准（完成定义）

```
npm run verify
```
is 100% (tokens resolve, contrast AA light+dark, no hardcodes/emoji, real-render WCAG).
The rebuilt UI uses ONE inferred token theme — no per-section palettes.
A screenshot of the result visibly matches the reference's design language.

Honest limit: this matches the design system, not a pixel-perfect copy. Do not reproduce the reference's photographs, logos, or copyrighted copy — substitute your own or generic placeholders.

```
npm run verify
```
检测100%通过（Token解析正常、亮色+暗色模式均符合AA级对比度、无硬编码/emoji、渲染结果符合WCAG标准）。
重构后的UI仅使用一套推导得出的Token主题——不采用区块级调色板。
结果截图在视觉上与参考素材的设计语言匹配。

诚实说明：此技能匹配的是设计系统，而非像素级复刻。请勿复制参考素材中的照片、标志或受版权保护的文案——请替换为原创或通用占位内容。