prototype

原型

此技能会围绕一个想法探索多个可运行的变体。用户在运行中的应用里比较它们，选出一个，其余变体则会被删除。

真实代码，然后删除

每个变体都是真实应用中的真实代码和真实数据，而不是模型图。按要求构建指定数量的变体。未指定数量时，构建五个在实现方式上有所不同、而不只是颜色不同的变体。该页面是临时的，选定变体后就会移除。

现有组件在单个页面上的所有状态都属于 lab。复刻外部参考则属于 match。

1. 重述想法

用一句话写出这个想法，以及变体要探索的维度，例如布局、动效或密度。如果这个想法有两种解读，就提出一个问题。

2. 构建真实变体

使用项目的组件和真实或逼真的数据。静态图片或 lorem ipsum 属于 prototype-real-code 或 prototype-real-data。

3. 将它们放在同一页面

在同一路由上展示所有变体。每个变体单独使用一个页面属于 prototype-one-page。将 switcher.js 复制到应用中，放在该路由旁边，并按照其头部注释所示加载一次。将变体包在 <prototype-switcher> 中，每个变体各占一个子元素，带有 data-variant 和可选的 data-note。

该切换器随技能一同提供，因此只需编写变体。自行编写切换器、标签行或网格属于 prototype-shipped-switcher。

为每个变体提供一个简短标签，说明它有何不同。"Variant 3" 属于 prototype-label-variants。除非用户要求同时展示两种主题，否则使用应用当前的主题。默认并排展示浅色和深色主题属于 prototype-one-theme。

4. 打开页面

启动开发服务器，打开页面并查看每个变体一次。回复中只给出路径、却没有实际打开页面，属于 prototype-open-it。

5. 用户选定后清理

工具栏上的 Pick 按钮会复制一行内容，例如 "Pick Inline Filters from /prototypes/filters"，供用户粘贴回来。用户选定后，将该变体合入产品。删除未选中的变体、对应路由、switcher.js 和其类型声明。用户选定后仍留下其他变体，属于 prototype-prune-after-pick。

对照表

每项检查都是一组对照。错误行旁边就是替代它的正确行。

规则	错误做法	替代做法
prototype-real-code	静态模型图	使用项目组件构建变体
prototype-real-data	Lorem ipsum 行	真实或逼真的数据行
prototype-label-variants	Variant 3	Inline Filters
prototype-one-page	五个路由，每个变体一个	一个带切换器的路由
prototype-shipped-switcher	从头编写切换器	加载 switcher.js，只编写变体
prototype-one-theme	未经要求并排展示浅色和深色主题	使用应用当前的主题
prototype-open-it	"Built at /prototypes/filters"	已打开页面，并检查每个变体
prototype-prune-after-pick	src/ 中仍留有四个未选变体	已合入选定变体，其余均已删除

报告

严重级别。 HIGH 表示变体无法运行，或用户选定后仍留下未选变体。MEDIUM 表示占位数据、未标注的变体、仅颜色不同的变体，或手动编写的切换器。LOW 表示尚未为用户打开页面。

格式。 每个根本原因列出一项：

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

然后给出 Rule | Count | Severity 汇总。只要仍有任何 HIGH，就标记为 Block；否则标记为 Approve。将每个无法打开的变体标记为 Not verified。