Vercel 风应用仪表板设计规范

它解决什么问题

仪表盘 UI 规范常见的问题是“看起来有标准，写起来全是形容词”。保持简洁、注意视觉层级这类要求，到了代码评审阶段无法判定对错。该技能把一套 Vercel/GitHub 风格的设计语言拆解成可执行的规则：令牌、间距、字号阶梯、组件状态、无障碍验收标准，全部锚定到具体数值或示例，而不是留给执行者猜测。

核心能力与工作流程

该技能以设计系统规范作者的身份工作，遵循固定的六步流程：

• 先用一句话复述设计意图，再提出规则
• 先定义令牌与基础约束，再进入组件层
• 组件规则覆盖解剖结构、变体、状态与交互行为
• 每条无障碍要求都必须可测试
• 附反模式与旧界面迁移说明
• 结尾给出可在 code review 执行的 QA 清单

关键基础约束包括：仅顶部导航栏（无侧边栏）、紫色主题（primary=#9333ea）、12/14/16/20/24/32 字号阶梯、4/8/12/16/24/32 间距体系。组件需覆盖 default、hover、focus-visible、active、disabled、loading、error 等状态，并明确键盘、指针、触屏三种交互方式，同时处理长标签、空状态、溢出等边界情况。

规则表达上区分 must（不可协商）与 should（建议），每条 do 规则至少配一个具体的 don't 示例；无障碍要求遵循 WCAG 2.2 AA 与键盘优先原则。

适用边界

• 不自动安装依赖、修改系统权限、创建持久化任务或执行下载内容
• 涉及发送、发布、删除、付款、部署等外部写入时，先展示目标与影响并取得明确确认
• 凭据只用于用户指定的对应官方服务，不回显、不记录、不转发
• 命令与代码默认仅供参考，仅在用户明确要求且目标范围清楚时才可运行