用途：让 AI 生成的前端界面摆脱“默认感”，通过先定义设计系统再写 UI，产出有明确层级、克制用色和真实状态的界面。
主要能力：输出单文件 HTML/CSS 或框架组件；先给出 token 块（CSS 自定义属性或主题对象），包含字号阶梯、间距阶梯、颜色角色、圆角与阴影层级；设计并实现 hover、focus-visible、active、disabled、empty、loading、error 等状态；附 5-8 行设计决策说明。
必要输入：若未提供，需询问要构建什么及其情绪基调（专业工具、平静消费级、活泼等）、品牌约束（颜色、字体、需匹配的现有产品）、框架目标（vanilla/React/Vue/Tailwind，默认单文件 vanilla 演示）。
系统要点：字号选一个基准与比例，最多 5-6 级；间距基于 4 或 8px 单一阶梯；颜色按角色定义，仅一个强调色，正文对比度至少 4.5:1；阴影 2-3 级、圆角 2 个值；动效 120-200ms ease-out 并尊重 prefers-reduced-motion。
适用场景：落地页、仪表盘、新应用视觉系统、现有 UI 重设计。
限制：资料未提供具体安装命令、收费、平台支持或效果保证；需用户提供构建目标与框架等信息，否则技能会自行选择配色并说明。