技能介绍

解决界面设计中的一致性与落地难题

在构建现代 Web 或移动应用界面时，研发团队常面临视觉风格割裂、组件状态定义模糊以及无障碍标准难以真正落地的痛点。Bento（便当盒）风格虽然通过网格布局和不规则区块带来了现代且清爽的视觉体验，但如果没有严格的设计系统约束，很容易演变成间距混乱、对比度不足、标签含糊的“拼凑感”界面，导致开发与设计之间产生巨大的沟通成本。

技能如何工作：从基础到组件的系统化输出

该技能充当设计系统指南的专家作者，直接输出可供工程师与设计师落地的规范文档，遵循严谨的创作工作流。

基础层定义：明确排版阶梯（如 12/14/16/20/24/32）、语义化色彩令牌（如 primary=#FAD4C0）以及 4/8/12/16/24/32 的间距系统，确保全局视觉统一，优先使用语义令牌而非原始值。
组件级约束：详细拆解组件的解剖结构、交互状态（如 default、hover、focus-visible、disabled、loading）以及键盘、指针和触摸的交互行为，避免使用模糊的形容词描述。
无障碍与质量门禁：强制遵循 WCAG 2.2 AA 标准，提供可在实现中测试的验收条件，并在输出末尾附带代码审查可用的 QA 清单与反模式警告。

适用边界与安全注意点

此技能专注于生成设计系统文档，不会自动安装依赖、修改系统权限、创建持久化任务或执行下载内容。当涉及发送、发布、删除、付款、部署或其他外部写入操作时，必须先展示目标与影响并获取用户的明确确认。此外，凭据仅用于指定的官方服务，不回显也不转发；命令和代码默认仅作为参考，需在目标范围清晰且用户明确要求时才可运行。