以 skill 自身的术语
该 skill 教授如何运用字体比例、色彩理论、间距系统和图标基础，构建统一且无障碍的视觉系统。它涵盖了以模块化字体比例、8 点网格间距、符合 WCAG 对比度要求的语义化色彩方案以及图标尺寸系统来建立 design token。
该 skill 提供了针对 Tailwind CSS、响应式流体字体排版、基于语义化 token 的深色模式主题，以及无障碍验证的具体实现模式。它通过定义基于比例的比例尺和可复用的 token 系统，来解决间距不统一、对比度不佳和随意使用魔法数字等常见视觉设计问题。
它产出什么
- 以 CSS 自定义属性或 Tailwind 配置形式定义的 design token
- 带尺寸变体的图标组件
工作方式
- 01建立模块化 design token
定义基于比例的字体尺寸（0.75rem 到 3rem）、8 点网格间距（4px 到 64px），以及用于品牌、状态和中性色的语义化色彩 token。
- 02应用响应式字体排版
使用带有 clamp() 的流体字体排版实现视口响应式尺寸，并将最佳阅读宽度控制在最多 65 个字符。
- 03实现无障碍色彩方案
构建符合 WCAG 对比度要求的色彩系统：正文文字 4.5:1，大号文字与 UI 组件 3:1，并进行程序化对比度检查。
- 04创建一致的图标系统
定义从 12px 到 32px 的图标尺寸比例，使用接受 size props 的可复用组件，并保持 flex-shrink-0 行为。
- 05使用语义化 token 设计暗色模式
按用途而非外观命名语义化 token，从而可以通过 data attributes 切换主题，无需改动组件。
- 06保持垂直节奏
对相邻元素应用一致的间距规则，使用既定的比例值，在整个界面中营造视觉和谐。