unvibe 是做什么的？
本技能将一个看起来是生成出来的界面转变为看起来是设计出来的界面。它不会发明一种新风格：而是应用一个专业界面共有而生成界面缺失的、由微小、经过测量的细节组成的目录，并将其映射到项目自身的颜色上。它源自对一个生产级 SaaS（references/case-study.md）进行的真实、为期两天的抛光过程；每一个规则之所以存在，是因为破坏它就会被注意到。
映射你的颜色，保留数值。 比例（圆角半径、内边距、尺寸、持续时间、字重）承载着质量。颜色是你唯一需要调整的东西。
开始之前
- 阅读
references/tells.md（什么让 UI 看起来是生成的，以及每个问题的替代方案）。 - 阅读项目的设计令牌和任何设计文档。填写
references/porting.md中的令牌表。 - 询问所有者哪些屏幕最让他们困扰，以及他们喜欢什么。保留他们喜欢的；永远不要移除他们理解的元素（“我喜欢这个，它很容易理解——只是格式弄好点”意味着重新设计样式，而不是砍掉）。
- 注意技术栈：是否使用 React，Tailwind 3/4 还是纯 CSS，是否有现成的组件库，是否使用无头库（React Aria）。
工作流程
阶段 1 · 基础（一次通过，整个应用）
令牌（assets/css/unvibe.css 第 1 节，已映射）、使用品牌色的原生遗留元素、表格数字、减少动画、运动曲线。然后是文字：移除带跟踪的大写标签、表情符号标题、徽章中的 ✓ 字形、感叹号（目录 §0–§1）。快速、可见、零风险。
阶段 2 · 控件（一次通过，整个应用）
具有立体感且每个屏幕一个主要操作的按钮（§2）· 填充字段，每行统一高度（§3）· 真实菜单而非原生选择器（§4；首先审计每个调用点，references/pitfalls.md）· 每个是/否都使用开关，重要的使用开关卡片，可见的选择使用单选卡片，标签（§6）· 分段控件，其滑块可平滑滑动（§5）。
阶段 3 · 在参考基础上重建最常看到的屏幕
挑选人们看到最多的 3-5 个屏幕，并在最接近的专业模板上重建每个屏幕，并进行测量（references/method.md）：分析概览 → KPI 磁贴（§9）；AI 屏幕 → 代理线程（§12）；活动 → 信息流（§11）；设置 → 行（§7）；批量列表 → 数据网格（§10）；长时间运行的任务 → 日志（§13）；日期 → 预设 + 两个月（§15）。
阶段 4 · 扫掠
每个剩余的屏幕都应用相同的细节：一种表头带、一种字段样式、一种菜单、一种徽章样式、作为填充区域的标注、作为有框区块的列表、每个列表页面上相同的筛选器高度（§8, §10, §16）。兄弟屏幕之间的不一致本身就是一个迹象。
阶段 5 · 证明
使用 scripts/capture.mjs 捕获生产环境与分支的前后对比截图，并使用 scripts/compare.mjs 创建并排对比页面。只保留那些一眼就能看出差异的对比对。然后，在推送之前，运行 references/verification.md 中的完整无回归检查。
黄金法则
- 选择 ≠ 操作。 一种平静的颜色标记选中的内容；响亮的品牌色用于每个屏幕上的一个主要操作。
- 悬停 ≠ 选中。 悬停是中性的；选中是浅色调加上一个勾选标记。
- 三个表面：画布、白色用于浮动的元素、较深的 下陷 填充用于字段和磁贴。
- 无带跟踪的大写字母、无表情符号标题、无勾选字形、无彩色左侧条。
- 一行上的每个控件共享相同的高度和填充。
- 每个是/否都是开关；复选框用于列表和同意声明。
- 设置项是一行：左边说明其功能，右边是控件；锁定的行用灰色文字说明原因。
- 数字在填充式磁贴中为 24/34，配有图标标签和一个按含义着色的增量标签（上升的成本显示为红色）。
- 所有地方使用一种表头带，句子大小写，位于 16px 的框架内；选中的行获得一个 3px 的内嵌条。
- AI 答案是线程中的文本，包含已读取的内容和实际经过的时间；永远不要伪造步骤。
- 动画跟随状态变化，永远不是悬停；按下时缩放至 0.985；菜单和模态框出现。
- 永远不要使用猜测的数字，永远不要使用装饰性控件。 如果数据缺失，显示“无法确定”；如果某个字段没有任何作用，就移除它。
- 在同一轮通过中处理兄弟元素。
- 仅展示可见的差异，并证明没有回归。
本技能包含的内容
| 路径 | 用途 |
|---|---|
references/catalogue.md | 每个细节及其精确数值（§0 基础 → §17 从不列表） |
references/tells.md | 生成式 UI 的迹象及其替代方案 |
references/method.md | 参考驱动的重新设计：选择、测量、映射、重建、证明 |
references/pitfalls.md | 抛光带来的问题（模态框中的菜单、重复键、丢失名称、CSS 层、测试） |
references/verification.md | 前后对比以及无回归检查 |
references/porting.md | 令牌映射、Tailwind 3/4、其他框架、重构顺序、深色模式阶段 |
references/case-study.md | 此技能来源的真实抛光过程，附有所有者的原话 |
assets/css/unvibe.css | 可直接嵌入的样式表（纯 CSS，uv- 类，标记定义在 :root 上） |
assets/react/* | Select, NativeSelect（可替代 <select>）, Switch/SwitchCard, SettingsRow, Accordion, NumberField, Segmented（滑动滑块）, RollingNumber, ThinkingIndicator, DateRangePicker, useFlipToFit |
scripts/capture.mjs | 对 [data-shot] 元素进行无头 Chrome 截图，或通过控制台检查的应用屏幕截图 |
scripts/compare.mjs | 并排的前后对比页面 |
demo/index.html | 每种模式的示例，包含前后对比，使用虚构数据 |
使用资源
- CSS：将
assets/css/unvibe.css复制到项目中，将第 1 节映射到项目的令牌，在基础样式之后导入它。直接使用类名，或将其转换为项目自身的类名（保留数值）。 - React：复制你需要的组件；它们依赖于
react-aria-components（以及用于日期范围的@internationalized/date）。它们不携带 Tailwind 类。 - 现有组件库：使用目录中的数值重新设计其部分的样式，而不是替换整个库。
需要交付的内容
- 前后对比页面（仅可见差异）。
- 一份简短的清单，按类别列出变更内容以及受影响的屏幕。
- 无回归报告：审计了哪些内容，在浏览器中测试了哪些交互，控制台状态，测试，构建。清楚地说明哪些内容未被检查。