参考转样式

将参考转化为整个网站的样式，展现在视觉面板（board.html）上，并配有可测量的样式指南（style.md）。外观来自参考；内容来自主题。定义样式永远不会改变应用或网站。应用样式会改变，但仅在用户指定使用已保存的样式时（请参阅“应用已保存的样式”）。

在页面任何更改之前，先对齐样式。 样式指南是唯一真实来源：根据它构建所有视觉元素，并将所有修正首先放入其中，这样基于它构建的任何内容都不会偏离您在面板上看到的内容。

测量，而非目测。 视觉善于观察参考的作用，但不擅长精确的颜色、大小和间距。参考显示的每个值都来自 scripts/measure.py（任何其他值都是从这些值派生或选择的，并且会注明），并且每个面板样本都通过 scripts/verify.py 以相同方式渲染和测量，直到匹配为止。面板保持视觉化；数字存放在指南和报告中。

先弱化，再微调。 一份参考是其样式的集中体现，将每个特征扩散到每个元素可能会过度。因此，第一次传递只将每个独特特征用于最能发挥其作用的地方，使用其测量值，然后用户在审阅时调高或调低单个特征。强度的改变影响特征出现的位置，而非其测量值。

何时不使用

用户希望精确匹配他们自己的 Figma 画板。请直接构建该画板。
项目已有一个保存在 design/styles/ 中的样式。请改为应用它（请参阅“应用已保存的样式”）。

先决条件

在第 1 步之前，运行 python3 <this skill>/scripts/doctor.py（在 Windows 上，整个过程中用 py -3 代替 python3）。它会检查每个依赖项，并为每个缺失的依赖项打印确切的安装命令。

退出码 0： 就绪。
退出码 1： Python 包缺失。向用户显示打印的命令并等待；没有它们，无法进行测量。
退出码 2： 浏览器无法运行。提供打印的安装命令。如果用户无法安装，则仅使用图像参考继续进行（要求提供实时网站的截图），使用 --unverified 参数运行 check.py，并在审阅时说明面板的准确性未经证实。
完全没有 Python（找不到 python3，Windows 上也找不到 py -3）：doctor.py 无法运行。告知用户该技能需要 Python 3.9 或更高版本，可从 python.org 或系统包管理器获取，并等待。不要自己安装 Python。

决策

自行做出运行所需的所有决策，并在面板处停止。面板向用户一目了然地展示整个样式，因此他们在此处做出判断，而不是作为事前的一系列问题。

决策，无需询问： 采用和放弃哪些特征、每个特征的起始强度、样式名称和标识符、主题列表、参考一致时的方向，以及如何避开现有样式。在指南中记录每个选择（一个 chosen: 来源或一行“采用/放弃”），以便以后可以更改。
仅在无法继续时提前询问： 参考无法加载或仅为缩略图、依赖项缺失，或者参考指向相反的方向（例如浅色草稿纸和深色蓝图），而参考本身或项目都无法解决这些分歧。此时，提出一个简短的问题，包含选项，您的首选放在前面，仅此而已。
保持停止信号简短。 数字存在于指南和 verify.md 中，因此消息不包含表格或测量值。以以下代码块结束，然后等待：

需要你的意见：有什么需要修改的吗？

面板： <path to board.html> · 准确性： 35 个测量值中 35 个匹配（verify.md） 为你决定： 名称和标识符；已采用和放弃的主要特征；方向（如果有选择） 以弱化开始： 每个弱化特征及其出现的位置，用几句话说明

调高或调低某个特征：说出它的名称，例如“更多网格”或“更少红色”

更改其他内容：说出要更改的内容

无需更改：样式按原样保存

使用它： 样式保存在 design/styles/<slug>/ 中。当您希望使用它时，提及它，例如“全部应用 <slug>”。在此之前，应用或网站不会改变。

如果使用提问工具，也在那里提出，以“需要你的意见”开头。无需批准：每个保存的样式都可供使用，用户稍后通过名称选择一个。

