design-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Design Code

Skill：设计代码

Render components into a target framework via the adapter system.

通过适配器系统将组件渲染到目标框架中。

Steps

步骤

Identify the target framework + styling method from the request (or ask).
Read
```
frameworks/adapter-protocol.md
```
(the universal contract: token resolution, component contract, styling, dark mode, motion + output rules).

Load the concrete adapter:

Full references:

frameworks/react-tailwind.md

frameworks/nextjs.md

frameworks/swiftui.md

Concise adapters:

frameworks/adapters/{vue,svelte,angular,solid,web-components-lit,react-native,flutter,jetpack-compose,vanilla-css,css-in-js}.md

No file for the target? Generate an adapter on the fly using the protocol's "author a new adapter" checklist.

Pull the component spec from
```
components/*
```
and the ARIA pattern from
```
accessibility/aria-patterns.md
```
.
Resolve all values to tokens (
```
tokens/*.json
```
); apply aesthetic direction if requested (
```
apply-aesthetic
```
skill).

从请求中识别目标框架和样式方案（若信息不足可询问用户）。
阅读
```
frameworks/adapter-protocol.md
```
（通用契约：包含token解析、组件契约、样式、深色模式、动效及输出规则）。

加载对应的适配器：

完整参考：

frameworks/react-tailwind.md

、

frameworks/nextjs.md

、

frameworks/swiftui.md

精简适配器：

frameworks/adapters/{vue,svelte,angular,solid,web-components-lit,react-native,flutter,jetpack-compose,vanilla-css,css-in-js}.md

目标框架没有对应文件？ 按照协议中的“编写新适配器”检查清单即时生成适配器。

从
```
components/*
```
中获取组件规范，从
```
accessibility/aria-patterns.md
```
中获取ARIA模式。
将所有值解析为token（
```
tokens/*.json
```
）；若用户有要求，应用美学方向（
```
apply-aesthetic
```
skill）。

Output rules (mandatory)

输出规则（强制执行）

Use tokens (never hardcode) · include a11y on every interactive element · handle all applicable of the 8 states · support dark mode at the semantic layer · mobile-first · honor reduced motion · deliver complete files, no placeholders (

workflows/redesign-audit.md

→ Output Completeness).

必须使用token（禁止硬编码）· 所有交互元素必须包含a11y支持 · 处理全部8种适用状态 · 在语义层支持深色模式 · 移动优先 · 遵循减少动效偏好 · 交付完整文件，不得使用占位符（参考

workflows/redesign-audit.md

→ 输出完整性）。

Verification (mandatory before declaring done)

验证（声明完成前必须执行）

Code is the highest-stakes output — self-check every time:

