用途：该技能面向设计与前端实现中的视觉一致性问题，强调界面与交互应作为一个系统来组织，而不是彼此割裂的零散页面。它可与 design-references（参考画廊 + 基础 token）配合使用，但不替代参考资料的调研工作。
主要能力与规则：
- 间距、尺寸与圆角仅使用 4 的倍数，并遵循 ../design-references/references/tokens.md。
- 颜色和字体只通过 token 使用，层级为 primitive → semantic → component，组件中不得出现散落的 hex 色值。
- 优先使用已有组件而非一次性写法；若新建组件，下次遇到同类需求时应复用该组件。
- 全产品保持相同的排版层级、按钮、卡片及状态（hover/focus/disabled）模式。
- 在站点或落地页上，先执行 design-references 的流程，再考虑自创视觉。
使用方式（工作流）：
- 盘点项目中已有的 token 与组件。
- 若为页面或营销内容，先查找参考资料（design-references）。
- 在写临时 CSS 之前，声明或扩展 token（space、radius、size、颜色）。
- 基于系统复用实现；若某模式重复出现，则抽取为组件。
- 复查一致性：间距、圆角、字体权重与状态。
检查清单：没有脱离 4px 刻度；颜色只通过语义 token 使用；重复组件而非不同 CSS 的克隆；适用时已查阅参考资料。
适用场景：设计系统建设与维护、统一产品 UI 风格、前端组件规范化、站点与落地页视觉落地前的一致性约束。
限制：提供的资料未说明具体安装方式、支持平台、收费情况或自动化校验能力，暂未提供。