技能介绍

这个技能解决什么问题

当团队要做一套跟自家控制台风格一致的界面时，最容易出问题的不是"画不出来"，而是"画得不像"：主操作用了两个强调色、按钮高度忽大忽小、阴影一层层叠上来，视觉上就散掉了。Timeplus Console 的约束其实很明确——中性灰承担结构、单一粉色 #D53F8C 承担唯一的主操作、不用阴影只用描边分层。但这些规则散落在产品代码里，靠人翻样式表回忆，成本高且容易走样。

这个技能把这些规则固化成一份可读的 token 规范，让大模型生成 UI 代码时按同一组数值输出，而不是凭印象猜。

它是怎么工作的

核心是一个以 DESIGN.md 为准的两文件结构：

DESIGN.md：规范源头。YAML front matter 里写着精确的色板、字阶、间距、圆角和组件 token，正文解释如何应用。取值必须原样使用，不要自行微调。
references/components.md：实现阶段再读。提供可直接粘贴的 CSS、tailwind.config.js 的颜色与字体扩展、CSS 自定义属性，以及 React 组件。

覆盖的规则包括：

字体：只用 Inter，正文 400、标题和控件 600，最小不低于 12px
颜色：灰阶 gray-100 到 gray-900 撑起界面，pink-500 标记唯一的主操作，red-500 只用于破坏性操作和错误
表面：页面底色 #F7F6F6，内容放在带 1px #DAD9DB 描边的白卡片上
形状：统一 4px 圆角，只有 toggle 用胶囊形；不用阴影，改用描边分隔
间距：基于 4px 的刻度，容器内边距 24px，表单字段间距 16px
控件：按钮 32px 高，输入框 40px 高，焦点态必须是可见的 2px 粉色描边

组件清单覆盖 primary / secondary / destructive 按钮、文本输入、toggle 开关、卡片、表格、链接、分割线和图标，并附带 WCAG AA 对比度、焦点态与触控尺寸的说明。

适用边界

这套 token 只描述"看起来像 Timeplus Console"这一个目标，不是通用设计系统。组件清单止于基础控件，没有覆盖图表或更复杂的布局结构，也没有给出响应式断点约定。修改 DESIGN.md 后可以用格式规范做可选的 lint，也能把 token 导出成 Tailwind 或 W3C DTCG 格式，但导出后仍需自己在项目里验证渲染结果。如果需求里出现第二个强调色，或必须依赖投影做层级，就说明这套规范不适用，应该另起规范，而不是放宽规则。