No hardcoded values — every color/size/radius/shadow/duration/font traces to a token (CSS var / theme key / asset). Run
```
scripts/lint_hardcodes.py
```
over the output; zero raw hex/px/ms AND zero raw Tailwind palette utilities (
```
bg-gray-500
```
,
```
text-blue-600
```
) — use semantic utilities/tokens (
```
bg-surface
```
,
```
text-primary
```
). Run
```
scripts/validate_theme_refs.py
```
so every
```
var(--…)
```
resolves to a defined theme token (no floating tokens). One allowed exception: 3rd-party theme-config (MUI/Mantine) mapping our tokens INTO their API.
All applicable states present — Default, Hover, Focus(-visible ring), Active, Disabled, Loading(+
```
aria-busy
```
), Error, Selected — or justified N/A.
Accessibility wired — correct role/ARIA per
```
accessibility/aria-patterns.md
```
, keyboard model, focus management, ≥24px target; verify contrast (
```
scripts/contrast.py
```
) for any new color pair.
Dark mode + reduced motion + responsive — semantic tokens swap; motion has a
```
prefers-reduced-motion
```
fallback; layout is mobile-first.
Completeness — full files, no
```
// ...
```
; if asked for N, deliver N. If any check fails, fix before returning (run
```
a11y-audit
```
if unsure).
Single-theme consistency — consume the project's ONE shared token theme (the root CSS-var layer); never define a per-page palette or new colors. Across multiple pages/screens, the same semantic tokens must drive every surface so the whole product stays visually identical and themeable from one place (
```
.claude/rules/tokens-and-color.md
```
→ Single-Theme Consistency).
One shared primitive layer — build ONE reusable component per atom (
```
Button
```
,
```
Input
```
,
```
Modal
```
,
```
Badge
```
via
```
cva
```
/equivalent); never repeat utility-class clusters inline across files or hand-roll a div-as-modal per screen. Overlays reuse the single
```
Modal
```
primitive: focus trap,
```
role="dialog"
```
,
```
aria-modal="true"
```
,
```
aria-labelledby
```
, Escape, return focus on close, backdrop (WCAG 2.4.3 + 2.1.2). See
```
examples/golden/Button.tsx
```
+
```
examples/golden/Modal.tsx
```
.
Font loading — NEVER
```
@import
```
web fonts in CSS (render-blocking). Use a framework loader (
```
next/font
```
) or
```
<link rel="preconnect">
```
+
```
<link rel="preload">
```
with
```
font-display: swap
```
; self-host when possible. Font family comes from a token (
```
--font-sans
```
), never a literal.
Semantic token BY INTENT + consistency — the token's meaning must match the action: destructive (Delete/Remove) →
```
action.destructive
```
(danger), never
```
action.primary
```
; secondary = neutral outline/transparent with dark text (never a colored fill → no dark-text-on-blue). The SAME action uses the SAME variant everywhere (a trigger button and its confirm button must match — not red in one place and blue in another). Gates don't catch this — you must.
No emoji as icons — use a real icon set (default lucide) as inline SVG with
```
currentColor
```
; never an emoji, including in JS that swaps a label (swap the
```
<svg>
```
, not a text/emoji string). Mentally run
```
scripts/lint_taste.py
```
(it flags emoji-as-icon).
Destructive confirmation UX — irreversible actions (delete account/data, anything stated "cannot be undone") need real friction per WCAG 3.3.4 / 3.3.6: a confirmation dialog whose confirm button restates the action ("Delete account", not "Delete"/"OK"/"Yes") and, for high-stakes, a type-to-confirm step. See
```
examples/sample-app/preview.html
```
and
```
content/voice-tone.md
```
.
Taste pre-flight — run the 12-point aesthetic check in
```
taste/design-taste.md
```
and, for any rendered HTML,
```
node scripts/taste_audit.mjs <file>
```
(render-based: flags timid type-scale contrast, uniform repetition, over-wide measure, palette sprawl). Taste is heuristic — treat findings as a strong signal and pair with a real screenshot review; it is NOT auto-provable like correctness.
Run the gates, then report (mandatory). Before declaring done, RUN
```
node scripts/verify_states.mjs <file>
```
+
```
--dark
```
(every element, default/hover/focus) and
```
node scripts/accuracy_report.mjs
```
; report their actual output. Never type a contrast number or "100%" you didn't just measure (CLAUDE.md → Verification Protocol).

代码是风险最高的输出——每次都必须自检：

