Design System

这个技能能帮你做什么

做产品最怕界面风格不统一——这个页面的按钮是圆角，那个页面是直角；这里的文字大小和那边不一样。这个技能就是帮你解决这些视觉一致性问题的。

简单说，它能帮你：

• 生成设计系统 —— 分析现有代码，提炼出一套统一的设计规范
• 视觉审核 —— 检查界面的颜色、字体、间距是否一致
• 发现"设计垃圾" —— 识别那些看起来廉价、缺乏个性的 AI 生成式设计模式
• 保持一致性 —— 确保团队成员在设计时遵循统一的标准

什么时候用

新项目启动时 —— 先建立设计系统，再开始开发，避免各写各的

界面看起来"不对"时 —— 颜色、间距、字体总觉得哪里不协调

审查代码时 —— 检查样式修改是否破坏了整体一致性

改版前 —— 先了解现有的设计状况，再决定怎么改

团队协作时 —— 让设计师和开发者在同一套规范下工作

主要功能

1. 生成设计系统
   • 扫描现有的 CSS、Tailwind、组件库代码
   • 提取颜色、字体、间距、圆角、阴影等设计元素
   • 参考竞争对手的设计，提供灵感建议
   • 输出设计规范文档（包含设计决策的理由）
   • 生成可视化预览页面，直观展示设计系统
2. 视觉审核从十个维度打分（满分 10 分）：
   • 颜色一致性 —— 是否使用了统一的颜色系统，还是各种随机色值
   • 字体层级 —— 标题、正文、注释的层次是否清晰
   • 间距节奏 —— 间距是否遵循规律（如 4px、8px、16px 的倍数）
   • 组件统一 —— 相似的元素是否看起来一样
   • 响应式适配 —— 在不同屏幕尺寸下是否正常显示
   • 深色模式 —— 是否完整支持，还是只改了一半
   • 动画效果 —— 动画是否有意义，还是为了动而动
   • 无障碍性 —— 对比度是否够高，是否支持键盘操作
   • 信息密度 —— 界面是过于拥挤还是恰到好处
   • 细节打磨 —— 悬停效果、过渡动画、加载状态等是否完善
3. AI 设计模式检测识别那些看起来廉价、缺乏个性的设计模式：
   • 所有元素都有渐变色（滥用渐变）
   • 千篇一律的蓝紫渐变（缺乏品牌个性）
   • 为透明而透明的"毛玻璃"效果（没有实际意义）
   • 不该圆角的地方也圆角
   • 滚动时的过度动画
   • 居中文字配渐变的通用"英雄区"
   • 毫无特色的无衬线字体

怎么用

生成设计系统 —— 告诉它"帮我生成一套设计系统"，它会分析你的代码并给出建议

审核现有界面 —— 提供网址或截图，它会从十个维度打分并指出问题

检查代码 —— 审查涉及样式的代码修改，确保不破坏整体一致性

优化界面 —— 界面看起来不专业？它会告诉你具体哪里不对、怎么改

核心原则

做设计时，记住这几条原则：

1. 统一胜过个性 —— 先统一，再谈风格。不一致比不美观更致命
2. 每个设计决策都要有理由 —— 为什么选择这个颜色？为什么用这个间距？
3. 可复用优先 —— 提取设计模式，避免重复造轮子
4. 考虑边界情况 —— 空状态、加载中、错误提示等都要设计
5. 细节决定品质 —— 悬停、过渡、焦点状态等小细节不可忽视

输出成果

使用这个技能后，你会得到：

• 设计规范文档 —— 详细说明每个设计决策的原因
• 设计令牌文件 —— 结构化的颜色、字体、间距等数据，方便开发使用
• 可视化预览 —— 一个独立的 HTML 页面，展示设计系统的实际效果
• 审核报告 —— 十个维度的打分和具体建议
• 问题清单 —— 具体的文件和行号，方便定位修改

适用场景

• 新项目启动时建立设计系统
• 审查现有项目的视觉一致性
• 改版前了解当前设计状况
• 团队协作时统一设计规范
• 检查样式代码修改是否破坏一致性

不适用场景

• 纯艺术创作（如插画、海报设计）
• 后端逻辑开发（不涉及界面的工作）
• 品牌策略咨询（这个技能关注视觉执行，不是品牌定位）
• 用户体验设计（UX 流程、用户调研等）