技能介绍

拟物化设计落地的常见坑

拟物化（Skeumorphism）想要通过模仿真实世界的纹理、材质和立体感，让数字界面更直观、更亲和。但真正写进代码库时，团队往往面临三个问题：设计令牌散落在各个组件里，同一套颜色和间距在不同页面表现不一致；交互状态定义模糊，hover、focus-visible、active 等状态要么缺失要么各写各的；为了视觉新奇牺牲了对比度和键盘可访问性。这个技能就是用来把这些规范一次性梳理清楚。

技能如何生成规范

它不输出空泛的风格建议，而是按固定工作流产出可直接用于代码审查的规范文档：

先锚定设计意图：用一句话复述你要解决的问题，再据此推导规则。
再定义令牌和基础约束：颜色、字体、间距全部以语义令牌形式给出，例如 primary=#FA3C00、surface=#FFFFFF，避免组件里直接写原始值。
然后逐组件展开规则：每个组件都要写明解剖结构、变体、交互状态（default / hover / focus-visible / active / disabled / loading / error），以及键盘、指针、触摸三种输入方式下的行为。
无障碍验收标准必须可测试：所有声明都以 WCAG 2.2 AA 为基线，键盘优先交互、可见焦点状态是硬性要求。
反模式与迁移说明：每个"必须做"的规则都配一个具体的"不要做"示例；引入新模式时附带迁移指导。
收尾给 QA 清单：可直接贴进代码审查，检查令牌使用、状态覆盖、对比度等。

适用边界与注意点

这个技能输出的是规范文档，不是自动改代码的插件。它默认不安装依赖、不修改系统权限、不创建持久化任务、不执行下载内容。生成的令牌和组件规则需要你手动接入自己的设计系统或组件库。如果规范与现有 UI 存在冲突，它优先要求先修正可访问性问题，再考虑视觉一致性。当美学目标和无障碍标准对立时，技能会明确标记冲突，并把无障碍放在前面。