Open Components

产品简介

Open Components 是由 UX Front 团队发布的 UI 组件设计标准，致力于为人类开发者与 AI 编程智能体提供同一套 UI 组件实现规范。它从用户使用体验、开发者编写体验、AI 智能体识别体验三个维度定义组件，让 Claude Code、Cursor、Codex、GitHub Copilot 等 AI 编程助手能够像资深前端工程师一样输出符合规范、可访问性达标、跨组件行为一致的 UI 代码。

核心功能

• 三维体验规范：从 UX（用户体验）、DX（开发者体验）、AX（智能体体验）三个层次统一组件定义，覆盖从设计到交付的全流程。
• 可访问性兜底：组件遵循 WAI-ARIA 规范，支持键盘、指针、触屏、屏幕阅读器，并尊重 prefers-reduced-motion、对比度、配色方案与字号偏好。
• 完整状态机：每个组件均覆盖 Hover、Focus、Active、Disabled、Loading、Error 等状态，跨组件行为严格一致。
• TypeScript 类型完备：所有属性、事件、插槽均有完整类型与文档，「学会一个，就会一类」。
• 可组合架构：小组件可拼装为复杂组件，无隐藏耦合，受控与非受控两种模式均原生支持。
• 机器可读契约：组件的解剖结构、属性、状态以机器可读格式发布，AI 智能体可直接读取与推理。
• 确定性输出：相同输入始终渲染相同 DOM 结构，便于 AI 智能体做规则校验。
• 可校验规则集：内置智能体可对照检查的规则清单，每条规则有唯一 ID，生成代码上线前即可自我验证。

特色优势

Open Components 与传统 UI 组件库最大的不同在于「AI 智能体原生」：规范本身既是文档也是契约。AI 智能体通过 MCP 服务器按需读取组件契约，仅加载任务所需的章节与规则，避免了把单页约 35,000 tokens 内容一次性塞进上下文的浪费。规范中每条规则都有 ID，AI 评审代码时可按 ID 报告问题，开发者一眼定位整改项。配套的 Agent Plugin 把 MCP 服务器与 Skills 整合，Claude Code、Cursor、Codex、Copilot 等客户端可在构建或评审组件时自动调用规范，无需手动触发。

应用场景

• AI 编程助手 UI 生成：Claude Code、Cursor、GitHub Copilot 等工具通过 MCP 接入规范，按需生成符合标准的 React / Vue / Svelte 组件代码。
• 前端代码评审：AI 评审插件读取组件契约，逐条核对提交中的 UI 实现，给出按规则 ID 分类的整改清单。
• 设计 Token 迁移：智能体自动把项目中的硬编码 CSS 变量替换为规范的 token 路径，统一视觉系统。
• 企业内部 UI 落地：中大型组织将 Open Components 作为内部 UI 规范基线，保证数百名前端与数十个 AI 助手的输出口径一致。
• 跨框架一致性：同一套规范可指导 React、Vue、Svelte、SwiftUI 等多个框架实现，确保跨技术栈的视觉与行为一致。

适用人群

• 前端架构师与组件库维护者
• 设计系统负责人与前端工程经理
• 使用 AI 编程助手（Claude Code、Cursor、Copilot 等）的中高级开发者
• 企业级 UI 一致性推进者与技术布道师
• 关注可访问性（WAI-ARIA）的产品与设计团队

出品方

Open Components 由 UX Front 团队出品维护，团队专注于为开发者与 AI 智能体打造高质量 UI 标准。规范的官方网站为 opencomponents.dev，源代码以 MIT 协议开源在 GitHub 平台。

更新动态

• 2026-10-06：上线 Agent Plugin（智能体插件），整合 MCP 服务器与 Skills，让 Claude Code / Cursor / Codex / Copilot 等客户端可在构建或评审组件时自动调用规范。
• 2026-10-05：发布 Input 组件指南，覆盖标签持久化、错误消息可读性、aria-invalid 状态、自动完成取值、禁用粘贴阻断等表单细节。
• 2026-10-05：发布 Spinner 组件指南，规范加载状态的可访问性、降级动效与按钮联动规则。
• 2026-10-04：上线 MCP 服务器（mcp.opencomponents.dev/mcp），让 AI 智能体按需读取组件契约，避免上下文浪费。

官网链接

• 官网：https://opencomponents.dev/
• 文档：https://opencomponents.dev/docs
• 更新日志：https://opencomponents.dev/changelog
• GitHub 仓库：https://github.com/uxfront/open-components
• MCP 服务器：https://mcp.opencomponents.dev/mcp