用途:作为一个设计系统规范编写技能,为 Sketch 风格的界面提供可直接用于实现的指导,供工程师与设计师共用。
主要能力:涵盖品牌定位、样式基础、无障碍、文案语气与输出结构。风格基础包括:视觉风格为现代、干净、高对比;排版比例 12/14/16/20/24/32,主字体与展示字体为 Delicious Handrawn,等宽为 JetBrains Mono,字重 100 至 900;颜色令牌为 primary=#1DAD97、secondary=#F4EDE0、success=#16A34A、warning=#D97706、danger=#DC2626、surface=#FFFFFF、text=#111827;间距比例 4/8/12/16/24/32。无障碍目标为 WCAG 2.2 AA、键盘优先交互、可见焦点状态。
使用方式:先重述设计意图,再定义令牌与基础约束,然后给出组件级规则(结构、变体、状态、响应式),补充无障碍验收标准与文案规范,列出反模式与既有 UI 的迁移说明,最后给出可在代码评审中执行的 QA 清单。用 must 表示不可协商规则,should 表示建议,每条 do 规则配至少一个 don't 示例。
规则要点:优先使用语义令牌而非原始值,保持视觉层级,明确交互状态;避免低对比文本、不一致的间距节奏和含糊标签。
限制:资料未提供具体组件清单、实现代码、收费、价格、平台与效果数据,也未提供安装命令;组件级细节需按上述结构自行编写。