distill

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.

Distill the UI at

$ARGUMENTS

to its essence. Load the

ui-craft

skill.

The test for every section, component, prop, and word:

Does this answer a question the user is asking or drive an action they need to take? If not — cut it.

Knob gating (CRAFT_LEVEL):

```
≤ 4
```
→ be more aggressive with cuts; strip anything that doesn't directly drive action.
```
5-7
```
→ standard cuts per the test below.
```
8+
```
→ preserve signature details even if they don't directly drive action — the one memorable element that makes this feel designed stays.

Apply ruthlessly:

Content — walls of text → 2-3 sentences max per landing section. Vague testimonials → specific metrics or cut. "Features" lists with 12 items → pick the 4 that matter. Placeholder copy → real or removed.
Structure — identical card grids → asymmetric rows with real visuals. Three competing CTAs → one primary + one secondary. Breadcrumbs + title + subtitle + description + icon → pick the two that are load-bearing.
Visuals — decorative gradient blobs → gone. Background patterns that don't carry meaning → gone. Duplicate iconography → gone.
Visual weight reduction — if headings are shouting at weight 800 / 72px / tracking -0.04em, compress: 800 → 600, 72 → 56, -0.04 → -0.02. Don't remove hierarchy; tighten the range. Replace hard drop shadows with ambient + direct (
```
references/modern-css.md
```
) or 1px borders — never both. If every section is full-bleed and high-contrast, let some breathe.
Code — unused props, dead branches, commented-out blocks,
```
console.log
```
, TODO notes without tickets — gone.
Anti-slop overlap — if you see anything on the Anti-Slop Test (SKILL.md), cut it first.

Overlapping commands: for color overload (too many accents, decorative color), use

/colorize

. For motion noise, use

/animate

with

MOTION_INTENSITY ≤ 3

Output:

Edit code directly.
Report what was cut and why in a table:

Cut	Why

End with a one-line delta: "Before: N sections / M components / X lines. After: …".

Guardrail: do not cut accessibility affordances (labels, focus styles, error text, reduced-motion fallbacks) — those always earn their space.

Next step:

/polish

— what survived the cut deserves the details (rung 1).

背景： 此子技能是

ui-craft

技能体系下的一个细分方向。如果同时安装了

ui-craft

技能，请先阅读其SKILL.md中的Discovery + Anti-Slop + Craft Test相关内容，再应用下方的具体规则。

将

$ARGUMENTS

指定的UI提炼至核心本质。加载

ui-craft

技能。

每个板块、组件、prop与文字的检验标准：

它是否能解答用户的疑问，或是驱动用户采取必要行动？如果不能——就删掉。

力度调节（CRAFT_LEVEL）：

```
≤ 4
```
→ 裁剪力度更强；移除所有无法直接驱动行动的内容。
```
5-7
```
→ 按照下方检验标准执行常规裁剪。
```
8+
```
→ 保留标志性细节，即便它们不直接驱动行动——那些让设计具有辨识度的记忆点需要保留。

裁剪执行原则（请严格落实）：

内容 — 大段文字 → 每个落地页板块最多保留2-3句话。模糊的用户证言 → 替换为具体数据或直接删除。包含12项的「功能列表」 → 只保留4项核心功能。占位符文案 → 替换为真实内容或直接移除。
结构 — 统一的卡片网格 → 搭配真实视觉元素的不对称行布局。三个相互冲突的CTA → 一个主CTA + 一个次CTA。面包屑 + 标题 + 副标题 + 描述 + 图标 → 只保留两个核心承载元素。
视觉 — 装饰性渐变色块 → 删除。无实际意义的背景图案 → 删除。重复的图标体系 → 删除。
视觉权重精简 — 如果标题的字重800 / 字号72px / 字距-0.04em过于醒目，适当压缩：字重800→600，字号72px→56px，字距-0.04em→-0.02em。不要移除层级关系，只需收窄层级差值范围。将硬阴影替换为环境光+直射光阴影（参考
```
references/modern-css.md
```
）或1px边框——二者不可同时使用。如果所有板块都是全出血高对比度设计，适当给部分板块留出呼吸空间。
代码 — 未使用的props、死分支、被注释的代码块、
```
console.log
```
、无对应工单的TODO备注 — 全部删除。
反冗余（Anti-Slop）重叠项 — 如果发现任何符合Anti-Slop测试（见SKILL.md）的内容，优先删除。

相关命令： 如果存在色彩过载（过多强调色、装饰性色彩），使用

/colorize

命令。如果存在动效冗余，使用

/animate

命令并设置

MOTION_INTENSITY ≤ 3

。

输出要求：

直接编辑代码。
用表格说明裁剪的内容及原因：

裁剪内容	裁剪原因

最后用一行变更统计结尾：「Before: N个板块 / M个组件 / X行代码。After: …」。

护栏规则： 不要裁剪无障碍相关功能（标签、焦点样式、错误提示、减少动效的降级方案）——这些内容始终有其存在的必要。

下一步：

/polish

—— 经过裁剪保留下来的内容值得打磨细节（第一阶）。