步骤

查看参考，然后测量它们。 打开每个参考：滚动浏览实时网站并观察它们的动态。如果某个参考无法加载或仅为缩略图，请要求提供截图。切勿仅根据标题或 URL 工作。为每个参考保存一张截图到 references/，并记录您看到的任何动态。优先使用 PNG：JPEG 会使细彩色线条变灰。

然后阅读 references/measure.md 并对您可能采用的每个特征（标题、按钮、分隔线、背景色块）裁剪一个区域进行测量，所有裁剪在一次运行中完成。
阅读项目。 在选择样式之前执行此操作，以便方向已经合适：
- 如果存在，请阅读 design/styles/index.md，以便新样式不与先前的样式冲突，并记录哪些标识符已被占用。
- 列出 4–8 个真实的对象、材料、过程、测量值或地点，每个都注明来源。从索引的共享主题列表开始。使用真实的事物，而不是主题的象征物，并排除任何无法追溯来源的内容。
- 查找网站使用的令牌（CSS 自定义属性、框架类或 Webflow 变量）以及在用的每种组件类型，例如标题、按钮、卡片、图形、列表行、导航和表单，并记录每个组件所在的位置。指南会重新设计它们的外观；它们的内容和结构保持不变。

阅读样式。 对于多个参考，阅读它们共享的内容。将每个特征与显示它的裁剪区域联系起来；该证据应放在指南中，而不是聊天中。

采用：样式	放弃：仅属于单个参考的内容
调色板、字体特征、线条和形状、表面、密度、节奏、层级、动态	资源、标志、文案、精确的页面布局、一次性细节

为每个采用的特征赋予一个强度，写在指南的“强度”列中：

强度	特征出现的位置	用于
`quiet`（弱化）	仅出现在 1–3 个最能发挥其作用的地方，并命名这些地方	每个独特特征的起始强度（强调色、展示字体、纹理、图案）
`full`（完整）	出现在每个适合的组件	仅用于每个页面都需要的属性的起始强度：页面背景、文本颜色，以及不设定基调的特征（例如圆角）
`strong`（强烈）	出现在每个适合的组件，并给予更多空间：更大面积、特色用途	仅当用户要求更多时使用

调低一个弱化特征意味着将其移动到“放弃”列。

自行决定样式（请参阅“决策”）：选择特征、选择一个其标识符未被占用的名称（除非用户要求修改该样式），以及一个不与现有样式冲突的方向。除非参考之间存在无法解决的冲突，否则不要在此处停止。

编写指南。 每次运行都有自己的文件夹，因此不会相互覆盖：
```
design/styles/
  index.md              每个样式、其应用范围、共享主题列表
  <slug>/
    style.md            指南
    board.html          视觉检查面板
    measured.json       measure.py 从参考中读取的内容
    verify.md           面板与参考的匹配程度
    references/         参考截图
```
将本技能中的 assets/style.md 复制到 style.md 并填写。保持每个标题的顺序不变，对于空部分填写 None，以便所有指南的阅读方式相同。精确编写值（十六进制、px、字体名称），以便另一个会话无需参考即可重建样式。
- 证据： 每个测量裁剪区域一行，数字从 measure.py 的输出中复制。
- 令牌： 每个令牌都说明其来源：crop:<name>（值在那里测量；颜色必须与该裁剪的读数或其“可能”值匹配），derived: <rule>（从已测量的令牌构建，例如悬停色调或加深至 4.5:1 对比度的文本颜色），或 chosen: <reason>（用于参考未显示的内容，例如状态和正文字体）。尺寸也来自测量：字体大小是大写字母高度（大写字母裁剪区域的墨水高度）÷ 字体的 cap height 比率。每个规则都命名一个真实的主题来源，并且不使用“放弃”列中的任何内容。为每个令牌添加前缀 --<slug>-，以便多个样式可以共享一个页面而不会冲突。
- 组件： 为每个组件类型提供一个属性表（属性，然后是令牌或精确值，针对每个状态），以便无需猜测即可重建。尽可能使用令牌。遵循每个特征的强度：位于弱化特征命名位置之外的组件，改用样式中更朴素的令牌，例如正文字体或墨水颜色。
- 映射： 将第 2 步中的每个现有令牌、类或变量，以及每个组件类型，映射到其新令牌或组件规格。这是应用样式的基础，因此项目中不应有任何未映射的内容：对于没有替换的内容，请写入“保留”或“放弃”并附上理由。
展示样式，然后迭代。 阅读 references/board.md，将 assets/board.html 作为文件副本（不要重新输入）复制，并仅根据指南填写其占位符：每种组件类型及其状态，一个“样式”部分，一个非常小的真实内容部分，以及动态效果，每个都使用 data-crop 标记其来源。然后对照参考进行验证，并对照指南进行检查，自行修复所有失败，最多进行三轮：
```
python3 <this skill>/scripts/verify.py design/styles/<slug>
python3 <this skill>/scripts/check.py design/styles/<slug>
```
在用户的浏览器中打开面板，并提供 board.html 和 verify.md 的路径。

