redesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Redesign & Audit

Audit-first redesign that preserves behavior.

先审计再重新设计，同时保留原有功能。

Steps

步骤

Read
```
workflows/redesign-audit.md
```
(the full Scan → Diagnose → Direct → Apply → Verify sequence + Output Completeness).
Scan the codebase: framework, styling method (→ route to the matching
```
frameworks/
```
adapter), token reality, components, what must be preserved.
Diagnose with the Banned Defaults checklist (
```
taste/design-taste.md
```
) + the review rubric (
```
design-review
```
skill). Produce a prioritized findings table.
Direct: choose an archetype/system (
```
apply-aesthetic
```
skill) that fits the brand.
Apply in order — tokens first, then typography/spacing, then component states, then motion — without changing routes/data/markup semantics (except a11y fixes).
Verify: re-run
```
design-review
```
+
```
a11y-audit
```
; smoke-test every previously working flow; dark mode + responsive spot-check. Run
```
scripts/validate_contrast.py
```
on the token source and
```
scripts/lint_hardcodes.py
```
over the changed code.

阅读
```
workflows/redesign-audit.md
```
（完整的扫描→诊断→定向→实施→验证流程 + 输出完整性要求）。
扫描代码库：框架、样式方法（→匹配对应的
```
frameworks/
```
适配器）、token实际情况、组件、必须保留的内容。
诊断：使用禁用默认项检查表（
```
taste/design-taste.md
```
）+ 评审准则（
```
design-review
```
技能）。生成优先级排序的问题发现表。
定向：选择符合品牌风格的原型/系统（
```
apply-aesthetic
```
技能）。
实施：按顺序进行——先处理token，然后是排版/间距，接着是组件状态，最后是动效——不更改路由/数据/标记语义（无障碍修复除外）。
验证：重新运行
```
design-review
```
+
```
a11y-audit
```
；对所有之前正常运行的流程进行冒烟测试；抽查深色模式和响应式效果。在token源上运行
```
scripts/validate_contrast.py
```
，在修改后的代码上运行
```
scripts/lint_hardcodes.py
```
。

Guardrails

准则

Never sacrifice a working feature for aesthetics. Never ship a brand color that fails contrast. Never remove existing accessibility affordances. Deliver complete files — no placeholders.

绝不为了美观牺牲可用功能。绝不使用对比度不达标的品牌色。绝不移除现有的无障碍功能。交付完整文件——无占位符。

Single-theme consistency (critical for multi-page apps)

单主题一致性（多页面应用的关键要求）

Consolidate to ONE shared token theme and make every page consume it — a redesign that leaves different pages on different palettes has failed. Replace per-page/ad-hoc colors with semantic tokens; verify with

scripts/lint_hardcodes.py

that no page reintroduces off-theme values. Theme switches must come from the single token source, not page edits (CLAUDE.md → Single-Theme Consistency).

整合为一套共享的token主题，并让每个页面都使用它——如果重新设计后不同页面仍使用不同调色板，则视为失败。将页面专属/临时颜色替换为语义化token；使用

scripts/lint_hardcodes.py

验证没有页面重新引入不符合主题的值。主题切换必须来自单一token源，而非页面编辑（参考CLAUDE.md → 单主题一致性）。