Swatches 用于在方案尚未确定时，让用户对“看起来怎样”做出选择。它给出少量并列的真实渲染选项，用户的挑选即交付物：一个可继续推进的决定，以及随每轮迭代逐渐清晰的偏好记录。用户指令、项目品牌和设计系统优先于技能本身的说明。
适用与不适用 当用户希望参与外观决定、且选择仍然开放时使用，例如页面或屏幕的整体方向，或已定方向中的某一个变量（字体、颜色、间距、某区块布局）。不适用于用户已经做出的选择、只有一个正确答案的修复，或直接构建整个页面；一旦选定，继续构建由原本负责构建的流程完成。
两种模式 方向模式较粗，是尚无定论时的默认选项：每个选项都是同一个首屏，但各自按不同方向完整构建。变量模式较细，用于方向已定之后：每个选项只改变一个变量，其余内容保持逐字节一致，使差异就是被询问的那一项。
素材准备 每个选项展示相同的真实内容：用户真实的名称、一行文案、操作和一项真实工作。缺少时用一句话询问一次，或从项目中获取，并在回复中列出自己补写的内容。若存在 .swatches/picks.md，需先阅读：此前的选择及理由都是约束，重复用户已否定的方案是浪费。
编写选项 默认三个，最多四个。构建前为每个选项写一行说明：方向模式用一句话描述“[该主题特有的某个细节]如何塑造[布局、字体或交互]”，各选项须来自不同细节；仅在配色上不同、想法相同的算一个选项。其中一个应是稳妥读法，至少一个应是用户不会主动要求的更大胆方案。变量模式需写明变量与取值，取值之间要明显区分。
每个选项是独立文件 .swatches/<round>/a.html、b.html、c.html、d.html。有项目字体和 token 时使用它们，否则链接网络字体（如 Google Fonts 加 display=swap）。选项想法写入 <meta name="swatch" content="..."> 作为标题；每个选项一个文本相同的 h1。每个选项应是完成品而非线框图：真实字号、颜色、间距、悬停与焦点状态。在 git 仓库中把 .swatches/ 加入 .git/info/exclude，避免显示为改动。
截图与检查 运行 node <skill>/scripts/sheet.mjs .swatches/<round>，脚本会在 1440 与 390 像素下截图，生成并排实时框架的 index.html 和同版式的单图 sheet.png，并输出 WARN 行：脚本错误、未加载的网络字体、溢出、标题不一致等。打开 sheet.png 检查；比较公平的前提是每个选项都呈现最佳状态，应修复所有 WARN 和图中损坏而非有意选择的问题后重跑。若无法运行浏览器，需说明选项未经核验。
呈现与询问 在用户浏览器所在机器上用 npx --yes vite .swatches --port 5173 启动本地服务并保持后台运行（日志写入 .swatches/vite.log），端口被占用则用下一个空闲端口，不得停止其他项目的服务。维护 .swatches/index.html 作为枢纽页，顶部实时展示最新一轮完整尺寸，下方列出往轮及其选择，轮次顺序放在一个小模块（如 steps.js）中供其导入。用户始终在 http://localhost:<port>/ 一个标签页查看。远程或云端会话时，将文件写到用户机器并通过宿主提供的远程 shell 或设备会话启动服务；若无法运行，则改为附上 sheet.png。随后每行说明一个选项：字母、想法和取舍，只问一个问题：选哪个或如何组合。用户回答前不推荐；仅在被问及时说明自己的选择。
解读回答 “B”是选择；“B 配 A 的字体”也是选择，应作为下一轮起点，或在没有未决项时直接作为结果。“都不要”或“更接近 B”是信息，若不明确则用一个问题问清问题所在，再开一轮只改这一点。若连续两轮方向模式都被否，应停止生成整体方向，改为在变量模式下从零逐项推进：字体、开头文案、颜色、首屏布局与间距、一个标志性交互、各区块，每轮固定此前所有选择。文案轮应写得像口语而非口号，面向读者而非作者，并有意决定每个标题是否加句号。
记录选择 向 .swatches/picks.md 追加（最新的在最后），内容包括日期、轮次、模式，被决定的事项，各选项想法，所选字母或组合及用户原话理由，其他方案的否定原因，以及已定参数（字体、字号、颜色、间距等）。下一步取决于仍未决定的内容：再开一轮变量，或把已定参数交回构建流程。
回复格式 给出 localhost 链接（或查找位置）、宽度与最终 WARN 数量；每行说明一个选项；提出那一个问题。选择之后，回复即为记录条目与下一步。只报告最后一次编辑之后运行得到的结果。