该技能用于原型探索之后、编写代码之前，把用户确认的那一个原型变体正式固化为“设计”。它并非用于验证行为（行为问题走 /prototype → /handoff → /to-spec），而是用于确定界面外观，因为 UI 原型的决策本质是一组测量值，仅用文字描述会丢失。整体路径为 /prototype → 本技能 → /to-spec → /to-tickets，再按工单逐条执行 /design-to-code，最后 /pixel-review。
使用前提：原型中某一变体已获双方同意；若用户尚未选定，需停下来询问。若令牌契约缺少原型使用的整个族（如没有排版角色、没有间距层级），需停下请用户以该原型为素材运行 /setup-design-infra（B 阶段）后再继续。
主要步骤：一、删除落选变体、切换器及其 URL 相关代码，只保留被选中的变体，并确保 error、empty、loading 等每个状态都能通过 URL 到达。二、按族（颜色、字号、间距、圆角、时长）列出页面中所有不同的原始值，包括手写样式表继承来的值。三、对每个原始值给出裁定：吸附到最近的现有令牌，或提升为新令牌并按角色命名（如 --text-label 而非 --text-10-5；排版角色为字号、行高、字重、字距的完整元组）；展示吸附/提升表后再继续，提升属于契约变更，需在各主题变体中同步落地。四、创建设计工单（documentation 类型标签、以屏幕命名），写入所确定的全部测量值、吸附/提升表及进入契约的令牌、原型暴露但渲染无法显示的信息（数据事实、溢出情况）。该工单编号为 N，本屏幕的每个构建工单都作为它的子问题，使设计工单成为其构建集合的索引；工单状态即设计状态，过期时打 stale 标签，须先重设基线（截屏已上线屏幕、修正设计）再编辑，并在同一次变更中移除标签。五、把胜出页面放到名为 design/#<N>-<screen> 的分支根目录下的 design.html，从项目设计模板与令牌镜像构建，值通过 var(--token) 或角色类，每个有意义的区域带 data-component="PascalCaseName"，重复形状调用项目套件中的具名渲染函数；design.html 需自包含（内联令牌镜像与套件），因为读者以 file:// 打开时对兄弟文件的 link 或 script src 会静默 404，导致页面未使用令牌而影响 pixel-review 判断。分支号为清理依据，工单关闭后由扫描逻辑据此删除分支。六、把组件名和状态渲染冻结到工单：复制全部 data-component 值，按项目渲染方法为每个状态截一张 PNG 并放入工单 ## States 标题下，并附上对应的提交号。七、报告吸附/提升表、进入契约的令牌、设计工单编号与分支、构建工单需携带的测量值、原型暴露但渲染不显示的内容，以及下一步 /to-tickets 与逐工单的 design-to-code。限制：知识库未提供具体安装命令、价格或平台支持等信息。