用途：该技能用于建立视觉设计系统、组件库和响应式布局，并输出可直接交付开发的规格。流程严格遵循“先设计令牌、再组件、最后页面”的顺序。
主要能力与要求：每个交互元素需具备 default、hover、active、focus-visible、disabled 五种状态；所有颜色搭配须满足 WCAG AA 对比度（普通文本 4.5:1，大文本 3:1）；触控目标至少 44x44px；动效默认尊重 prefers-reduced-motion，默认无动画，仅在用户允许时增强。品牌色不满足对比度时，需为文本用途创建更深或更浅的变体并记录两者。
令牌策略：在设计任何组件前定义完整令牌集，令牌是唯一事实来源。类别包括主色、次要/中性色、语义色（成功、警告、错误、信息）、排版（字族、字号比例）、间距（4px 基础网格）、阴影和动效时长。
组件与响应式：仅用令牌构建基础组件（按钮、输入框、卡片、导航、提示）。组件变体超过三个时考虑拆分。微交互时长低于 300ms，过渡低于 500ms，进入用 ease-out，退出用 ease-in。基础样式面向移动端（320px+），在更宽断点逐步增加布局复杂度，测试 320、640、768、1024、1280px。深色模式通过反转中性色阶的语义含义实现，而非新建令牌名。
工作流：定义令牌并验证对比度、创建明暗主题覆盖；用令牌构建组件并记录五种状态；定义断点与容器宽度、创建网格工具；导出 CSS 自定义属性并交付组件规格与交互状态说明。
脚本：scripts/check_contrast.py 为 WCAG 2.1 对比度检查器，可校验前景/背景色对；scripts/generate_css_tokens.py 从 JSON 配置生成完整 :root CSS 自定义属性块，含明暗主题、系统偏好媒体查询、排版、间距、阴影、动效及 reduced-motion 覆盖。示例命令：python scripts/check_contrast.py --fg "#0F172A" --bg "#FFFFFF"；python scripts/generate_css_tokens.py --config design-config.json。
限制：资料未提供具体收费、平台支持范围或实际效果数据，暂未提供。