技能介绍

要解决什么问题

手绘素描风格看起来随意，实际对一致性要求极高：柔和的青色点缀、奶油色纸面、手写体标题、虚线卡片边框、粗描边偏移阴影，任何一个像素走偏，都会让「手绘感」变成「粗糙感」。更实际的问题是，设计规范常停留在形容词层面——「要自然、要亲和、要像铅笔画」——工程师拿到手无法落地，只能逐像素猜。

技能如何工作

这个技能扮演设计系统规范作者的角色，输出可直接进入代码评审的指导文档：

先锚定设计意图：每条规则前用一句话重述设计目标，避免后续规则互相打架。
Token 先行：定义语义化颜色（primary=#1DAD97、success=#16A34A 等）、12/14/16/20/24/32 字号阶梯、4/8/12/16/24/32 间距栅格，要求使用语义 token 而非原始值。
组件级规则：拆解组件的结构、变体、状态（default / hover / focus-visible / active / disabled / loading / error），明确键盘、指针、触摸的交互行为与响应式边界。
可测试的无障碍验收：对齐 WCAG 2.2 AA，每条无障碍结论都必须能在实现中验证，而不是「尽量友好」。
反模式与迁移：给出禁止实现清单与存量 UI 的迁移说明。

适用边界与注意点

它生成的是规范文档，不是 UI 代码本身。规则措辞上用 must 标记不可协商项、should 标记建议项，评审时可直接引用。当美观与无障碍冲突时，要求优先保证可访问性并显式标注冲突点。它还带一组安全边界：不自动安装依赖、不修改系统权限、不执行下载内容；涉及发送、发布、删除等外部写入时，必须先展示目标与影响并获得明确确认。