Open Components

Open Components

Open Components 是完美 UI 组件的标准：无论由人还是 AI Agent 编写，都能打造出拥有完美用户体验、开发者体验和 Agent 体验的 UI 组件指南。

Open Components 是 UXFront 的一部分，由 @alexgrozav 编写并维护。





主页 · 文档 · 更新日志 · llms.txt · 问题跟踪

目录

• 标准
• 阅读标准
• 面向 Agent
• 错误和功能请求
• 贡献
• 创作者
• 版权和许可证

标准

该标准分为三个层面，分别面向组件服务的每类对象。组件满足全部三个层面时，即符合该标准。

• 用户体验（UX）：无论用户使用何种输入方式、设备或能力，组件的行为都符合预期。易于访问、可预测、覆盖各种状态、适应性强。
• 开发者体验（DX）：一套清晰的 API，只需学习一次即可随处使用。了解一个组件，就意味着了解所有组件。一致、类型安全、可组合、可控。
• Agent 体验（AX）：AI Agent 能够读取、推理并使用组件进行构建，使其产出达到与你相同的标准。语义明确、有描述、确定性、可验证。

只需学习一次这些指南，就能让每个组件都达到同样的高标准，无论是你还是你的 Agent 编写组件。

阅读标准

请从简介开始，其中介绍了这三个层面，以及每个层面对组件的要求。这些指南以 Markdown 文件的形式存放在 content/docs/ 中，因此你也可以直接在 GitHub 上阅读。

面向 Agent

如果你的 Agent 支持 MCP，请将其连接到我们的 MCP 服务：https://mcp.opencomponents.dev/mcp，免费且无需登录。它会以工具的形式，分节向 Agent 提供契约、所有规则和文档。MCP Server 页面介绍了如何连接 Claude、Codex、Cursor、VS Code、Gemini CLI、Grok、Hermes Agent 和其他客户端。

或者，安装我们的 Agent 插件，位于 plugins/open-components。它会连接同一个服务，并提供技能，帮助你按照标准要求构建和审查组件。它是一个 Agent Plugin，因此可在 VS Code、GitHub Copilot、Cursor、Codex、Claude Code 以及其他支持该格式的客户端中使用。Agent Plugin 页面介绍了如何安装。

文档的每个页面也都以 Markdown 格式发布，方便 Agent 阅读标准并据此检查工作：

• https://opencomponents.dev/raw/<path>.md 包含一个页面，例如介绍页面 /raw/docs/getting-started/introduction.md。
• https://opencomponents.dev/raw/<path>.yaml 包含页面的契约，其中列出了清单中的所有规则，例如 /raw/docs/components/button.yaml。它涵盖了所有要求，长度却只有页面的一小部分。
• /schemas/contract.json 是所有契约所遵循的 JSON Schema，你可以用它验证这些契约以及你自己的契约。每个契约都会在第一行注明该 Schema，因此使用 YAML 语言服务器的编辑器会在你输入时对其进行检查。
• /llms.txt 列出了所有页面和契约。
• /llms-full.txt 将所有内容放在一个文件中。将它提供给你的 Agent，即可通过一个请求让它获取完整标准。

缺陷和功能请求

发现网站缺陷、指南遗漏或新功能点子？请先搜索已有和已关闭的问题。如果你的问题或想法尚未得到处理，请提交新问题。

贡献

请阅读我们的贡献指南。其中介绍了如何在本地运行网站、编辑指南和进行部署。 所有参与项目的人都同意遵守我们的行为准则。

感谢这些了不起的人！

创建者

Alex Grozav

• https://github.com/alexgrozav
• https://uxfront.com

如果你在日常工作中使用 Open Components，并觉得它让生活更轻松，请考虑通过 GitHub Sponsors 赞助我。💖

版权和许可

版权所有 © 2026 UXFront。网站代码依据 MIT License 发布。content/ 中的指南和 plugins/open-components/ 中的 Agent 插件依据 Creative Commons Attribution 4.0 License 发布：你可以分享和改编它们，也可以用于商业用途，但须注明 Open Components。