描述
CodeRocket UI 帮助开发人员构建一个看起来像自己品牌的组件库，而不是从空白画布开始。产品的简短描述转化为一个建议的设计方向（品牌颜色、圆角、密度），用户在应用于系统之前进行审核。
阅读更多
核心工作流程分为三个阶段。首先，描述产品并审核 AI 生成的设计提案，涵盖颜色、排版、间距和密度。其次，通过视觉编辑或提示来细化系统，可以一次性编辑整个库或单独重新设计一个组件。第三，将结果带入真实的代码库：直接下载源代码或通过私有注册表安装。
该库本身涵盖 48 个组件和 26 个界面块（按钮、表单、对话框、组合框、日历、数据表等），基于 Base UI 构建，具有可在导出前尝试的工作行为。组件以可编辑的 React 或 Vue 及 TypeScript 源代码形式提供，导出的代码不依赖于 CodeRocket UI 的运行时：可以在任何地方编辑、托管并独立使用，遵循 MIT 许可证。支持该产品的开源组件库已在 GitHub 上发布。
CodeRocket UI 还连接到编码代理。CLI、私有注册表和 MCP 连接使 Codex、Claude Code 和 Cursor 能够读取项目保存的设计标记和现有组件，因此代理可以找到并重用按钮或卡片，而不是从头生成一个，设置说明在文档中有详细说明。
定价分为两个层级。免费计划包括完整的编辑器、组件目录和可编辑源导出，以及每个账户一次性试用的五次 AI 辅助生成。专业版每个 UTC 日历月增加 100 次 AI 生成，只要付费访问处于激活状态；它是个人安排的；价格和访问期限在付款前达成一致，账户手动激活，不会自动计费。两个层级的 AI 请求共享服务限制，如果 AI 生成暂时不可用，编辑器和导出仍然可以使用。
目前支持 React 和 Vue，使用相同的设计标记和 AI 工作流程；Svelte 和 SolidJS 列为计划中的框架。CodeRocket UI 旨在帮助开发人员和小团队在开始构建界面之前，在代码库中实现一致的设计系统，而不是作为网站构建器或通用应用程序生成器。
- 类别AI 应用生成器
- 定价模式开源
- 部署自托管
- 平台网页版
CodeRocket的核心功能
从简短的产品描述生成的 AI 设计提案（颜色、排版、间距、密度）
基于 Base UI 构建的 48 个 React 和 Vue 组件以及 26 个界面块
用于重新设计整个系统或单个组件的可视编辑器
从现有原语中 AI 组合新组件（表单、卡片、面板）
在 MIT 许可证下导出的可编辑 TypeScript 源代码，无运行时依赖
用于将库安装到真实项目中的 CLI 和私有注册表
MCP 连接，使编码代理（Codex、Claude Code、Cursor）能够读取保存的设计标记和组件
实时组件浏览器，在导出前尝试行为
如何使用 CodeRocket？
描述您的产品：给出简短的方向并审核 AI 提出的颜色、排版和间距
细化系统：通过视觉编辑或提示进行编辑，系统范围内或单个组件上
浏览目录：在导出前尝试 48 个组件和 26 个块及其真实行为
组合缺失的内容：描述一个新的表单、卡片或面板，让 AI 从现有组件中组装
发布它：下载可编辑的源代码或通过私有注册表安装到您的项目中
连接您的编码代理：添加 MCP 连接或注册表，以便 Codex、Claude Code 或 Cursor 可以重用您的组件
CodeRocket的使用案例
- 新的设计系统
- 编码代理交接
- 组件库导出
- 自定义组件组装
