$ loading_
为设计到代码流程统一管理组件变体与无障碍组合规范。
复制安装指令，让 AI 自动完成配置 · 推荐新手
"component-contracts" 暂无可直接复制的安装信息，请查看页面文档或源码仓库。
请用 component-contracts 的 Variant Authority 为按钮组件整理一个变体清单，包含 size、variant、state 三类属性，并输出统一结构供设计和开发共用。
输出按钮组件的变体清单结构，便于作为设计到代码的统一依据。
请基于 component-contracts 的 Radix Primitives，为下拉菜单设计一个无障碍组合方案，说明应由哪些基础原语组成。
输出基于 Radix UI 原语的组合建议，帮助实现可访问的组件结构。
请使用 component-contracts 梳理卡片组件的设计到代码约束，分别列出变体定义与可访问性组合要求。
输出一份同时覆盖变体和无障碍要求的组件规范摘要。
设计师和前端开发者在维护设计系统时，可用它统一管理组件变体清单，减少设计稿与代码实现之间的偏差。
当团队基于 Radix UI 组装交互组件时，可借助其中的 Radix Primitives 能力明确无障碍组合方式。
产品、设计和开发协作推进组件交付时，可将它作为设计到代码流程中的统一事实来源，确保规范一致。
它提供两个 MCP 服务器：Variant Authority 用于管理组件变体清单，Radix Primitives 用于基于 Radix UI 的无障碍组合。两者一起服务于设计到代码流程的统一规范。
它最适合需要维护组件规范的设计系统团队，尤其是设计师、前端开发者和产品协作场景。
给定信息没有提供安装步骤、运行环境或密钥要求。具体配置方式见源码仓库。
扫描 React 与 Vue 项目并提取组件元数据，供 AI 编码代理准确调用。
通过 MCP 检索和阅读设计系统组件，快速发现相关组件与设计资源。
同步并索引组件库，帮助 AI 检索、理解并生成设计系统组件代码。
将 Figma 设计映射到真实 React 组件库，帮助 AI 生成可直接落地的前端代码。
让 AI 通过 MCP 访问设计令牌与组件契约，提升一致性并减少上下文消耗。
为 AI 编码助手提供可查询的设计系统规范，辅助准确实现组件与样式。