用途:Refined 是面向设计系统文档编写的技能,帮助工程师和设计师产出一致、可实现、以无障碍为先的界面规范。风格定位为现代极简,主张优雅衬线排版与克制的配色。
主要能力:
- 基础规范:排版层级 12/14/16/20/24/32,主字体与展示字体均为 Playfair Display,等宽字体为 JetBrains Mono,字重涵盖 100 至 900;间距尺度 4/8/12/16/24/32。
- 色彩令牌:primary=#3B82F6、secondary=#8B5CF6、success=#16A34A、warning=#D97706、danger=#DC2626、surface=#FFFFFF、text=#111827;要求优先使用语义令牌而非原始色值。
- 无障碍:遵循 WCAG 2.2 AA,键盘优先交互,焦点状态必须可见。
- 组件规则:需定义 default、hover、focus-visible、active、disabled、loading、error 等状态,说明键盘、指针与触摸交互,明确间距、排版与颜色令牌用法,并覆盖响应式与长标签、空状态、溢出等边界情况。
- 写作语调:简洁、自信、有帮助;标签不得含糊。
使用方式:按固定结构输出指南,依次为背景与目标、设计令牌与基础、组件级规则、无障碍要求与可测试验收标准、内容与语调标准、反模式与禁止实现、QA 清单。先复述设计意图,再定义令牌与基础约束,最后给出组件指南。规则用 must 表示强制、should 表示建议,每条 do 规则配具体 don't 示例;引入新模式需给出迁移指引。
适用场景:构建或统一 Refined 风格的 Web 界面设计系统文档,供代码评审时的 QA 检查使用。
限制:本技能篇幅聚焦指南编写方法,未提供具体产品、价格、平台或效果数据;具体组件实现细节与示例代码暂未提供。