技能介绍

要解决的问题

沉浸式展陈式交互界面最容易在交付时失控：品牌色画布、白色卡片、硬投影、倾斜按钮这些观感很统一，但落到代码里会变成随手写的 #00592B、不一致的 4/8/16/24/32 间距、只有 hover 没有 focus 的按钮，以及长文案溢出后无人定义的边界。结果是界面看起来像一个作品集，组件却没法被工程师稳定复用、审查和迁移。

技能如何工作

它把风格指南当作可执行约束来写：

先用一句话复述设计意图，再进入规则，避免只堆形容词。
先定义 design tokens：主色 #00592B、辅助蓝 #0023D1、成功/警告/危险色、白底 #FFFFFF、文本 #111827；字体 Oswald + JetBrains Mono；字号 12/14/16/20/24/32；间距 4/8/12/16/24/32。
再写组件规则：anatomy、variants、default / hover / focus-visible / active / disabled / loading / error 状态，以及键盘、指针、触屏行为。
对长标签、空状态、溢出等边界给出响应式处理；对现有不一致 UI 提供 anti-pattern 和 migration notes。
每条无障碍要求都写成可验收条件，如 WCAG 2.2 AA、键盘优先、可见 focus；审美与可访问性冲突时优先可访问性。
最后输出 code review 可用的 QA checklist。

适用边界与注意点

它是设计系统规范撰写技能，不是运行时组件库或自动化改码工具。安全边界包括：不自动安装依赖、修改系统权限、创建持久化任务或执行下载内容；涉及发送、发布、删除、付款、部署等外部写入时，先展示目标与影响并取得明确确认；凭据只用于用户指定的对应官方服务，不回显、不记录、不转发；命令和代码默认作为参考，只有用户明确要求且目标范围清楚时才可运行。