然后将样式和任何新的主题项添加到 design/styles/index.md 中，如果需要，可以从 assets/index.md 创建它。design/styles/ 是该技能在项目中唯一更改的地方。

为审阅停止，使用“决策”中的代码块：有什么需要更改的吗？准确性由 verify.md 显示，以及三轮后仍然失败的内容，因此用户仅判断方向和强度。对于每一轮反馈，更新指南，仅重建面板中受影响的部分，然后运行一次 verify 和 check，并修复它们报告的问题，最多三轮，且不能撤销用户的更改。如果名称或主题列表发生更改，则更新索引，重新打开面板并再次询问。每一轮结束时都经过测量，因此保存的样式始终是准确的，无论用户何时停止。要调高或调低一个特征，请更改其强度（在后面写上 (user feedback)）以及它所影响的组件；值保持测量值，因此不需要 data-accept。如果用户希望特征比参考本身更大胆（更大、更粗、更饱和），则更改值：按以下方式处理。用户要求的更改是有意为之，即使它偏离了参考：给令牌标注 chosen: user feedback，并用相同理由标记其样本为 data-accept，以便 verify 报告其为有意为之而非失败，并且永远不要撤销它以通过 verify 检查。如果用户拒绝的是方向本身而非细节，则不要修补令牌：返回到第 3 步，重新阅读参考，选择新的方向，重建并再次为审阅停止。

运行在用户没有其他更改或转向其他事情时结束。没有批准步骤。稍后要使用样式时，用户提及它，技能将应用它（请参阅“应用已保存的样式”）。

应用已保存的样式

当用户提及要使用已保存的样式时，例如“全部应用 <slug>”或“在定价页面上使用 <slug>”，请阅读 references/rollout.md 并按照其指示操作。它仅基于指南工作：将指南中的令牌添加到项目中，然后逐行处理映射，根据每个组件的属性表重新设计其样式，而不更改其内容或结构。跳过步骤 1–5：样式已定义。

示例

阅读 examples/drafting-sheet/style.md 和 verify.md；JSON 文件和 board.html 是生成的输出，仅当您想查看 data-crop 标签时才值得打开。examples/drafting-sheet/ 是一个完成的运行：一个绘图草稿参考被测量为八个裁剪区域、一个指南和一个面板，其 36 个测量值均匹配（其中一个是有意为之）。

参考：技术图纸和蓝图，用于一个关于生长轮盘的网站。

采用： 精细精确的线条、网格、小号技术标签、密集注释。
放弃： 每个图纸的标题栏、零件和图纸布局。
主题： 一个 5.5 米生长轮盘、真实支架尺寸、工程图纸。
规则： 蓝图尺寸线 + 真实支架尺寸 = 附带测量值的图形注释。

参照转风格