ui-architect-ai

<p align="center"> <img src="https://img.shields.io/badge/version-2.0.0-blue?style=for-the-badge" alt="版本"> <img src="https://img.shields.io/badge/status-production%20ready-green?style=for-the-badge" alt="状态"> <img src="https://img.shields.io/badge/phases-12%20%2F%2012-success?style=for-the-badge" alt="阶段"> <img src="https://img.shields.io/badge/typescript-strict%20mode-3178C6?style=for-the-badge&logo=typescript" alt="TypeScript"> <img src="https://img.shields.io/badge/license-MIT-yellow?style=for-the-badge" alt="许可证"> </p> <br> <h1 align="center">UI 建筑师 AI</h1> <p align="center"> <strong>从想法到世界级设计栈，几秒钟即可。</strong> </p> <p align="center"> 一个全面的 <strong>设计智能系统</strong> — 自我更新的多智能体架构<br> 能够发现适用于任何 Web 或移动项目的最佳组件、动画、库、颜色、字体排版、图标、<br> 移动 UI 模式和设计灵感。 </p> <p align="center"> 7 个应用程序 · 3 个共享包 · 9 个专业智能体 · 2200+ 精选资源 </p> <p align="center"> 使用 · TypeScript · Node.js · Next.js · Prisma · PostgreSQL · MCP SDK </p> <br> <h2 align="center">项目概述</h2> <p align="center"> <img src="photos/overview/overview-1.png" width="32%" /> <img src="photos/overview/overview-2.png" width="32%" /> <img src="photos/overview/overview-3.png" width="32%" /> </p> <br> --- <br> <h2 align="center">智能网络</h2> <p align="center"> <strong>CLI</strong> · <strong>MCP 服务器</strong> · <strong>Web 仪表盘</strong> · <strong>VS Code 扩展</strong> </p> <br> ```mermaid graph TD User[用户 / 开发人员] --> Dashboard[Web 仪表盘 Next.js] User --> VSCode[VS Code 扩展] User --> CLI[CLI 工具 uia] User --> AIClient[AI 编程智能体<br/>Claude / Cursor / Gemini] Dashboard --> ServerActions[服务器操作] VSCode --> MCPClient[MCP 客户端] CLI --> RecEngine[推荐引擎] AIClient --> MCPServer[MCP 服务器 v2.0] MCPServer --> RecEngine ServerActions --> RecEngine RecEngine --> Architect[设计架构智能体] Architect --> Agents[9 个专业智能体] Agents --> KB[(知识库<br/>knowledge-base.json)] AutoDisc[自动发现<br/>cron 调度器] --> Research[研究智能体] Research --> Internet[外部来源<br/>21st.dev, Magic UI, GitHub] ReviewAI[设计审查 AI] --> Architect ReviewAI --> RecEngine subgraph "数据流" Agents KB Research end ``` <br> <h2 align="center">界面画廊</h2> <h3 align="center">终端 CLI (uia)</h3> <table width="100%"> <tr> <td width="33%"><img src="photos/cli/cli-1.png" width="100%"></td> <td width="33%"><img src="photos/cli/cli-2.png" width="100%"></td> <td width="33%"><img src="photos/cli/cli-3.png" width="100%"></td> </tr> </table> <h3 align="center">Cursor 中的 MCP</h3> <table width="100%"> <tr> <td width="33%"><img src="photos/mcp/mcp-1.png" width="100%"></td> <td width="33%"><img src="photos/mcp/mcp-2.png" width="100%"></td> <td width="33%"><img src="photos/mcp/mcp-3.png" width="100%"></td> </tr> </table> <br> --- <br> <h2 align="center">功能</h2> <br> <table> <tr> <td width="33%" align="center"> <h3>多智能体智能</h3> <p>9 个专业智能体使用加权评分公式对资源进行排名 — 50% 意图匹配，30% 质量启发式，20% 流行度。</p> </td> <td width="33%" align="center"> <h3>MCP 服务器 v2.0</h3> <p>通过模型上下文协议向 Claude Code、Cursor、Gemini、Roo Code 和 Cline 公开 4 种工具 — <code>recommend_design</code>、<code>analyze_design</code>、<code>find_components</code>、<code>get_latest_audit</code>。</p> </td> <td width="33%" align="center"> <h3>开发人员级别个性化</h3> <p>结果根据初级、中级或高级技能级别进行调整 — 初学者获得更简单的资源，高级用户获得高级可定制选项。</p> </td> </tr> <tr> <td width="33%" align="center"> <h3>Web 仪表盘</h3> <p>Next.js 16 带有暗色模式、实时提示生成、响应式卡片网格和侧边栏导航，用于视觉设计探索。</p> </td> <td width="33%" align="center"> <h3>CLI 工具</h3> <p>终端界面，带有颜色编码的输出、旋转器反馈和 5 个命令 — <code>recommend</code>、<code>search</code>、<code>find</code>、<code>analyze</code>、<code>prompt</code>。</p> </td> <td width="33%" align="center"> <h3>VS Code 扩展</h3> <p>侧边栏 Webview、命令调色板推荐、安全沙盒 Webview 和 CSP，以及暗主题集成。</p> </td> </tr> <tr> <td width="33%" align="center"> <h3>研究智能体</h3> <p>自动发现引擎，带有 URL/名称重复数据删除、类别覆盖率分析和每次扫描的 4 个 Markdown 报告。</p> </td> <td width="33%" align="center"> <h3>自动发现</h3> <p>周期性 cron 调度器 — 每天进行研究扫描，每周进行链接验证（使用 HTTP HEAD），每月与趋势对齐的分数刷新。</p> </td> <td width="33%" align="center"> <h3>设计审查 AI</h3> <p>启发式视觉分析引擎，提供整体、可访问性和视觉质量分数，并带有可行的建议和组件推荐。</p> </td> </tr> <tr> <td width="33%" align="center"> <h3>100+ 并行智能体</h3> <p>调度器将结果分派到所有 9 个智能体 — 结果合并、删除重复项并在 200ms 内排序。</p> </td> <td width="33%" align="center"> <h3>确定性结果</h3> <p>相同的提示 + 相同的知识库 = 每次结果相同。评分管道中没有随机性。</p> </td> <td width="33%" align="center"> <h3>评分公式</h3> <p><code>0.5*matchScore + 0.3*qualityScore + 0.2*popularityScore</code> — 框架、样式、用例匹配 + 可访问性、性能、流行度信号。</p> </td> </tr> </table> <br> --- <br> <h2 align="center">项目结构</h2> <br> <pre> ui-architect-ai/ │ ├── <strong>apps/</strong> <em># 应用生态系统（7 个应用）</em> │ ├── <strong>cli/</strong> <em># 终端 CLI（uia）— 5 个命令</em> │ │ └── src/index.ts │ ├── <strong>mcp-server/</strong> <em># MCP v2.0 服务器 — 4 个工具</em> │ │ └── src/index.ts │ ├── <strong>dashboard/</strong> <em># Next.js 16 Web 仪表盘</em> │ │ └── src/app/ │ ├── <strong>vscode-extension/</strong> <em># VS Code 侧边栏 + 命令</em> │ │ └── src/extension.ts │ ├── <strong>research-agent/</strong> <em># 自动发现引擎</em> │ │ └── src/index.ts │ ├── <strong>auto-discovery/</strong> <em># Cron 维护调度器</em> │ │ └── src/index.ts │ └── <strong>design-review-ai/</strong> <em># 视觉分析引擎</em> │ └── src/index.ts │ ├── <strong>packages/</strong> <em># 共享库（3 个包）</em> │ ├── <strong>core/</strong> <em># 领域类型、接口、日志记录器</em> │ │ └── src/index.ts │ ├── <strong>database/</strong> <em># Prisma 客户端、模式、种子</em> │ │ └── prisma/schema.prisma │ └── <strong>recommendation-engine/</strong> <em># 多智能体推荐系统</em> │ └── src/agents/ <em># 调度器 + 9 个专业智能体</em> │ ├── <strong>data/</strong> <em># 集中式智能数据</em> │ ├── knowledge-base.json <em># 主数据库（~2264 个资源）</em> │ └── internal_resources.json <em># 次级数据库（~2240 个资源）</em> │ ├── <strong>docs/</strong> <em># 文档</em> │ ├── architecture/ <em># 数据库设计、模式、ER 图</em> │ ├── guides/ <em># 设置、MCP 工具规范</em> │ ├── rules/ <em># 编码标准和全局规则</em> │ ├── NETWORK_MAP.md │ └── COMPLETED_PHASES.md │ ├── package.json <em># Monorepo 根目录（npm 工作区）</em> ├── tsconfig.json <em># ES2022、NodeNext、严格模式</em> ├── .gitignore ├── technical-debt.md ├── missing-features.md └── architecture-review.md </pre> <br> --- <br> <h2 align="center">技术栈</h2> <br> <table> <thead> <tr> <th>层</th> <th>技术</th> </tr> </thead> <tbody> <tr> <td><strong>Monorepo</strong></td> <td>npm 工作区</td> </tr> <tr> <td><strong>运行时</strong></td> <td>Node.js 20+，TypeScript 5.3+（严格模式适用于所有 7 个应用 + 3 个包）</td> </tr> <tr> <td><strong>CLI</strong></td> <td>commander · chalk · ora</td> </tr> <tr> <td><strong>MCP</strong></td> <td>@modelcontextprotocol/sdk v1.0.1 — Stdio 传输，JSON-RPC 2.0</td> </tr> <tr> <td><strong>仪表盘</strong></td> <td>Next.js 16.2.9 · React 19.2.4 · Tailwind CSS v4 · Framer Motion · Lucide React · TanStack React Query</td> </tr> <tr> <td><strong>VS Code</strong></td> <td>@types/vscode 1.85+ · Webview API with sandboxed CSP</td> </tr> <tr> <td><strong>数据库</strong></td> <td>PostgreSQL · Prisma 7.8</td> </tr> <tr> <td><strong>调度</strong></td> <td>node-cron</td> </tr> <tr> <td><strong>HTTP</strong></td> <td>axios</td> </tr> <tr> <td><strong>工具</strong></td> <td>tsx · ESLint</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">快速入门</h2> <br> <h3>先决条件</h3> <table> <tr> <td><strong>Node.js</strong></td> <td>v20 或更高版本</td> </tr> <tr> <td><strong>npm</strong></td> <td>v10 或更高版本（支持工作区）</td> </tr> <tr> <td><strong>PostgreSQL</strong></td> <td><em>可选</em> — 系统仅使用 JSON 知识库运行</td> </tr> </table> <br> <h3>快速安装</h3> ```bash # 1. 安装所有依赖项，涵盖所有 10+ 个包/应用 npm install # 2. 将 TypeScript 编译为 JavaScript npm run build ``` <br> <h3>数据库设置 — 可选</h3> <details> <summary><strong>展开以进行 Prisma/PostgreSQL 设置</strong></summary> <br> ```bash # 在根目录创建 .env echo 'DATABASE_URL="postgresql://user:password@localhost:5432/ui_architect_db"' > .env # 初始化模式 cd packages/database npx prisma generate npx prisma db push npx prisma studio # 交互式验证表 ``` </details> <br> --- <br> <h2 align="center">MCP 服务器 — AI 智能体集成</h2> <br> <p>MCP 服务器允许 AI 编程智能体通过 4 种工具直接查询设计智能系统。</p> <br> <h3>运行服务器</h3> ```bash node apps/mcp-server/dist/index.js ``` <br> <h3>连接 AI 客户端</h3> <table> <thead> <tr> <th>客户端</th> <th>配置</th> </tr> </thead> <tbody> <tr> <td><strong>Cursor</strong></td> <td>设置 → 功能 → MCP → 添加：<code>node /abs/path/to/apps/mcp-server/dist/index.js</code></td> </tr> <tr> <td><strong>Claude Code</strong></td> <td><code>claude mcp add ui-architect -- node /abs/path/to/apps/mcp-server/dist/index.js</code></td> </tr> <tr> <td><strong>Gemini CLI</strong></td> <td><code>gemini-cli mcp register ui-architect -- node /abs/path/to/apps/mcp-server/dist/index.js</code></td> </tr> <tr> <td><strong>Roo Code / Cline</strong></td> <td>将 <code>mcpServers</code> 配置为 <code>command</code> 类型，并使用节点路径</td> </tr> </tbody> </table> <br> <h3>公开的工具</h3> <table> <thead> <tr> <th>工具</th> <th>输入</th> <th>输出</th> </tr> </thead> <tbody> <tr> <td><code>recommend_design</code></td> <td><code>{ prompt, developerLevel? }</code></td> <td><code>RecommendationStack</code> — 组件、动画、图标、字体排版、颜色、移动 UI、灵感</td> </tr> <tr> <td><code>analyze_design</code></td> <td><code>{ type: "url"|"screenshot", value }</code></td> <td><code>DesignReviewResult</code> — 分数、问题、建议、推荐</td> </tr> <tr> <td><code>find_components</code></td> <td><code>{ query }</code></td> <td>筛选的组件资源</td> </tr> <tr> <td><code>get_latest_audit</code></td> <td><code>{}</code></td> <td>最新的差距分析 & 审计报告 Markdown</td> </tr> </tbody> </table> </div> <br> --- <br> <h2 align="center">CLI 使用</h2> <br> <table> <thead> <tr> <th>命令</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>uia recommend &lt;prompt&gt;</code></td> <td>获取设计推荐，可选 <code>--level</code> 标志</td> </tr> <tr> <td><code>uia search &lt;query&gt;</code></td> <td>搜索所有设计资源</td> </tr> <tr> <td><code>uia find &lt;category&gt; &lt;query&gt;</code></td> <td>查找特定类别中的资源</td> </tr> <tr> <td><code>uia analyze</code></td> <td>分析项目设计负债 <em>(stub — 即将推出)</em></td> </tr> <tr> <td><code>uia prompt &lt;type&gt;</code></td> <td>生成设计任务的 AI 提示模板</td> </tr> </tbody> </table> <br> ```bash # 获取设计推荐 npx tsx apps/cli/src/index.ts recommend "Modern SaaS Dashboard" # 带有开发人员级别过滤 npx tsx apps/cli/src/index.ts recommend "Bento Grid Portfolio" --level advanced # 搜索所有资源 npx tsx apps/cli/src/index.ts search "glassmorphism UI kit" ``` # 在特定类别中查找资源 npx tsx apps/cli/src/index.ts find animations "scroll reveal" ``` <p> <strong>输出:</strong> 按类别进行颜色编码 — 青色（组件），黄色（动画），绿色（图标），洋红色（排版），蓝色（颜色），红色（移动UI）。每个条目显示名称、描述和网址。 </p> <br> --- <br> <h2 align="center">Web 仪表盘</h2> <br> ```bash npm run dev --workspace=dashboard ``` 导航到 <code>http://localhost:3000</code>。输入设计提示并在响应式卡片网格中获取分类结果。功能包括： - 带有 Tailwind CSS v4 主题的深色模式 - 流行的提示建议（开发人员投资组合、Bento 仪表盘、电子商务） - 通过 Next.js 服务器操作进行服务器端渲染 - 带有活动状态的侧边栏导航 <br> --- <br> <h2 align="center">VS Code 扩展</h2> <br> ```bash cd apps/vscode-extension npm run watch ``` 打开 VS Code → <strong>运行扩展</strong> → 使用 <code>UI Architect</code> 侧边栏面板或从命令调色板运行 <code>UI Architect: Recommend</code>。 <br> --- <br> <h2 align="center">多智能体推荐系统</h2> <br> <h3>评分公式</h3> <pre> totalScore = 0.5 × <strong>匹配分数</strong> + 0.3 × <strong>质量分数</strong> + 0.2 × <strong>流行度分数</strong> </pre> <table> <thead> <tr> <th>组件</th> <th>信号</th> </tr> </thead> <tbody> <tr> <td><strong>匹配分数</strong></td> <td>框架匹配（+10）· 样式匹配（+8）· 用例匹配（+8）· 提示关键词匹配（+5 完全匹配，+2 描述）· 领域奖励</td> </tr> <tr> <td><strong>质量分数</strong></td> <td>基准 75 · 无障碍/WCAG（+10）· 性能（+10）· 响应式/移动端（+5）· <em>上限 100</em></td> </tr> <tr> <td><strong>流行度分数</strong></td> <td>基准 60 · “流行”/“标准”（+15）· “tailwind”/“shadcn”（+20）· <em>上限 100</em></td> </tr> </tbody> </table> <br> <h3>9 个专业智能体</h3> <table> <thead> <tr> <th>智能体</th> <th>领域</th> <th>特殊奖励</th> </tr> </thead> <tbody> <tr> <td><strong>组件智能体</strong></td> <td>组件、UI 工具包</td> <td>框架匹配（+10），游乐场（+5），无障碍（+8）</td> </tr> <tr> <td><strong>动画智能体</strong></td> <td>动画、运动</td> <td>基于物理（+5）</td> </tr> <tr> <td><strong>排版智能体</strong></td> <td>字体、排版</td> <td>变量字体（+5），自托管/开源（+3）</td> </tr> <tr> <td><strong>颜色智能体</strong></td> <td>颜色、渐变色</td> <td>WCAG/对比度（+10）</td> </tr> <tr> <td><strong>图标智能体</strong></td> <td>图标</td> <td>SVG/开源（+5）</td> </tr> <tr> <td><strong>移动 UI 智能体</strong></td> <td>iOS、Android、Flutter、RN</td> <td>平台匹配（+10）</td> </tr> <tr> <td><strong>灵感智能体</strong></td> <td>画廊、展示</td> <td>画廊/展示（+5）</td> </tr> <tr> <td><strong>趋势智能体</strong></td> <td>所有资源</td> <td>2024-2026 现代度（+5），趋势关键词（+15）</td> </tr> <tr> <td><strong>资源研究智能体</strong></td> <td>所有资源</td> <td>广泛关键词匹配（每个词 +2）</td> </tr> </tbody> </table> <br> <h3>开发者级别个性化</h3> <table> <thead> <tr> <th>级别</th> <th>行为</th> </tr> </thead> <tbody> <tr> <td><strong>初学者</strong></td> <td>“简单”、“容易”、“入门”资源的奖励 · “高级”、“复杂”的惩罚</td> </tr> <tr> <td><strong>中级</strong></td> <td>中立 — 标准专业堆栈</td> </tr> <tr> <td><strong>高级</strong></td> <td>“可定制”、“3D”、“基于物理”、“复杂”的奖励 · “简单”的惩罚</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">研究智能体与自动发现</h2> <br> <h3>研究智能体</h3> <p>自动发现引擎读取知识库，模拟互联网研究（扫描 21st.dev、Magic UI、GitHub），通过网址和名称进行去重，并生成 4 份 markdown 报告：</p> <table> <thead> <tr> <th>报告</th> <th>内容</th> </tr> </thead> <tbody> <tr> <td><code>research-report.md</code></td> <td>扫描的摘要统计</td> </tr> <tr> <td><code>new-resources.md</code></td> <td>新发现的资源及其元数据</td> </tr> <tr> <td><code>duplicate-report.md</code></td> <td>发现的重复资源（按名称/网址匹配）</td> </tr> <tr> <td><code>gap-analysis.md</code></td> <td>类别覆盖计数和缺失的设计区域</td> </tr> </tbody> </table> ```bash npm run dev --workspace=@ui-architect/research-agent ``` <br> <h3>自动发现 — 维护调度器</h3> <p>数据库完整性和新鲜度的周期性 cron 维护。</p> <table> <thead> <tr> <th>调度</th> <th>日期/时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><strong>每日</strong></td> <td>每天 00:00</td> <td>研究智能体扫描</td> </tr> <tr> <td><strong>每周</strong></td> <td>星期日 01:00</td> <td>研究扫描 + 死链验证（HTTP HEAD）</td> </tr> <tr> <td><strong>每月</strong></td> <td>1 日 02:00</td> <td>研究扫描 + 链接验证 + 基于趋势的分数刷新</td> </tr> </tbody> </table> ```bash # 启动守护进程调度器 npx tsx apps/auto-discovery/src/index.ts start # 运行一次性扫描 npx tsx apps/auto-discovery/src/index.ts run --mode daily npx tsx apps/auto-discovery/src/index.ts run --mode weekly npx tsx apps/auto-discovery/src/index.ts run --mode monthly ``` <br> --- <br> <h2 align="center">设计审查 AI</h2> <br> <p>启发式视觉分析引擎，为任何 URL 或截图提供设计和无障碍评分。</p> <table> <thead> <tr> <th>指标</th> <th>分数</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>总体分数</strong></td> <td>78/100</td> <td>一般设计质量评估</td> </tr> <tr> <td><strong>无障碍</strong></td> <td>65/100</td> <td>WCAG 合规性、对比度、ARIA 标签</td> </tr> <tr> <td><strong>视觉质量</strong></td> <td>82/100</td> <td>排版、间距、层次结构、色彩和谐</td> </tr> </tbody> </table> <br> ```bash npm run dev --workspace=@ui-architect/design-review-ai ``` <br> **编程用法：** ```typescript const engine = new DesignReviewEngine(); const result = await engine.analyze({ type: "url", value: "https://example.com" }); // => { overallScore: 78, accessibilityScore: 65, visualQualityScore: 82, // issues: [...], suggestions: [...], recommendations: {...} } ``` <br> --- <br> <h2 align="center">数据库架构</h2> <br> <p>数据库使用 <strong>混合扩展表架构</strong> — 一个核心 <code>Resource</code> 表和每个设计类别的 1:1 扩展表，避免具有 40 多个可空列的稀疏单体表。符合 3NF。</p> <br> <h3>核心表</h3> <table> <thead> <tr> <th>表</th> <th>关键字段</th> </tr> </thead> <tbody> <tr> <td><strong>资源</strong></td> <td><code>id</code>（UUID 主键），<code>name</code>，<code>description</code>，<code>url</code>，<code>popularity</code>，<code>score</code>，<code>useCases[]</code>，<code>categoryId</code>（外键）</td> </tr> <tr> <td><strong>类别</strong></td> <td><code>id</code>（UUID 主键），<code>name</code>（唯一），<code>description</code>?</td> </tr> <tr> <td><strong>标签</strong></td> <td><code>id</code>（UUID 主键），<code>name</code>（唯一）— 与 Resource 的多对多关系</td> </tr> </tbody> </table> <br> <h3>扩展表 — 与 Resource 1:1</h3> <table> <thead> <tr> <th>表</th> <th>特殊字段</th> </tr> </thead> <tbody> <tr> <td><strong>组件</strong></td> <td>frameworks[]，isResponsive，isAccessible，hasPlayground，codeSnippet，dependencies[]</td> </tr> <tr> <td><strong>库</strong></td> <td>packageManager，installCommand，license，githubStars，bundleSizeKb，repoUrl</td> </tr> <tr> <td><strong>动画</strong></td> <td>engine，isPhysicsBased，triggerType，durationMs，easing</td> </tr> <tr> <td><strong>图标</strong></td> <td>formats[]，iconCount，styles[]，isCustomizable</td> </tr> <tr> <td><strong>排版</strong></td> <td>fontType，designer，isVariable，licensing，isSelfHosted</td> </tr> <tr> <td><strong>颜色调色板</strong></td> <td>hexCodes[]，contrastRatio，isWCAGCompliant，paletteType</td> </tr> <tr> <td><strong>移动 UI</strong></td> <td>platforms[]，screenType，deviceMockUrl，userFlowSteps[]</td> </tr> <tr> <td><strong>灵感</strong></td> <td>submittedBy，inspirationUrl，screenshotUrl，stylesDetected[]</td> </tr> </tbody> </table> <br> ```bash # 种子数据库 npx tsx packages/database/src/seed.ts ``` <br> --- <br> <h2 align="center">开发</h2> <br> <h3>运行应用程序</h3> <table> <thead> <tr> <th>组件</th> <th>命令</th> </tr> </thead> <tbody> <tr> <td>Web 仪表盘</td> <td><code>npm run dev --workspace=dashboard</code></td> </tr> <tr> <td>CLI</td> <td><code>npx tsx apps/cli/src/index.ts recommend "prompt"</code></td> </tr> <tr> <td>MCP 服务器</td> <td><code>npx tsx apps/mcp-server/src/index.ts</code></td> </tr> <tr> <td>设计审查</td> <td><code>npm run dev --workspace=@ui-architect/design-review-ai</code></td> </tr> <tr> <td>研究智能体</td> <td><code>npm run dev --workspace=@ui-architect/research-agent</code></td> </tr> <tr> <td>自动发现</td> <td><code>npm run scan:daily --workspace=@ui-architect/auto-discovery</code></td> </tr> <tr> <td>VS Code 扩展</td> <td><code>cd apps/vscode-extension && npm run watch</code></td> </tr> </tbody> </table> <br> <h3>测试</h3> ```bash npm test # 所有工作区测试 npx tsx packages/recommendation-engine/tests/agents.test.ts # 智能体逻辑 npx tsx apps/mcp-server/src/test-client.ts # MCP 握手 npx tsx apps/research-agent/tests/research.test.ts # 研究智能体 ``` <br> --- <br> <h2 align="center">配置参考</h2> <br> <table> <thead> <tr> <th>变量</th> <th>必填</th> <th>默认值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>DATABASE_URL</code></td> <td>对于 Prisma</td> <td>—</td> <td>PostgreSQL 连接字符串</td> </tr> <tr> <td><code>UI_ARCHITECT_DB_PATH</code></td> <td>否</td> <td><code>data/knowledge-base.json</code></td> <td>自定义知识库 JSON 路径</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">项目阶段</h2> <br> <table> <thead> <tr> <th>阶段</th> <th>组件</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>1–2</td> <td>基础设施、数据库和架构</td> <td align="center">✅ 完成</td> </tr> <tr> <td>3</td> <td>推荐逻辑</td> <td align="center">✅ 完成</td> </tr> <tr> <td>4</td> <td>MCP 服务器 v1</td> <td align="center">✅ 完成</td> </tr> <tr> <td>5</td> <td>多智能体中心 — 9 个智能体 + 调度器</td> <td align="center">✅ 完成</td> </tr> <tr> <td>6</td> <td>自动化研究和去重</td> <td align="center">✅ 完成</td> </tr> <tr> <td>7</td> <td>Next.js Web 仪表盘</td> <td align="center">✅ 完成</td> </tr> <tr> <td>8</td> <td>VS Code / Cursor 集成</td> <td align="center">✅ 完成</td> </tr> <tr> <td>9</td> <td>终端 CLI (uia)</td> <td align="center">✅ 完成</td> </tr> <tr> <td>10</td> <td>维护和链接健康 — 自动发现</td> <td align="center">✅ 完成</td> </tr> <tr> <td>11</td> <td>视觉评分和无障碍审查</td> <td align="center">✅ 完成</td> </tr> <tr> <td>12</td> <td>智能网络和开发者个性化</td> <td align="center">✅ 完成</td> </tr> </tbody> </table> <p align="center"><strong>12 / 12 阶段 — 100% 完成</strong></p> <br> --- <br> <h2 align="center">安全</h2> <br> <table> <tbody> <tr> <td align="center">无硬编码机密</td> <td>API 密钥和凭证基于环境变量</td> </tr> <tr> <td align="center">XSS 防护</td> <td>VS Code webview 使用带有基于 nonce 的脚本的 CSP；textContent 而不是 innerHTML</td> </tr> <tr> <td align="center">沙盒化 webview</td> <td>VS Code 扩展在没有节点访问权限的沙盒 iframe 中运行</td> </tr> <tr> <td align="center">仅限标准输入/输出的 MCP</td> <td>没有公开的网络层 — MCP 仅通过标准输入/输出通信</td> </tr> <tr> <td align="center">100% TypeScript 严格模式</td> <td>在所有 7 个应用程序和 3 个包中启用严格模式</td> </tr> </tbody> </table> <br> --- <br> <h2 align="center">许可证</h2> <p align="center"> MIT — 开源且免费使用。 </p> <br> --- <br> <p align="center"> <em>使用 UI Architect AI monorepo · npm 工作区 · TypeScript 严格模式构建</em> </p>