prototype

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Prototype

原型

This skill explores one idea as several working variants. The user compares them in the running app, picks one and the others are deleted.

此 skill 将一个想法探索为多个可运行的变体。用户在运行中的应用里比较这些变体并选定其中一个，其余变体随后会被删除。

Real code, then gone

真实代码，随后清除

Each variant is real code with real data in the real app, not a mockup. Build the number asked for. With no number, build five that differ in approach, not only in colour. The page is temporary and goes once a variant is picked.

Every state of an existing component on one page belongs to

lab

. Copying an outside reference belongs to

match

每个变体都是使用真实数据、在真实应用中运行的真实代码，而不是 mockup。按要求的数量进行构建。如果未指定数量，则构建五个在方案上存在差异的变体，而不只是颜色不同。该页面是临时性的，一旦选定变体就会被移除。

将现有组件的每种状态放在同一个页面上属于

lab

。复制外部参考实现属于

match

。

1. Restate the idea

1. 重述想法

Write the idea in one line and the axis the variants explore, such as layout, motion or density. Ask one question when the idea has two readings.

用一行说明想法以及变体所探索的维度，例如布局、动效或信息密度。当一个想法存在两种理解时，提出一个问题。

2. Build real variants

2. 构建真实变体

Use the project's components and real or realistic data. A static image or lorem ipsum is

prototype-real-code

prototype-real-data

使用项目的组件以及真实或逼真的数据。静态图片或 Lorem ipsum 属于

prototype-real-code

或

prototype-real-data

。

3. Put them on one page

3. 放在同一个页面中

Show every variant on one route. Separate pages per variant is

prototype-one-page

. Copy switcher.js into the app beside that route and load it once, as its header comment shows. Wrap the variants in

<prototype-switcher>

, one child each with

data-variant

and an optional

data-note

The switcher ships with the skill, so write the variants only. A switcher, tab row or grid written from scratch is

prototype-shipped-switcher

Give each a short label that says how it differs. "Variant 3" is

prototype-label-variants

. Use the app's current theme unless the user asked for both. Light and dark side by side by default is

prototype-one-theme

在一个 route 上展示所有变体。为每个变体使用不同的路由属于

prototype-one-page

。将 switcher.js 复制到应用中该 route 旁边，并按照其头部注释的说明加载一次。使用

<prototype-switcher>

包裹各个变体，每个变体对应一个子元素，并带有

data-variant

和可选的

data-note

。

该 switcher 随 skill 一起提供，因此只需编写变体。自行编写 switcher、标签栏或网格属于

prototype-shipped-switcher

。

为每个变体提供一个简短标签，说明它与其他变体的差异。“Variant 3”属于

prototype-label-variants

。除非用户明确要求同时展示两种主题，否则使用应用当前的主题。默认将浅色和深色主题并排展示属于

prototype-one-theme

。

4. Open it

4. 打开页面

Start the dev server, open the page and look at every variant once. A path in the reply with nothing opened is

prototype-open-it

启动开发服务器，打开页面并逐一查看所有变体。仅在回复中提供路径而未实际打开页面属于

prototype-open-it

。

5. Prune after the pick

5. 选定后进行清理

The bar's Pick button copies a line such as "Pick Inline Filters from /prototypes/filters" for the user to paste back. When the user picks, move that variant into the product. Delete the losing variants with the route,

switcher.js

and its type declaration. Leftover variants after a pick is

prototype-prune-after-pick

工具栏中的 Pick 按钮会复制一行类似“Pick Inline Filters from /prototypes/filters”的内容，供用户粘贴回来。用户选定后，将该变体移入产品中。删除落选变体，同时删除对应的 route、

switcher.js

及其类型声明。选定后仍残留其他变体属于

prototype-prune-after-pick

。

The pair

对照规则

Every check is a pair. The broken line sits beside the line that replaces it.

Rule	Broken	Replacement
`prototype-real-code`	A static mockup image	The variant built from project components
`prototype-real-data`	Lorem ipsum rows	Real or realistic rows
`prototype-label-variants`	`Variant 3`	`Inline Filters`
`prototype-one-page`	Five routes, one per variant	One route with a switcher
`prototype-shipped-switcher`	A switcher written from scratch	`switcher.js` loaded, only the variants written
`prototype-one-theme`	Light and dark side by side, unasked	The app's current theme
`prototype-open-it`	"Built at `/prototypes/filters` "	The page opened, every variant checked
`prototype-prune-after-pick`	Four losing variants left in `src/`	The pick shipped, the rest deleted

每项检查都由一对内容组成。错误示例与替代方案并列展示。

规则	错误示例	替代方案
`prototype-real-code`	静态 mockup 图片	使用项目组件构建的变体
`prototype-real-data`	Lorem ipsum 数据行	真实或逼真的数据行
`prototype-label-variants`	“Variant 3”	“Inline Filters”
`prototype-one-page`	五个 route，每个 route 对应一个变体	使用 switcher 的单个 route
`prototype-shipped-switcher`	自行编写的 switcher	已加载 `switcher.js` ，仅需编写变体
`prototype-one-theme`	未被要求却将浅色和深色主题并排展示	应用当前的主题
`prototype-open-it`	“Built at `/prototypes/filters` ”	已打开页面并检查每个变体
`prototype-prune-after-pick`	`src/` 中残留四个落选变体	已交付选定变体，其余变体均已删除

Reporting

报告

Severity.

HIGH

is a variant that does not run, or losing variants left after a pick.

MEDIUM

is placeholder data, unlabelled variants, variants that differ only in colour or a hand-built switcher.

LOW

is a page that was not opened for the user.

Format. One finding per root cause:

file:line - [rule-id] what is wrong

Then a

Rule | Count | Severity

summary.

Block

when any

HIGH

remains,

Approve

otherwise. Mark every variant you could not open as

Not verified

严重程度。 无法运行的变体，或选定后仍然残留的落选变体属于

HIGH

。占位数据、未标注变体、仅在颜色上存在差异的变体，以及自行编写的 switcher 属于

MEDIUM

。未为用户打开页面属于

LOW

。

格式。 每个根因对应一项发现：

file:line - [rule-id] what is wrong

然后提供

Rule | Count | Severity

汇总。只要仍有任何

HIGH

问题，就标记为

Block

；否则标记为

Approve

。将每个无法打开的变体标记为

Not verified

。