用途:该技能提供一套设计准则,帮助 UI 设计不显得像 AI 生成,适用于原型、设计文档或 UI 代码等任何设计工作。
主要能力:一是要求沿用项目既有设计系统,禁止自创颜色、字体或间距,需先阅读 .planning/design-config.md、其中列出的主题文件以及代码库中已有组件,使用项目调色板的确切十六进制值、项目字体、圆角与阴影,并引用 CSS 变量或 token 而非硬编码。二是列出需避免的通用 AI 模式,涵盖颜色(如随机紫/紫罗兰渐变、霓虹色、彩虹渐变、无强调色的灰上加灰)、布局(如所有区块居中加最大宽度、文字后巨大渐变光斑、三列同款图标卡片、每段都图文五五开)、排版(如全篇单一字号、缺乏层级与字重对比、长文本居中)、组件(如所有圆角矩形雷同、按钮缺乏主次层级、滥用图标)以及文案(如空泛营销话术,应使用真实功能名与数字并匹配设计个性)。三是按组件推进:先确认设计 token,再做基础组件(按钮、卡片、徽章、输入框),然后组合组件(导航栏、侧边栏、Hero 区、功能卡),再拼成完整页面,最后补充加载、空、错误等状态并做响应式适配。四是使用视觉参考:有参考时研究其布局、色彩、排版与留白,借鉴质量而非照搬;无参考时查看 design-config 中的 Reference Apps,重视留白,强调色占比控制在 10-15%,每区块突出一个重点。五是原型质量标准:必须使用项目主题确切颜色、真实字体、合理间距、真实内容、可见全部状态,并在 375px、768px、1440px 下可用;不得使用占位图或图库链接、默认 Tailwind 颜色、缺失悬停/聚焦状态、任何视口下布局破损或对比度不足的文字。
使用方式:作为设计工作流中的指导规范,在创建原型、审查设计或搭建设计系统时参照执行,并配合 checklists.md 中的自检、评审清单与设计实现不一致排查。
限制:资料未提供具体安装命令、平台支持、收费或价格信息。