Impeccable 海报风设计系统

要解决的问题

很多设计系统文档停留在风格描述层面：只写“现代、高级、有品牌感”，但工程师在实现 button、card、form 时仍然不知道间距、状态、焦点、溢出和空状态该怎么处理。@user_fccf428b/impeccable 针对这个问题，把 Impeccable 的海报风格拆成可执行的设计规则，帮助团队在代码评审和组件开发中直接对照检查。

技能如何工作

该技能围绕一条清晰的规范生成流程工作：先复述设计意图，再定义 design tokens，然后落到组件级规则，最后给出可执行的验收标准。核心内容包括：

• 基础规范：明确 12/14/16/20/24/32 字号阶梯、4/8/12/16/24/32 间距节奏，以及 primary=#CC8800、secondary=#C55221、text=#111827 等颜色 token。
• 组件规则：要求描述组件结构、default、hover、focus-visible、active、disabled、loading、error 等状态，并覆盖键盘、指针与触屏交互。
• 无障碍边界：以 WCAG 2.2 AA 为底线，强调可见焦点、键盘优先和低对比度文本的反模式。
• 输出结构：固定生成上下文与目标、tokens 与基础规范、组件规则、无障碍要求、内容语气、反模式和 QA checklist。

它更适合作为设计系统规范草稿器：输入一个组件或页面场景后，可以生成偏落地、偏评审的说明，而不是泛泛的品牌视觉描述。适合需要统一前端实现、补齐组件状态说明，或整理既有 UI 不一致问题的团队。

适用边界

这个技能不替代设计评审，也不自动改写现有组件代码。它的价值取决于输入是否足够具体：如果只是“做一个官网首页”，输出会偏原则化；如果给出组件名、交互目标、已有 token 和异常场景，则能生成更贴近实现的规则。需要注意它偏重规范一致性，遇到美学与无障碍冲突时，会优先要求满足可访问性与可测试性。