variant

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Variants

变体（Variants）

This skill takes one described piece of UI and builds three versions that differ on purpose. They go behind a picker in the real page, so you can flip between them and choose.

Every other skill here judges. This one produces candidates and hands the decision back. Reviewing existing UI is

interface-review

and

better-interface

, and it does not pick the winner.

该Skill会针对指定的某一UI组件，构建三个具有明确差异的版本。这些版本会被放置在真实页面的选择器（picker）背后，你可以在它们之间切换并做出选择。

本集合中的其他Skill都是做判断，而这个Skill是生成候选方案并将决策权交还给你。现有UI的评审由

interface-review

和

better-interface

负责，它们不会选出最优方案。

Different answers, not different tints

不同的解决方案，而非细微调整

Three variants that differ in accent color teach nothing. You flip between them, see no real choice, and the run is wasted.

So each variant is a different answer to the same brief, on an axis this collection owns:

Axis	Owner	What varies
Structure	`better-layout`	Grouping, order, column count, what collapses
Density	`better-layout`	Spacing scale, hit areas, how much fits
Emphasis	`better-colors`	Where filled color goes, what recedes
Type	`better-typography`	Scale steps, weight contrast, measure
Voice	`better-writing`	Labels, tone, how much copy

Pick one primary axis and give each variant a different position on it. Secondary choices follow from it rather than varying on their own. A dense variant may need a smaller type step, and that is coherence, not a second axis.

Varying every axis at once produces three unattributable results. You learn which you liked, not what made it work, so the next piece starts from nothing.

仅在强调色上有差异的三个变体毫无参考价值。你切换它们时看不到真正的选择空间，这次操作也就白费了。

因此每个变体都是针对同一需求的不同解决方案，差异维度来自本Skill集合中的以下方向：

维度	所属Skill	差异点
结构	`better-layout`	分组方式、排序、列数、折叠内容
密度	`better-layout`	间距比例、点击区域、内容容纳量
视觉重点	`better-colors`	填充色位置、弱化元素
排版	`better-typography`	字号层级、字重对比、行宽
文案风格	`better-writing`	标签、语气、文案长度

选择一个核心维度，让每个变体在该维度上处于不同位置。次要选择应基于核心维度衍生，而非独立变化。例如，高密度变体可能需要更小的字号层级，这是一致性的体现，而非第二个维度。

同时改变所有维度会产生三个无法归因的结果。你只能知道自己喜欢哪个，却不清楚背后的原因，导致下一次设计从零开始。

The floor every variant clears

所有变体必须满足的基础要求

A variant that wins on looks and fails an escalation trigger is not a candidate. It is a bug with a nice surface.

Before a variant enters the picker it clears

better-interface

's escalation triggers. Every control has an accessible name, keyboard reaches everything a pointer does, focus is visible, nothing clips at 320px, and no meaning rides on color alone.

That floor is identical across variants. It is not an axis and never trades against one. Where a direction can only work by breaking it, say so and drop the direction.

一个仅在外观上胜出但触发问题升级的变体不能作为候选方案，它只是表面好看的bug。

变体进入选择器之前，必须通过

better-interface

的问题升级检查：每个控件都有可访问名称、键盘可操作所有指针能触及的元素、焦点可见、在320px宽度下无内容截断、信息传递不依赖颜色。

这些基础要求对所有变体一致，不属于差异维度，也不能与维度进行权衡。如果某个方向的设计必须违反基础要求，应说明并放弃该方向。

1. Scope one piece

1. 明确单个组件范围

One piece of UI per run. "The dashboard" is not a piece; the metric card is. Where the brief spans several, name the one the others hang off, say why, and offer the rest as later runs.

Restate the brief in one sentence: what the thing is, where it renders, what it has to do.

每次运行仅针对一个UI组件。“仪表盘”不是单个组件，而“指标卡片”是。如果需求涉及多个组件，指明核心组件并说明原因，其余组件可作为后续运行的目标。

用一句话重述需求：该组件是什么、渲染位置、核心功能。

2. Learn the ground

2. 了解项目基础

Variants have to look like they could ship tomorrow, so read what they stand on:

The styling system, the component library, and any motion library.
The tokens: color, spacing, radius, type scale, easing.
The product's density and voice. A dense professional tool bounds how far the boldest variant may go.
Where the piece renders: against what background, beside which neighbours, at which widths.

With no project to read, use neutral grays, one accent, and the system font stack, and say that is what you did.

变体必须看起来像是可以立即上线的版本，因此需要了解项目的基础配置：

样式系统、组件库及任何动效库。
设计令牌（tokens）：颜色、间距、圆角、字号层级、缓动曲线。
产品的密度和风格定位。例如，高密度的专业工具会限制最激进变体的设计边界。
组件的渲染环境：背景、相邻元素、适配宽度。

如果没有项目可参考，使用中性灰色、一种强调色和系统字体栈，并说明此选择。

3. Name the axis before writing code

3. 编写代码前确定维度

Default to three variants. Go to five only when asked, or when the space is genuinely wide. Past five nobody compares, they scroll.

Write the set down first, a name and an axis position each. Names say what the direction is, so

Quiet

