ui-ux-pro-max-skill 设计系统组件状态与变体实战指南交互状态、变体模式与无障碍规范全解析【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill组件状态State与变体Variant是设计系统中可交互组件的行为契约状态描述组件在用户交互悬停、聚焦、按下、禁用、加载、出错下的视觉反馈变体则定义同一组件在不同语境下的形态颜色、尺寸。本文以 ui-ux-pro-max-skill 仓库中 design-system skill 的 states-and-variants.md 文档为核心骨架结合 token-architecture.md、semantic-tokens.md、component-tokens.md 与 component-specs.md 等配套规范完整讲解六类交互状态的定义、优先级与过渡规则focus / disabled / loading / error 四类关键状态的视觉与语义处理以及颜色、尺寸两类变体的 token 化实现模式并给出可对照实现的 ARIA 与 WCAG 无障碍要求。读完本文你将能基于 CSS 变量构建一套状态语义完整、变体可扩展、满足无障碍标准的组件样式系统。交互状态状态定义、优先级与过渡状态定义任何可交互组件都至少经历以下六种状态之一。states-and-variants.md 给出了每种状态的触发条件与期望的视觉变化StateTriggerVisual ChangedefaultNoneBase appearancehoverMouse overSlight color shiftfocusTab/clickFocus ringactiveMouse downDarkest colordisableddisabled attrReduced opacityloadingAsync actionSpinner opacity从语义 token 层可以还原这些视觉变化的实现细节hover 的slight color shift对应语义层定义的--color-primary-hover如--color-blue-700、--color-secondary-hover--color-gray-200active 的darkest color对应--color-primary-active--color-blue-800。也就是说状态的视觉差异不应靠临时调色板而应固化成语义 token详见 semantic-tokens.md。状态优先级当多个状态同时作用于同一元素时例如鼠标悬停在已被禁用的按钮上必须有一个确定的优先级裁决。文档规定从高到低为disabledloadingactivefocushoverdefault这条优先级链背后的工程原因disabled 与 loading 都属于阻断型状态——组件不再响应指针事件因此必须压过 hover/active/focus 等交互型状态而 focus 需要压过 hover是因为键盘导航用户必须能始终看到焦点位置即使鼠标恰好停留在元素上。状态过渡状态切换不能生硬跳变。文档给出了交互元素的标准过渡模板/* Standard transition for interactive elements */ .interactive { transition-property: color, background-color, border-color, box-shadow; transition-duration: var(--duration-fast); transition-timing-function: ease-in-out; }其中--duration-fast来自 primitive 层的时间刻度在 primitive-tokens.md 中定义--duration-150: 150ms、--duration-200: 200ms、--duration-300: 300ms并进一步给出语义别名--duration-fast: var(--duration-150)、--duration-normal: var(--duration-200)、--duration-slow: var(--duration-300)。各属性的过渡节奏如下TransitionDurationEasingColor changes150msease-in-outBackground150msease-in-outTransform200msease-outOpacity150mseaseShadow200msease-out一个实用原则颜色类属性color、background-color、border-color用 150ms ease-in-out保证进来和出去的节奏一致位移/缩放类transform与阴影用 200ms ease-out让运动结束得更松弛避免顿挫感。Focus 状态焦点环规范与 focus-within焦点环Focus Ring规格键盘用户依赖可见焦点。文档采用:focus-visible而不是裸:focus确保只有键盘/辅助技术触发的焦点才显示焦点环鼠标点击不产生多余轮廓/* Standard focus ring */ .focusable:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-offset) var(--color-background), 0 0 0 calc(var(--ring-offset) var(--ring-width)) var(--ring-color); }双层 box-shadow 是关键技巧内层var(--ring-offset)宽的--color-background负责在焦点环与元素之间留出呼吸间隔外层calc(var(--ring-offset) var(--ring-width))宽的--ring-color才是实际可见的焦点环。对应参数PropertyValueRing width2pxRing offset2pxRing colorprimary (blue-500)Offset colorbackground这些值在语义层被固化为 semantic-tokens.md 中的--ring-width: 2px、--ring-offset: 2px、--ring-color: var(--color-ring)而--color-ring又指向 primitive 层的--color-blue-500#3B82F6。这样当你需要全局调整焦点环时只需改一处 token。容器焦点:focus-within当焦点落在容器内部的子元素如下拉框里的 input时父容器也应给出视觉反馈/* Container focus when child is focused */ .container:focus-within { border-color: var(--color-ring); }:focus-within与 focus ring 规范配合可以完整覆盖输入框组、下拉选择、搜索框这类复合组件的键盘可达性。Disabled 状态视觉处理与语义化视觉处理文档给出的禁用样式模板.disabled { opacity: var(--opacity-disabled); /* 0.5 */ pointer-events: none; cursor: not-allowed; }PropertyDisabled ValueOpacity50%Pointer eventsnoneCursornot-allowedBackgroundmutedColormuted-foreground注意cursor: not-allowed与pointer-events: none看似矛盾——实际上 cursor 声明面向仍可悬停的场景而pointer-events: none用于彻底阻断点击事件两者可按需取舍。背景与文字分别降级到语义层的--color-muted--color-gray-100与--color-muted-foreground--color-gray-500配合 50% 透明度--opacity-disabled: 0.5形成清晰的不可用观感。在 component-tokens.md 中输入框的禁用态被完整 token 化为--input-disabled-bg: var(--color-muted)、--input-disabled-fg: var(--color-muted-foreground)。可访问性表单元素button、input、select 等使用原生disabled属性让浏览器与辅助技术自动处理非表单元素如不可用的菜单项、卡片使用aria-disabledtrue表达语义禁用同时自己实现pointer-events: none与样式降级禁用态文字与背景的对比度最低保持 3:1确保文本仍然可读。Loading 状态加载指示与占位Spinner 摆放位置不同组件的加载指示器位置有约定ComponentSpinner PositionButtonReplace icon or centerInputTrailing positionCardCenter overlayPageCenter of viewport原则是就近展示按钮里的加载反馈应替换原有图标或居中显示输入框放在尾部右侧位置避免遮挡已输入内容卡片与整页使用居中遮罩提示用户此处正在等待数据。加载处理模板.loading { position: relative; pointer-events: none; } .loading::after { content: ; /* spinner styles */ } .loading * { opacity: 0.7; }关键点pointer-events: none防止加载期间重复提交或误点击子元素统一降为 0.7 透明度让 spinner通过::after伪元素叠加在组件上成为视觉焦点。结合 component-specs.md 中按钮状态表可见loading 态按钮保持背景 token 不变、透明度降至 0.7、光标为wait与这里的模板完全一致。Error 状态视觉指示与错误消息视觉指示器.error { border-color: var(--color-error); color: var(--color-error); } .error:focus-visible { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-error); }error 态的焦点环同样采用background 间隔 error 色外环的双层结构保证出错输入框在聚焦时依然可见。文档对各元素的错误处理约定ElementError TreatmentInput borderred-500Input focus ringred/20%Helper textred-600Iconred-500在 token 层面对应 semantic-tokens.md 的--color-error: var(--color-red-600)与 component-tokens.md 的--input-error-border、--input-error-fg。错误消息规范错误消息显示在输入框下方Position below input使用 error 语义色搭配错误图标让不依赖颜色的用户色觉障碍者也能识别输入合法后立即清除错误提示避免残留报错。变体模式颜色变体与尺寸变体变体Variant是同一组件的不同皮肤。文档推荐用 CSS 自定义属性--component-*做中间层把变体差异收敛到 token 上而非在每个变体里重写所有声明。颜色变体/* Pattern for color variants */ .component { --component-bg: var(--color-primary); --component-fg: var(--color-primary-foreground); background: var(--component-bg); color: var(--component-fg); } .component.secondary { --component-bg: var(--color-secondary); --component-fg: var(--color-secondary-foreground); } .component.destructive { --component-bg: var(--color-destructive); --component-fg: var(--color-destructive-foreground); }这种模式的收益每个变体类只需覆盖--component-bg/--component-fg两个变量背景、文字的实际使用处background:/color:无需重复书写。这也正是三层 token 架构primitive → semantic → component在变体上的落地——token-architecture.md 中组件层的--button-bg: var(--color-primary)与本模式完全同构。尺寸变体/* Pattern for size variants */ .component { --component-height: 40px; --component-padding: var(--space-4); --component-font: var(--font-size-sm); } .component.sm { --component-height: 32px; --component-padding: var(--space-3); --component-font: var(--font-size-xs); } .component.lg { --component-height: 48px; --component-padding: var(--space-6); --component-font: var(--font-size-base); }高度、内边距、字号分别引用 spacing 与 typography 刻度--space-3/--space-4/--space-6、--font-size-xs/--font-size-sm/--font-size-base保证尺寸变体不会产生离群值。对照 component-specs.md 的按钮规格表sm 32px / default 40px / lg 48px与 badge 规格表可以看到这一模式的真实参数来源。无障碍要求对比度、状态指示与 ARIA颜色对比度ElementMinimum RatioNormal text4.5:1Large text (18px)3:1UI components3:1Focus indicator3:1普通文本要求 4.5:1大字号文本18px 及以上或 14px 加粗、UI 组件图形与焦点指示器放宽到 3:1。状态指示原则永不只依赖颜色传达状态Never rely on color alone用图标、文字或纹理作为颜色之外的冗余通道确保焦点始终可见为加载过程提供可访问的播报如aria-busy。ARIA 状态示例!-- Disabled -- button disabled aria-disabledtrueSubmit/button !-- Loading -- button aria-busytrue aria-describedbyloading-text span idloading-text classsr-onlyLoading.../span /button !-- Error -- input aria-invalidtrue aria-describedbyerror-msg span iderror-msg rolealertError message/span三个要点aria-busy让辅助技术知道组件正在加载sr-only的屏幕阅读器专用文本承载加载说明aria-invalid配合rolealert的错误消息让表单校验结果即时播报。在 ui-ux-pro-max-skill 中的工程化落地这套状态与变体规范不是纸面设计而是设计系统 skill 的核心组成部分。design-system skill 的 SKILL.md 将其定位为组件状态定义的权威参考并配套了可执行的工程工具生成 tokennode scripts/generate-tokens.cjs --config tokens.json -o tokens.css从 JSON token 配置生成 CSS 变量primitive → semantic → component 三层结构校验 token 使用node scripts/validate-tokens.cjs --dir src/扫描源码中的硬编码十六进制颜色与像素值提示替换为设计 tokenvalidate-tokens.cjs 默认忽略node_modules、.git、dist、build、.next支持--fix显示替换建议内联嵌入node scripts/embed-tokens.cjs将assets/design-tokens.css提取为可内联到独立 HTML 的 CSS支持--minimal只输出常用 token、--style包裹style标签适用于幻灯片等独立交付物。这也是 ui-styling skill 的衔接点design-system 产出的组件 token 可进一步转换为 Tailwind 主题配置--button-bg→bg-button之类实现设计 token → 组件样式 → 框架主题的完整链路。最佳实践清单状态差异必须走 tokenhover/active/focus/disabled 的颜色、透明度、过渡时长全部使用语义 token--color-*-hover、--ring-*、--opacity-disabled、--duration-*禁止在组件里写死#2563EB之类的原始值焦点环优先用:focus-visible只有键盘与辅助技术触发时显示避免鼠标点击产生视觉噪音变体用自定义属性收敛差异每个变体类只覆盖--component-*变量核心声明只写一次阻断型状态压过交互型状态disabled、loading 优先级最高且必须配合pointer-events: none防止误操作状态信息多渠道传达颜色之外必须有图标/文字/ARIA 属性兜底满足 3:1 与 4.5:1 对比度底线用校验脚本守住规范在 CI 或提交前运行validate-tokens.cjs让硬编码值无法溜进代码库。参考文档states-and-variants.md状态定义、优先级、过渡、四类关键状态与变体模式、无障碍要求本文核心依据token-architecture.mdprimitive → semantic → component 三层 token 架构primitive-tokens.md颜色、间距、字号、时长、圆角等原始刻度semantic-tokens.md--ring-*、--opacity-disabled、--transition-*等交互状态语义 tokencomponent-tokens.md按钮/输入/卡片/徽章/弹窗/表格的组件级 tokencomponent-specs.md按钮、输入、卡片等组件的变体、尺寸与状态规格表SKILL.mddesign-system skill 的能力说明与脚本入口validate-tokens.cjs硬编码值校验脚本embed-tokens.cjstoken CSS 内联嵌入脚本【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ui-ux-pro-max-skill 设计系统组件状态与变体实战指南：交互状态、变体模式与无障碍规范全解析
ui-ux-pro-max-skill 设计系统组件状态与变体实战指南交互状态、变体模式与无障碍规范全解析【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill组件状态State与变体Variant是设计系统中可交互组件的行为契约状态描述组件在用户交互悬停、聚焦、按下、禁用、加载、出错下的视觉反馈变体则定义同一组件在不同语境下的形态颜色、尺寸。本文以 ui-ux-pro-max-skill 仓库中 design-system skill 的 states-and-variants.md 文档为核心骨架结合 token-architecture.md、semantic-tokens.md、component-tokens.md 与 component-specs.md 等配套规范完整讲解六类交互状态的定义、优先级与过渡规则focus / disabled / loading / error 四类关键状态的视觉与语义处理以及颜色、尺寸两类变体的 token 化实现模式并给出可对照实现的 ARIA 与 WCAG 无障碍要求。读完本文你将能基于 CSS 变量构建一套状态语义完整、变体可扩展、满足无障碍标准的组件样式系统。交互状态状态定义、优先级与过渡状态定义任何可交互组件都至少经历以下六种状态之一。states-and-variants.md 给出了每种状态的触发条件与期望的视觉变化StateTriggerVisual ChangedefaultNoneBase appearancehoverMouse overSlight color shiftfocusTab/clickFocus ringactiveMouse downDarkest colordisableddisabled attrReduced opacityloadingAsync actionSpinner opacity从语义 token 层可以还原这些视觉变化的实现细节hover 的slight color shift对应语义层定义的--color-primary-hover如--color-blue-700、--color-secondary-hover--color-gray-200active 的darkest color对应--color-primary-active--color-blue-800。也就是说状态的视觉差异不应靠临时调色板而应固化成语义 token详见 semantic-tokens.md。状态优先级当多个状态同时作用于同一元素时例如鼠标悬停在已被禁用的按钮上必须有一个确定的优先级裁决。文档规定从高到低为disabledloadingactivefocushoverdefault这条优先级链背后的工程原因disabled 与 loading 都属于阻断型状态——组件不再响应指针事件因此必须压过 hover/active/focus 等交互型状态而 focus 需要压过 hover是因为键盘导航用户必须能始终看到焦点位置即使鼠标恰好停留在元素上。状态过渡状态切换不能生硬跳变。文档给出了交互元素的标准过渡模板/* Standard transition for interactive elements */ .interactive { transition-property: color, background-color, border-color, box-shadow; transition-duration: var(--duration-fast); transition-timing-function: ease-in-out; }其中--duration-fast来自 primitive 层的时间刻度在 primitive-tokens.md 中定义--duration-150: 150ms、--duration-200: 200ms、--duration-300: 300ms并进一步给出语义别名--duration-fast: var(--duration-150)、--duration-normal: var(--duration-200)、--duration-slow: var(--duration-300)。各属性的过渡节奏如下TransitionDurationEasingColor changes150msease-in-outBackground150msease-in-outTransform200msease-outOpacity150mseaseShadow200msease-out一个实用原则颜色类属性color、background-color、border-color用 150ms ease-in-out保证进来和出去的节奏一致位移/缩放类transform与阴影用 200ms ease-out让运动结束得更松弛避免顿挫感。Focus 状态焦点环规范与 focus-within焦点环Focus Ring规格键盘用户依赖可见焦点。文档采用:focus-visible而不是裸:focus确保只有键盘/辅助技术触发的焦点才显示焦点环鼠标点击不产生多余轮廓/* Standard focus ring */ .focusable:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-offset) var(--color-background), 0 0 0 calc(var(--ring-offset) var(--ring-width)) var(--ring-color); }双层 box-shadow 是关键技巧内层var(--ring-offset)宽的--color-background负责在焦点环与元素之间留出呼吸间隔外层calc(var(--ring-offset) var(--ring-width))宽的--ring-color才是实际可见的焦点环。对应参数PropertyValueRing width2pxRing offset2pxRing colorprimary (blue-500)Offset colorbackground这些值在语义层被固化为 semantic-tokens.md 中的--ring-width: 2px、--ring-offset: 2px、--ring-color: var(--color-ring)而--color-ring又指向 primitive 层的--color-blue-500#3B82F6。这样当你需要全局调整焦点环时只需改一处 token。容器焦点:focus-within当焦点落在容器内部的子元素如下拉框里的 input时父容器也应给出视觉反馈/* Container focus when child is focused */ .container:focus-within { border-color: var(--color-ring); }:focus-within与 focus ring 规范配合可以完整覆盖输入框组、下拉选择、搜索框这类复合组件的键盘可达性。Disabled 状态视觉处理与语义化视觉处理文档给出的禁用样式模板.disabled { opacity: var(--opacity-disabled); /* 0.5 */ pointer-events: none; cursor: not-allowed; }PropertyDisabled ValueOpacity50%Pointer eventsnoneCursornot-allowedBackgroundmutedColormuted-foreground注意cursor: not-allowed与pointer-events: none看似矛盾——实际上 cursor 声明面向仍可悬停的场景而pointer-events: none用于彻底阻断点击事件两者可按需取舍。背景与文字分别降级到语义层的--color-muted--color-gray-100与--color-muted-foreground--color-gray-500配合 50% 透明度--opacity-disabled: 0.5形成清晰的不可用观感。在 component-tokens.md 中输入框的禁用态被完整 token 化为--input-disabled-bg: var(--color-muted)、--input-disabled-fg: var(--color-muted-foreground)。可访问性表单元素button、input、select 等使用原生disabled属性让浏览器与辅助技术自动处理非表单元素如不可用的菜单项、卡片使用aria-disabledtrue表达语义禁用同时自己实现pointer-events: none与样式降级禁用态文字与背景的对比度最低保持 3:1确保文本仍然可读。Loading 状态加载指示与占位Spinner 摆放位置不同组件的加载指示器位置有约定ComponentSpinner PositionButtonReplace icon or centerInputTrailing positionCardCenter overlayPageCenter of viewport原则是就近展示按钮里的加载反馈应替换原有图标或居中显示输入框放在尾部右侧位置避免遮挡已输入内容卡片与整页使用居中遮罩提示用户此处正在等待数据。加载处理模板.loading { position: relative; pointer-events: none; } .loading::after { content: ; /* spinner styles */ } .loading * { opacity: 0.7; }关键点pointer-events: none防止加载期间重复提交或误点击子元素统一降为 0.7 透明度让 spinner通过::after伪元素叠加在组件上成为视觉焦点。结合 component-specs.md 中按钮状态表可见loading 态按钮保持背景 token 不变、透明度降至 0.7、光标为wait与这里的模板完全一致。Error 状态视觉指示与错误消息视觉指示器.error { border-color: var(--color-error); color: var(--color-error); } .error:focus-visible { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-error); }error 态的焦点环同样采用background 间隔 error 色外环的双层结构保证出错输入框在聚焦时依然可见。文档对各元素的错误处理约定ElementError TreatmentInput borderred-500Input focus ringred/20%Helper textred-600Iconred-500在 token 层面对应 semantic-tokens.md 的--color-error: var(--color-red-600)与 component-tokens.md 的--input-error-border、--input-error-fg。错误消息规范错误消息显示在输入框下方Position below input使用 error 语义色搭配错误图标让不依赖颜色的用户色觉障碍者也能识别输入合法后立即清除错误提示避免残留报错。变体模式颜色变体与尺寸变体变体Variant是同一组件的不同皮肤。文档推荐用 CSS 自定义属性--component-*做中间层把变体差异收敛到 token 上而非在每个变体里重写所有声明。颜色变体/* Pattern for color variants */ .component { --component-bg: var(--color-primary); --component-fg: var(--color-primary-foreground); background: var(--component-bg); color: var(--component-fg); } .component.secondary { --component-bg: var(--color-secondary); --component-fg: var(--color-secondary-foreground); } .component.destructive { --component-bg: var(--color-destructive); --component-fg: var(--color-destructive-foreground); }这种模式的收益每个变体类只需覆盖--component-bg/--component-fg两个变量背景、文字的实际使用处background:/color:无需重复书写。这也正是三层 token 架构primitive → semantic → component在变体上的落地——token-architecture.md 中组件层的--button-bg: var(--color-primary)与本模式完全同构。尺寸变体/* Pattern for size variants */ .component { --component-height: 40px; --component-padding: var(--space-4); --component-font: var(--font-size-sm); } .component.sm { --component-height: 32px; --component-padding: var(--space-3); --component-font: var(--font-size-xs); } .component.lg { --component-height: 48px; --component-padding: var(--space-6); --component-font: var(--font-size-base); }高度、内边距、字号分别引用 spacing 与 typography 刻度--space-3/--space-4/--space-6、--font-size-xs/--font-size-sm/--font-size-base保证尺寸变体不会产生离群值。对照 component-specs.md 的按钮规格表sm 32px / default 40px / lg 48px与 badge 规格表可以看到这一模式的真实参数来源。无障碍要求对比度、状态指示与 ARIA颜色对比度ElementMinimum RatioNormal text4.5:1Large text (18px)3:1UI components3:1Focus indicator3:1普通文本要求 4.5:1大字号文本18px 及以上或 14px 加粗、UI 组件图形与焦点指示器放宽到 3:1。状态指示原则永不只依赖颜色传达状态Never rely on color alone用图标、文字或纹理作为颜色之外的冗余通道确保焦点始终可见为加载过程提供可访问的播报如aria-busy。ARIA 状态示例!-- Disabled -- button disabled aria-disabledtrueSubmit/button !-- Loading -- button aria-busytrue aria-describedbyloading-text span idloading-text classsr-onlyLoading.../span /button !-- Error -- input aria-invalidtrue aria-describedbyerror-msg span iderror-msg rolealertError message/span三个要点aria-busy让辅助技术知道组件正在加载sr-only的屏幕阅读器专用文本承载加载说明aria-invalid配合rolealert的错误消息让表单校验结果即时播报。在 ui-ux-pro-max-skill 中的工程化落地这套状态与变体规范不是纸面设计而是设计系统 skill 的核心组成部分。design-system skill 的 SKILL.md 将其定位为组件状态定义的权威参考并配套了可执行的工程工具生成 tokennode scripts/generate-tokens.cjs --config tokens.json -o tokens.css从 JSON token 配置生成 CSS 变量primitive → semantic → component 三层结构校验 token 使用node scripts/validate-tokens.cjs --dir src/扫描源码中的硬编码十六进制颜色与像素值提示替换为设计 tokenvalidate-tokens.cjs 默认忽略node_modules、.git、dist、build、.next支持--fix显示替换建议内联嵌入node scripts/embed-tokens.cjs将assets/design-tokens.css提取为可内联到独立 HTML 的 CSS支持--minimal只输出常用 token、--style包裹style标签适用于幻灯片等独立交付物。这也是 ui-styling skill 的衔接点design-system 产出的组件 token 可进一步转换为 Tailwind 主题配置--button-bg→bg-button之类实现设计 token → 组件样式 → 框架主题的完整链路。最佳实践清单状态差异必须走 tokenhover/active/focus/disabled 的颜色、透明度、过渡时长全部使用语义 token--color-*-hover、--ring-*、--opacity-disabled、--duration-*禁止在组件里写死#2563EB之类的原始值焦点环优先用:focus-visible只有键盘与辅助技术触发时显示避免鼠标点击产生视觉噪音变体用自定义属性收敛差异每个变体类只覆盖--component-*变量核心声明只写一次阻断型状态压过交互型状态disabled、loading 优先级最高且必须配合pointer-events: none防止误操作状态信息多渠道传达颜色之外必须有图标/文字/ARIA 属性兜底满足 3:1 与 4.5:1 对比度底线用校验脚本守住规范在 CI 或提交前运行validate-tokens.cjs让硬编码值无法溜进代码库。参考文档states-and-variants.md状态定义、优先级、过渡、四类关键状态与变体模式、无障碍要求本文核心依据token-architecture.mdprimitive → semantic → component 三层 token 架构primitive-tokens.md颜色、间距、字号、时长、圆角等原始刻度semantic-tokens.md--ring-*、--opacity-disabled、--transition-*等交互状态语义 tokencomponent-tokens.md按钮/输入/卡片/徽章/弹窗/表格的组件级 tokencomponent-specs.md按钮、输入、卡片等组件的变体、尺寸与状态规格表SKILL.mddesign-system skill 的能力说明与脚本入口validate-tokens.cjs硬编码值校验脚本embed-tokens.cjstoken CSS 内联嵌入脚本【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考