内容
<h1 align="center">
<br>
通用
</h1>
<h4 align="center">适用于使用编码代理构建 React 接口的开发者的开源 AI 艺术总监。</h4>
<p align="center">
<img src="https://img.shields.io/badge/node-22%2B-339933?style=flat-square&logo=node.js&logoColor=white" alt="Node 22+">
<img src="https://img.shields.io/badge/pnpm-11%2B-F69220?style=flat-square&logo=pnpm&logoColor=white" alt="pnpm 11+">
<img src="https://img.shields.io/badge/typescript-5.x-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript">
<img src="https://img.shields.io/badge/react-19-61DAFB?style=flat-square&logo=react&logoColor=black" alt="React 19">
</p>
<p align="center">
<a href="https://github.com/7shep/universal/stargazers"><img src="https://img.shields.io/github/stars/7shep/universal?style=flat-square&label=stars" alt="星标"></a>
<a href="https://github.com/7shep/universal/forks"><img src="https://img.shields.io/github/forks/7shep/universal?style=flat-square&label=forks" alt="复刻"></a>
<a href="https://github.com/7shep/universal/issues"><img src="https://img.shields.io/github/issues/7shep/universal?style=flat-square&label=issues" alt="问题"></a>
<a href="https://github.com/7shep/universal/pulls"><img src="https://img.shields.io/github/issues-pr/7shep/universal?style=flat-square&label=pull%20requests" alt="拉取请求"></a>
<a href="LICENSE.MD"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT 许可证"></a>
</p>
<p align="center">
通用在实现之前建立构图和视觉方向。它为编码代理提供结构化的设计计划、可重用的设计规则和批判循环，使生成的接口感觉有意而为之，而不是随意拼凑。
</p>
<table>
<tr>
<td>
**它提供**
- 结构化的设计计划
- 构图指导
- 可重用的设计规则
- 反通用设计批评
- 本地 MCP 集成
**它使用**
- React 和 Vite
- TypeScript
- pnpm 工作区
- Turborepo
- 模型上下文协议
</td>
</tr>
</table>
## 项目状态
通用处于活跃的早期开发阶段。单体仓库、Studio 和 Preview 应用程序、设计合约和 MCP 原型已经就绪。一些生成流程仍然是架构占位符，同时设计引擎正在构建。
参见 [路线图](ROADMAP.md) 获取计划的里程碑和 [产品原则](PRODUCT.md) 获取项目方向。
## 快速入门
下游产品代理应使用规范的 [编排 API](docs/DOWNSTREAM_API.md)
而不是导入 MCP 传输内部。
### 先决条件
- Node.js 22 或更新版本
- pnpm 11 或更新版本
- Git
### 安装和运行
```bash
git clone https://github.com/7shep/universal.git
cd universal
pnpm install
pnpm dev
```
`pnpm dev` 同时启动 Studio 和 Preview 应用程序。
进行完整的生产检查：
```bash
pnpm lint
pnpm typecheck
pnpm build
pnpm format:check
pnpm test
```
`pnpm test` 运行每个维护的自动化套件，包括 MCP、design-linter 和 design-taste 策略测试。
## MCP 原型
通用包含一个本地 MCP 服务器，为兼容的编码代理暴露三个工具：
- `create_design_plan` 建立视觉和构图方向。
- `get_design_rules` 返回特定类别的设计约束。
- `review_implementation` 评估 React 和 CSS 输出与预期方向的一致性。
使用以下命令构建服务器：
```bash
pnpm --filter @universal/design-mcp build
```
参见 [将通用 MCP 连接到 Codex](docs/CODEX_MCP_SETUP.md) 获取配置、验证、故障排除和完整的演示工作流程。
## 工作区
```text
universal/
|-- apps/
| |-- studio/ 设计方向工作区
| `-- preview/ 隔离的生成项目预览
|-- examples/
| `-- demo-site/ 示例 MCP 驱动的 React 站点
|-- packages/
| |-- composition-library/ 页面构图模式
| |-- design-engine/ 设计合约和编排
| |-- design-linter/ 反通用批评接口
| |-- design-mcp/ 本地 MCP 服务器
| |-- prompts/ 版本提示程序集
| |-- shared/ 共享域类型和实用程序
| `-- ui/ 共享 React UI 基元
|-- docs/ 设置和集成指南
|-- PRODUCT.md 产品原则和边界
`-- ROADMAP.md 里程碑和未来方向
```
## 脚本
- `pnpm dev` 并行启动所有开发任务。
- `pnpm build` 通过 Turborepo 构建每个工作区包。
- `pnpm lint` 在仓库中运行 ESLint。
- `pnpm typecheck` 类型检查所有工作区。
- `pnpm test` 运行每个维护的工作区测试套件。
- `pnpm format` 使用 Prettier 格式化支持的文件。
- `pnpm format:check` 在不更改文件的情况下检查格式。
使用 pnpm 过滤器来定位一个工作区，例如：
```bash
pnpm --filter @universal/studio dev
pnpm --filter @universal/design-mcp build
```
## 贡献
欢迎贡献。错误报告、重点修复、文档改进、设计规则提案和范围明确的功能讨论都有帮助。
在打开问题或拉取请求之前，请阅读 [CONTRIBUTING.md](CONTRIBUTING.md)。它涵盖了本地设置、项目约定、验证、提交指导和审查流程。
## 许可证
通用在 [MIT 许可证](LICENSE.MD) 下可用。
