colorize

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.

Add color to the UI at the target the user described. Load the

ui-craft

skill.

The rule (from SKILL.md): 90%+ neutral, one accent, 3-5 placements per viewport. Reinforce this before adding anything. More color is not more design.

Before you touch anything — ask about brand. If a brand color exists, use it. If not, offer 2-3 options in OKLCH — include one warm (e.g.,

oklch(0.67 0.19 45)

) and one cool (e.g.,

oklch(0.60 0.18 250)

). Never default to blue.

Where color EARNS its place:

Primary CTA background.
One key metric tint — accent at ~8% opacity as a subtle background, accent at full strength on the number itself.
Active state of the current nav item (underline, dot, or subtle tint — pick one).
Status dots (success / warning / danger), 6-8px, no pills.
Focus ring (
```
:focus-visible
```
).

Where color does NOT go (anti-slop territory):

Heading gradient text.
Colored left or top borders on every card.
Uniform chips on every tag/label.
Emoji-as-icons to inject "color."
Trend arrows in green/red when a plain
```
↑
```
/
```
↓
```
+
```
tabular-nums
```
would read cleaner.

Knob gating (VISUAL_DENSITY):

```
≤ 4
```
→ single accent only, max 3 placements.
```
5-7
```
→ single accent, 3-5 placements, status dots allowed.
```
8+
```
→ semantic palette (success/warning/danger) allowed beyond the single accent — dashboards and data UIs earn this.

背景说明： 此子技能是更广泛的

ui-craft

技能的一个分支。如果同时安装了

ui-craft

技能，请先阅读其SKILL.md中的发现、反冗余设计及工艺测试部分，再应用以下具体规则。

为用户指定的UI目标添加色彩。加载

ui-craft

技能。

规则（来自SKILL.md）： 90%以上为中性色，搭配1种强调色，每个视口内放置3-5处。在添加任何色彩前先强调此规则。并非色彩越多设计越好。

在进行任何操作前——先询问品牌色彩。 如果已有品牌色，则使用该颜色；如果没有，提供2-3种OKLCH色彩选项——包括1种暖色调（例如：

oklch(0.67 0.19 45)

）和1种冷色调（例如：

oklch(0.60 0.18 250)

）。切勿默认使用蓝色。

色彩的合理应用场景：

主要CTA（号召性按钮）的背景。
关键指标的着色——强调色以约8%的透明度作为微妙背景，数字本身使用全强度的强调色。
当前导航项的激活状态（下划线、圆点或微妙着色——三选一）。
状态圆点（成功/警告/危险），尺寸6-8px，不要使用胶囊形状。
聚焦环（
```
:focus-visible
```
）。

色彩的禁用场景（避免冗余设计）：

标题渐变文字。
每张卡片的左侧或顶部彩色边框。
每个标签/标记使用统一的色块样式。
用表情符号作为图标来“注入”色彩。
使用绿色/红色趋势箭头，而实际上仅用
```
↑
```
/
```
↓
```
+
```
tabular-nums
```
（表格数字字体）就能更清晰表达。

视觉密度控制（VISUAL_DENSITY）：

```
≤ 4
```
→ 仅使用单一强调色，最多3处放置。
```
5-7
```
→ 单一强调色，3-5处放置，允许使用状态圆点。
```
8+
```
→ 除单一强调色外，允许使用语义化调色板（成功/警告/危险）——仪表盘和数据类UI适用此规则。

Over-colored? Reduce.

色彩过多？简化处理。

If the UI is already shouting with color, this command also removes color.

Count accents per viewport. Cut to 1-3. The primary CTA keeps its accent; everything else goes neutral unless it's a true semantic state (success/warning/danger on a real status).
Mute decorative color. Background patterns, tinted cards without meaning, colored left borders on every list item, heading gradients, colored pills on every tag → gone.
Keep semantic, cut decorative. Status dots, focus rings, active-nav underlines stay. Color as ornament goes.

References to read:

references/color.md

(OKLCH, tokens, dark mode, contrast),

references/accessibility.md

(contrast ratios for AA/AAA).

Output: edit code directly. Lift any literal hex into CSS variables (

--color-accent

--color-accent-tint

) — respect existing token naming if present. Print the Review Format table. One row per placement, with the ratio check (AA/AAA) on text uses.

如果UI已因色彩过于繁杂而显得花哨，此命令也可用于移除多余色彩。

统计每个视口内的强调色数量，削减至1-3处。主要CTA保留其强调色；其他所有元素改为中性色，除非是真正的语义化状态（如真实状态下的成功/警告/危险）。
移除装饰性色彩。背景图案、无意义的着色卡片、每个列表项的左侧彩色边框、标题渐变、每个标签的彩色胶囊样式——全部移除。
保留语义化色彩，移除装饰性色彩。状态圆点、聚焦环、激活导航项的下划线保留。仅作为装饰的色彩全部移除。

参考文档：

references/color.md

（OKLCH、颜色令牌、深色模式、对比度），

references/accessibility.md

（AA/AAA级对比度要求）。

输出要求： 直接编辑代码。将所有十六进制颜色值转换为CSS变量（

--color-accent

、

--color-accent-tint

）——如果已有现成的令牌命名规则，请遵循该规则。输出评审格式表格，每个放置位置对应一行，文本类使用需包含对比度检查（AA/AAA级）。