redesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Redesign

$ARGUMENTS

. Load the

ui-craft

skill and read

references/craft-intent.md

. A redesign is not a greenfield build wearing the old content — most of its value is in what you deliberately keep.

Step 1 — Audit what exists (before any opinion):

Run the detector on the current source (
```
npx ui-craft-detect <path>
```
) or live page (
```
npx ui-craft-detect <url>
```
) and note findings.
Inventory: pages/routes, section order, heading hierarchy (h1–h3), nav structure, conversion paths (CTAs and where they lead), forms, imagery assets, fonts, color values actually in use.
Read
```
.ui-craft/brief.md
```
if present — prior constraints still bind.

Step 2 — Classify what to preserve. Wrong-to-change unless the user explicitly asks:

Brand equity — logo, name, an established palette the business already uses in the wild. Committed brand color stays; you may re-tune tints/shades into a proper token scale.
IA + SEO — URLs/routes, page set, heading semantics, title/meta, alt text, structured data. A redesign that tanks organic traffic is a failure regardless of how it looks.
Content + voice — existing copy is data about the business. Restructure freely; rewrite voice only with permission.
Conversion paths — every CTA and form that exists today exists for a reason. Relocate, restyle, but never silently drop one.

Step 3 — Pick the scope and say it out loud:

Scope	What changes	When
Refresh	Tokens only: type scale, spacing rhythm, radii, shadows, color tuning	Site is structurally fine, looks dated
Reskin	Visual layer + component styling; layout skeleton and section order stay	Bones are good, skin is generic or old
Rebuild	Layout and composition too; content, IA, and brand carry over	Layout itself is the problem

Default to the smallest scope that fixes the stated complaint. For rebuild, print a short before/after section map and get a nod before writing code.

Step 4 — Declare the Craft Read (surface kind, audience, theme,

DESIGN_VARIANCE

, signature bet) per

references/craft-intent.md

. Redesigns default to variance 4–5: the brand is already committed, so spend boldness on typography and composition, not on a new identity.

Step 5 — Modernize with levers, in this order: typography (scale + pairing per

references/typography.md

) → spacing rhythm → color tokens (

references/color.md

) → imagery treatment → motion (entrance/hover only where focal). Fix every detector finding from Step 1 along the way.

Never: invent a new brand palette over a committed one, drop routes or pages, flatten heading semantics for looks, rewrite copy voice unasked, or ship the redesign with more detector findings than the original had.

Output: edit code directly (refresh/reskin) or section map first (rebuild). Print the Review Format table, the detector before/after counts, and end with the Craft Read line.

Next step:

/critique

— check the modernized surface against hierarchy and anti-slop before shipping (rung 1).

背景： 本子技能是更广泛的

ui-craft

技能的一个视角。如果同时安装了

ui-craft

技能，请先阅读其SKILL.md中的「探索+反冗余+工艺测试」部分，再应用以下具体视角。

重新设计

$ARGUMENTS

。加载

ui-craft

技能并阅读

references/craft-intent.md

。重新设计不是套着旧内容的从零构建——其大部分价值在于你刻意保留的部分。

步骤1 — 审计现有内容（在提出任何想法之前）：

对当前源码（
```
npx ui-craft-detect <path>
```
）或线上页面（
```
npx ui-craft-detect <url>
```
）运行检测器，并记录发现的问题。
清点内容：页面/路由、板块顺序、标题层级（h1–h3）、导航结构、转化路径（CTA及其指向）、表单、图片素材、字体、实际使用的颜色值。
如果存在
```
.ui-craft/brief.md
```
请阅读——之前的约束仍然有效。

步骤2 — 分类梳理需保留的内容。除非用户明确要求，否则不应更改：

品牌资产 —— logo、名称、企业已在实际使用的成熟配色体系。已确定的品牌色保留；你可以将色调/深浅重新调整为合适的token层级。
IA + SEO —— URL/路由、页面集合、标题语义、title/meta标签、alt文本、结构化数据。无论外观多么好看，如果重新设计导致自然流量下滑，那就是失败的。
内容与语气 —— 现有文案是关于企业的重要数据。可以自由调整结构；但只有获得许可才能重写语气风格。
转化路径 —— 现有的每个CTA和表单都有其存在的理由。可以调整位置、重新设计样式，但绝不能默默删除任何一个。

步骤3 — 选定范围并明确告知用户：

范围	变更内容	适用场景
刷新（Refresh）	仅调整token：字体尺度、间距节奏、圆角、阴影、色彩微调	网站结构完好，只是外观过时
换肤（Reskin）	视觉层 + 组件样式；保留布局骨架和板块顺序	基础架构良好，只是外观普通或陈旧
重构（Rebuild）	同时调整布局与排版；保留内容、IA和品牌	布局本身存在问题

默认选择能解决用户所述问题的最小范围。对于重构（Rebuild），请先输出一份简短的板块前后对比图，获得用户认可后再编写代码。

步骤4 — 按照
references/craft-intent.md
的要求声明Craft Read（界面类型、受众、主题、

DESIGN_VARIANCE

、核心亮点）。重新设计的默认差异度为4-5：品牌已经确定，因此要在排版和布局上大胆创新，而非打造全新的品牌形象。

步骤5 — 按以下顺序调整各个维度进行现代化改造： 排版（按照

references/typography.md

调整尺度+字体搭配）→ 间距节奏 → 色彩token（

references/color.md

）→ 图片处理 → 动效（仅在焦点区域添加入场/悬停效果）。在此过程中，修复步骤1中检测器发现的所有问题。

禁止行为： 为已确定的品牌重新设计配色体系、删除路由或页面、为了外观牺牲标题语义、未经请求重写文案语气，或者发布的重新设计版本比原始版本有更多检测器发现的问题。

输出： 直接编辑代码（刷新/换肤场景）或先输出板块规划图（重构场景）。输出评审格式表格、检测器问题数前后对比，最后以Craft Read行结束。

下一步：

/critique

—— 在发布前，对照层级和反冗余原则检查现代化后的界面（第1级）。