Winson 色彩规范构建器

要解决的问题

很多色彩文档只是色卡：一堆 #1A3A5C、#C8102E，却没有说明这个颜色用于导航、状态、背景还是交互。设计师和开发各自理解，结果品牌色被滥用、中性层级缺失、暗色模式下功能色不可读、新组件没有映射规则。winson-color-spec-builder 解决的是把颜色从“好看”变成可维护的视觉语法。

工作方式

技能以 Fusion 融合风格 组织输出，强调结构纪律、数据密度与克制装饰。核心流程包括：

• 品牌锚定义：从 Logo、VI 或业务定位提取 1–3 个核心色，标注 HEX、RGB、HSL 与用途；
• 色板与中性色：核心色扩展 3–6 阶，另建 8 阶蓝灰中性色，如 --slate、--mist、--bone；
• 语义 Token：按 Primitive、Semantic、Component 三层定义，避免组件层直接引用原始色值；
• 应用规则：定义背景嵌套、文字对比度、边框优先于阴影，以及 hover、focus 等状态；
• 组件映射与交付：将按钮、卡片、表格、标签等映射到 Token，并可输出 CSS Variables、JSON Token、Figma 变量或 HTML 参考页。

适用边界

它适合 B 端系统、设计系统重构、商业报告与咨询视觉规范，尤其是需要语义清晰和暗色适配的项目。资料强调 零圆角、左对齐、衬线数字 与 边框优先；若产品要求圆角卡片、柔和阴影、强插画或消费级营销风格，需要先调整规范再落地。