Agent Skills
返回列表
霓虹高对比视觉设计规范

霓虹高对比视觉设计规范

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_fccf428b/neon-design-blueprint。

技能介绍

解决的问题

设计系统在落地阶段常见的痛点：token 命名随意导致跨团队不一致，组件状态定义缺失使交互行为难以测试，无障碍要求停留在口号无法验证，文案语气与视觉语言脱节。这些问题叠加后，界面实现偏离设计意图，回归成本高，协作摩擦大。

技能如何工作

Neon 高对比设计规范技能是一套指南生成框架，把品牌视觉原则转译为工程可直接执行的规则。核心能力包括：

  • 视觉基础定义：14/16/18/24/32/40 字号阶梯，字体栈 Roboto（正文）/ STIX Two Text（展示）/ Source Code Pro（代码），字重覆盖 100 至 900 九级
  • 语义色 token：primary #BBF351、secondary #00BCFF、success #16A34A、warning #D97706、danger #DC2626、surface #FFFFFF、text #111827
  • 间距体系：4 / 8 / 12 / 16 / 24 / 32 像素节奏
  • 组件规则模板：要求每个组件明确解剖结构、变体、状态（default / hover / focus-visible / active / disabled / loading / error）和键盘、指针、触屏交互行为
  • 无障碍门槛：WCAG 2.2 AA 合规，键盘优先交互，可见的焦点状态
  • 质量门禁：规则不得只依赖模糊形容词，必须锚定 token、阈值或具体示例；每条 must 规则配对至少一个 don't 反例；引入新模式时附带迁移指引

输出结构与适用边界

生成的规范按固定结构组织：上下文与目标 → token 与基础约束 → 组件级规则 → 可测试的无障碍验收标准 → 文案与语气规范 → 反模式与禁止实现 → QA 检查清单，可直接用于代码评审。

该技能面向设计系统作者和前端工程师，用于撰写或审计设计系统规范文档。它生成的是规范文本，不是组件代码。

使用场景

  • 团队准备统一全站界面风格，需要一套可执行的高对比视觉规范作为开发基准。
  • 设计系统作者要为按钮、输入框等组件补齐默认、悬停、焦点、禁用等交互状态说明。
  • 前端工程师在代码评审中需要一个可逐项勾选的无障碍验收清单，确保界面满足 WCAG 2.2 AA。
  • 现有界面存在间距混乱、对比度不足的问题，需要一份反模式清单指导逐项整改。

适合人员

  • 设计系统工程师，需要把品牌视觉原则转译成工程师可执行的规范文档和 token 定义。
  • 前端开发工程师，需要在编码前查阅组件状态、间距和颜色 token 的明确约束，减少返工。
  • 无障碍测试工程师，需要一套可逐条验证的 WCAG 2.2 AA 验收标准，用于交付前检查。