本技能是一套UI视觉设计系统框架，用于指导界面的字体、色彩、间距、网格、层级、高度和图标等视觉决策。
用途：帮助建立清晰、一致、可访问的视觉语言，让视觉规则系统化地传达层级与含义。核心原则包括：层级即沟通、一致性建立信任、留白是分组与强调的关键工具、克制优于装饰、无障碍不可妥协。
主要能力：字体排印方面，提供基于比例（如1.200至1.414）的模块化字号阶梯示例，规定字号、行高、行长、段落间距与字间距准则，建议最多两种字体、正文不小于16px、正文行高1.4-1.6等。色彩方面，定义语义色类别（主色、辅助色、中性色及成功/警告/错误/信息），建议生成50-900的10级色阶并用OKLCH或CIELAB保证感知均匀，给出WCAG 2.2对比度要求（正文4.5:1、大字3:1、UI组件3:1）及不依赖颜色的规则，并说明深色模式设计要点（避免纯黑、降低饱和度、用表面提亮表达高度）。间距方面，推荐base-4或base-8尺度并给出组件内边距、相关元素间距、区块间距、页面边距的应用规则。布局网格方面，推荐12列网格、16-24px槽宽、1200-1440px最大内容宽度及CSS Grid/Flexbox。视觉层级方面，列出尺寸、对比、位置、字重、留白、动效的影响顺序及“唯一焦点”“眯眼测试”“灰度测试”等方法。高度方面，给出0-4级阴影层级示例及深色模式替代方案。图标方面，规定统一风格、最小触达目标44x44pt、标准尺寸与描边宽度等。
使用方式：作为设计规范与检查清单参考；涉及字体与色彩的深入内容可阅读references/typography-color-mastery.md；设计令牌实现参考design-systems-architecture；无障碍参考accessibility-inclusive-design；动效参考interaction-motion-design；移动端视觉参考mobile-ux-design。v3.0补充了生产级CSS实现（容器查询、:has()、锚点定位、视图过渡、OKLCH、@layer）、Figma工作流与多品牌主题架构等交叉引用。
适用场景：Web或桌面应用界面设计、设计系统建设、设计评审与无障碍检查。
限制：资料未提供安装命令、收费或价格信息，也未给出可直接运行的完整代码示例；具体实施需结合项目情况。