无硬编码值 —— 所有颜色/尺寸/圆角/阴影/时长/字体都必须追溯到token（CSS变量 / 主题键 / 资源）。对输出内容运行
```
scripts/lint_hardcodes.py
```
；不得出现原始hex/px/ms值，也不得使用原始Tailwind调色板工具类（
```
bg-gray-500
```
、
```
text-blue-600
```
）——应使用语义化工具类/token（
```
bg-surface
```
、
```
text-primary
```
）。运行
```
scripts/validate_theme_refs.py
```
确保每个
```
var(--…)
```
都能解析到已定义的主题token（无未定义token）。唯一允许的例外：第三方主题配置（MUI/Mantine）将我们的token映射到其API中的情况。
包含所有适用状态 —— 默认、悬停、聚焦（:focus-visible 轮廓）、激活、禁用、加载（+
```
aria-busy
```
）、错误、选中——若不适用需说明理由。
无障碍支持完善 —— 按照
```
accessibility/aria-patterns.md
```
使用正确的role/ARIA、键盘交互模型、焦点管理，点击目标尺寸≥24px；对所有新的颜色对运行
```
scripts/contrast.py
```
验证对比度。
深色模式 + 减少动效 + 响应式 —— 语义化token可切换；动效需有
```
prefers-reduced-motion
```
降级方案；布局采用移动优先原则。
完整性 —— 完整文件，不得出现
```
// ...
```
这类省略标记；若要求生成N个，就交付N个。若任何检查不通过，修复后再返回（不确定时可运行
```
a11y-audit
```
）。
单主题一致性 —— 使用项目唯一的共享token主题（根CSS变量层）；不得为单个页面定义调色板或新颜色。在多个页面/屏幕中，所有界面都必须使用相同的语义token，确保整个产品视觉一致，且可通过单一位置进行主题定制（参考
```
.claude/rules/tokens-and-color.md
```
→ 单主题一致性）。
统一共享原语层 —— 每个原子组件只构建一个可复用版本（通过
```
cva
```
或等效方案实现
```
Button
```
、
```
Input
```
、
```
Modal
```
、
```
Badge
```
）；不得在不同文件中重复编写内联工具类组合，也不得为每个页面手动用div实现模态框。浮层统一复用
```
Modal
```
原语：包含焦点陷阱、
```
role="dialog"
```
、
```
aria-modal="true"
```
、
```
aria-labelledby
```
、Escape键关闭、关闭时返还焦点、背景遮罩（符合WCAG 2.4.3 + 2.1.2标准）。参考
```
examples/golden/Button.tsx
```
和
```
examples/golden/Modal.tsx
```
。
字体加载 —— 严禁在CSS中使用
```
@import
```
加载网页字体（会阻塞渲染）。使用框架自带的加载器（
```
next/font
```
）或
```
<link rel="preconnect">
```
+
```
<link rel="preload">
```
搭配
```
font-display: swap
```
；尽可能自托管字体。字体族必须来自token（
```
--font-sans
```
），不得直接写字面量。
语义token按意图使用 + 一致性 —— token的含义必须与操作匹配：破坏性操作（删除/移除）→
```
action.destructive
```
（危险），严禁使用
```
action.primary
```
；次要操作=中性轮廓/透明背景加深色文字（严禁使用彩色填充——不得出现蓝底深字的情况）。同一操作在所有位置必须使用相同的变体（触发按钮和确认按钮必须一致——不能一处是红色另一处是蓝色）。检查工具无法识别这类问题——你必须自行把关。
禁止使用emoji作为图标 —— 使用正规图标库（默认lucide）的内联SVG，搭配
```
currentColor
```
；严禁使用emoji，包括在JS中切换标签的场景（应切换
```
<svg>
```
，而非文本/emoji字符串）。可在脑中模拟运行
```
scripts/lint_taste.py
```
（它会标记将emoji用作图标的问题）。
破坏性操作确认体验 —— 不可逆操作（删除账户/数据、任何标注“无法撤销”的操作）需要按照WCAG 3.3.4 / 3.3.6标准设置明确的操作门槛：确认对话框的确认按钮需重述操作内容（如“删除账户”，而非“删除”/“确定”/“是”），高风险操作还需增加输入确认步骤。参考
```
examples/sample-app/preview.html
```
和
```
content/voice-tone.md
```
。
设计品味预检 —— 运行
```
taste/design-taste.md
```
中的12项美学检查，对于所有可渲染的HTML，运行
```
node scripts/taste_audit.mjs <file>
```
（基于渲染结果：标记字号对比不足、单调重复、行宽过宽、调色板混乱等问题）。设计品味是启发式的——应将检查结果作为重要参考，并结合实际截图评审；它不像正确性那样可以自动验证。
运行检查工具后再报告（强制执行） 在声明完成前，必须运行
```
node scripts/verify_states.mjs <file>
```
+
```
--dark
```
（检查每个元素的默认/悬停/聚焦状态）和
```
node scripts/accuracy_report.mjs
```
；如实报告工具的实际输出。严禁编造未实际测量的对比度数值或“100%”这类结果（参考CLAUDE.md → 验证协议）。