Editorial

Dense

, never

Option A

This step is done when no two variants share a position and you can state each one's axis in a phrase.

默认生成三个变体。仅在被要求或设计空间确实足够大时才增加到五个。超过五个后，用户不会再逐一比较，只会滚动浏览。

先写下所有变体的信息：每个变体的名称和对应的维度位置。名称应明确方向，例如

Quiet

（简约）、

Editorial

（排版突出）、

Dense

（高密度），而非“选项A”。

当所有变体的维度位置不重复，且每个变体的维度方向都能用一句话说明时，此步骤完成。

4. Build it into the real page

4. 集成到真实页面中

A variant looks fine in isolation, which is why isolation is the wrong place to judge it. Host the variants on the page that will actually contain the piece, with the real chrome, the real neighbours, and realistic data.

Select with a URL search param (

?variant=quiet

), so every variant is a link you can send someone. A floating control sets it; picker.md holds the spec.

Render one variant at a time, full size. Thumbnails distort spacing and scale, and spacing is usually the thing you are choosing between.

Where no page can host it, build one self-contained HTML file and keep the same picker.

Give every variant real content: product-shaped copy, plausible names, and the number of items the page will really carry. Lorem ipsum and three rows make every structure look good.

变体在孤立环境中看起来可能不错，但孤立环境不适合评估。应将变体部署到实际承载该组件的页面中，搭配真实的页面框架、相邻元素和真实数据。

使用URL搜索参数（

?variant=quiet

）进行切换，这样每个变体都有可分享的链接。通过浮动控件进行设置，picker.md包含具体规范。

一次仅渲染一个完整尺寸的变体。缩略图会扭曲间距和比例，而间距通常是你需要选择的关键因素。

如果没有合适的页面承载，构建一个独立的HTML文件并保留相同的选择器。

为每个变体提供真实内容：产品风格的文案、合理的名称、页面实际会承载的条目数量。Lorem ipsum和三行内容会让任何结构看起来都不错。

5. Present the tradeoffs and stop

5. 说明权衡点后交由用户决策

Flip through every variant yourself first. Each one renders, each interaction responds, the console is clean.

Then hand the decision over:

Variant	Axis position	Right when	Costs
Quiet	Lowest visual weight	The page is used daily	Least memorable
Editorial	Largest type, most space	The moment deserves weight	Eats vertical space

Say where the picker is running, which key flips it, and which width you judged at. The answer can change between 375px and 1440px.

Never mark a favourite in the table. Asked directly, answer from how often the piece is seen and from the product's personality, not from which one you enjoyed building.

先自行切换浏览所有变体：确保每个变体都能正常渲染、交互响应正常、控制台无报错。

然后将决策权交给用户：

变体	维度位置	适用场景	代价
Quiet	视觉权重最低	页面为日常高频使用	辨识度最低
Editorial	字号最大、空间最充足	需要突出重要时刻	占用更多垂直空间

说明选择器的运行位置、切换快捷键，以及评估时使用的宽度。在375px和1440px宽度下，最优选择可能不同。

切勿在表格中标注偏好选项。如果被直接问及，应基于组件的使用频率和产品个性作答，而非个人喜好。

6. Promote one, delete the rest

6. 选用最优版本，删除其余变体

On a choice: build that variant properly where it belongs, following the project's own conventions, then delete the others and the harness.

Asked for another round instead, keep the harness and run step 3 again, taking new positions around the direction you leaned toward.

Until promotion, the harness never imports from production and production never imports from the harness.

一旦做出选择：按照项目自身规范在正确位置构建该变体的正式版本，然后删除其余变体和测试框架。

如果要求进行下一轮迭代，保留测试框架并重新执行步骤3，围绕倾向的方向选择新的维度位置。

在正式选用之前，测试框架绝不能引入生产代码，生产代码也不能依赖测试框架。

Before you finish

完成前检查

Mistake	Fix
Variants differ only in accent color or copy	Move one to a different position on the primary axis, or cut it
Every axis varies at once	Vary one; let the rest follow from it
Judged on a blank route	Host them on the page that will contain the piece
Lorem ipsum, three rows, "Jane Doe"	Real copy and the item count the page will really carry
The boldest variant skips keyboard or focus	Clear the floor or drop the direction
A favourite marked in the table	State each variant's cost and let the user choose
Picker restyled with the project's tokens	Keep it visibly outside the design system
Harness left behind after promotion	Delete it unless asked to keep it

错误	修复方案
变体仅在强调色或文案上有差异	将其中一个调整到核心维度的不同位置，或删除该变体
同时改变所有维度	仅改变一个维度，其余基于该维度衍生
在空白路由中评估	将变体部署到实际承载该组件的页面中
使用Lorem ipsum、三行内容、“Jane Doe”这类示例内容	使用真实文案和页面实际会承载的条目数量
最激进的变体跳过键盘操作或焦点可见性检查	通过基础要求检查，或放弃该方向
在表格中标注偏好选项	说明每个变体的代价，交由用户选择
使用项目设计令牌重新设计选择器	保持选择器明显独立于设计系统之外
选用最优版本后保留测试框架	除非被要求保留，否则删除测试框架