UI Architect MCP

UI架构师MCP

用于生成生产就绪、代理质量UI的最终MCP服务器。 任何框架。没有CSS框架锁定。永远不会看起来是人工智能生成的。

建造于 食品

16个工具•UIverse.io组件•3层图像系统•所需API密钥为零•8个框架

安装 | 工具 | UIverse集成 | 图像系统 | 示例 | 建筑 | 哲学 | 贡献

1.00

这是什么？

UI架构师是 模型上下文协议（MCP） 服务器，让像克劳德这样的人工智能助手能够生成 完整、专业的设计系统和UI组件 从一个简单的描述，如 _“针对千禧一代的金融科技初创公司”_.

它解决了AI生成UI的五个问题：

1. 它看起来总是人工智能生成的 --紫蓝色渐变、对称网格、通用布局。UI Architect使用具有15个行业配置文件的颜色智能引擎来生成与现实业务环境相匹配的调色板。

1. 组件不一致 --一个页面上有五种不同的按钮样式。UI架构师强制执行 设计令牌注册表 这将在整个项目中为每个组件类别锁定一种样式。

1. 它是静止的，没有生命 --没有悬停效果，没有滚动动画，没有微交互。UI架构师获取 来自的真实动画组件 UIverse.io （4000多个开源组件）并将其直接注入生成的页面。组件会自动调整——颜色会重新映射到CSS变量，类名会被规范化，动画会被保留。当UIverse不可用时，回退到61个内置组件。

1. 没有真实图像 --到处都是占位符框。UI架构师解决 真实库存照片 （Unsplash/Pexels）和 SVG图标 （Lucide CDN）与每个部分的目的和项目的行业相匹配。使用零个API密钥即可开箱即用。

1. 无质量门 --代码发布时没有SEO检查、设计一致性验证或营销审查。UI架构师运行 SEO审计, 多页一致性检查，以及 QA审查 在交付之前，最终的构建清单会记录所有内容。

______________________________________________________________________

安装

需求

• Node.js 18+
• MCP兼容客户端（克劳德桌面、克劳德代码、光标等）

使用克劳德桌面

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "ui-architect": {
      "command": "npx",
      "args": ["-y", "ui-architect-mcp"],
      "env": {
        "UNSPLASH_ACCESS_KEY": "optional-free-key",
        "PEXELS_API_KEY": "optional-free-key"
      }
    }
  }
}

使用克劳德代码

claude mcp add ui-architect -- npx -y ui-architect-mcp

手册/来源

git clone https://github.com/AISoloPreneur/ui-architect-mcp.git
cd ui-architect-mcp
npm install
npm run build

然后添加到MCP配置中：

{
  "mcpServers": {
    "ui-architect": {
      "command": "node",
      "args": ["/absolute/path/to/ui-architect-mcp/dist/index.js"],
      "env": {
        "UNSPLASH_ACCESS_KEY": "optional-free-key",
        "PEXELS_API_KEY": "optional-free-key"
      }
    }
  }
}

发展模式

npm run dev

这使用 tsx 直接运行TypeScript源代码，无需构建步骤。

______________________________________________________________________

工具

UI架构师公开 16个MCP工具 遵循完整的网页设计机构流程。按顺序运行它们以获得最佳效果，或使用 run_pipeline 自动将它们全部链接起来。

16工具管道

1. 分析工程 --范围和要求分析
2. 平面建筑 --系统设计和组件映射
3. 设计主题 --颜色系统、排版、间距
4. explorecomponents --从UIverse.io获取动画组件
5. 选择组件 --选择和调整UI组件
6. generate_背景 --创建背景图案
7. 脚手架工程 --生成项目目录结构
8. fetch_images --解析真实的库存照片和SVG图标
9. generate_full_page --生成完整的页面代码
10. seo_audit --SEO和营销质量审查
11. 设计_一致性_检查 --多页设计一致性验证
12. review_output --QA和反模式检测
13. generate_build_manifest --使用组件源URL构建报告
14. 生成内容 --具有行业意识的节拷贝生成器
15. seo_fix --根据SEO审计结果自动修补HTML
16. run_pipeline --完整编排（端到端链接所有工具）

______________________________________________________________________

1. analyze_project （第一阶段：项目经理分析）

分析需求并创建项目范围。

输入：

它返回什么：

• 项目范围文件（页数、章节、语气、复杂性）
• 澄清问题（如果请求不明确）
• 风险评估（性能、兼容性、范围蠕变）
• 推荐的框架和样式方法
• 预计时间表和组件数量

例子：

Input:
  description: "Build a landing page for a healthtech startup"
  industry: "healthcare"

Output:
  {
    "pageType": "Landing page",
    "audience": "Healthcare professionals, B2B",
    "tone": "trustworthy, modern, accessible",
    "sections": ["Hero", "Features", "Pricing", "Testimonials", "CTA", "Footer"],
    "estimatedComplexity": "Medium",
    "recommendedFramework": "React or Next.js",
    "componentsNeeded": ["Hero", "Cards", "Buttons", "Forms", "Navigation"],
    "clarifyingQuestions": [
      "Do you need dark mode support?",
      "Is this a single-page landing or multi-page site?"
    ]
  }

______________________________________________________________________

2. plan_architecture （第2阶段：系统分析架构）

设计系统架构和组件层次结构。

输入：

它返回什么：

• 技术栈决策（框架、样式、状态管理、构建工具）
• 完整的组件架构图（层次结构）
• 数据流和交互计划（滚动动画、导航、表单流）
• 目录结构模板（准备搭建脚手架）
• 具有一致页眉/页脚的多页路由策略
• 带有依赖关系的文件列表

例子：

Output:
  {
    "stack": {
      "framework": "React",
      "styling": "CSS Modules",
      "animationLibrary": "Pure CSS3"
    },
    "componentMap": {
      "Layout": ["Navbar", "Footer"],
      "Sections": ["Hero", "Features", "Pricing"],
      "Components": ["Button", "Card", "Input"]
    },
    "interactivityPlan": {
      "scrollAnimations": "Intersection Observer",
      "navigation": "Smooth scroll",
      "forms": "Validation on blur/submit"
    }
  }

______________________________________________________________________

3. design_theme （第三阶段：高级UI/UX设计师）

从业务环境中生成一个完整的设计系统。

先运行这个。 它生成所有其他工具所依赖的调色板、排版、间距、阴影、边框半径和过渡。

它返回什么：

• 完成CSS自定义属性块（粘贴到样式表中）
• 谷歌字体 `

` 标签

• 主色、次色、重音色、7级中性色和语义色的调色板
• 排版比例（通过标题显示）、字体配对、权重、行高
• 8px网格间距系统
• 阴影、半径和过渡标记
• 人类可读的设计摘要

主题引擎如何决定：

示例输出（CSS变量）：

:root {
  --color-primary: #0A2540;
  --color-primary-light: #2280dd;
  --color-primary-dark: #02080d;
  --color-primary-rgb: 10, 37, 64;
  --color-secondary: #1B7A4A;
  --color-accent: #D4A843;
  --color-neutral-900: #171a1c;
  --color-neutral-50: #f7f7f8;
  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --space-md: 1rem;
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08);
  --radius-md: 8px;
  --transition-base: 250ms ease;
  /* ... 50+ variables total */
}

______________________________________________________________________

4. explore_components （第3.2阶段：UIverse Explorer）

从UIverse.io的开源GitHub仓库中获取真实的动画组件。

这使得系统 混合 --内置库+实时UIverse组件。Claude不仅可以使用61个内置组件，还可以探索和使用 4300多个社区构建的组件 在UIverse上。

它返回什么：

• 来自UIverse GitHub的真实组件代码（HTML+CSS）
• 每个组件的动画得分（0-100）
• 链接到UIverse GitHub仓库的源URL
• 按动画丰富程度排序的组件

支持的类别：

buttons, checkboxes, toggle-switches, cards, loaders, inputs, radio-buttons, forms, tooltips, spinners, all

例子：

Input:
  categories: ["buttons", "loaders"]
  preferAnimated: true
  searchQuery: "glow"

Output:
  {
    "buttons": [
      { "name": "Neon Glow Button", "animationScore": 92, "html": "...", "css": "..." },
      { "name": "Pulse Gradient Button", "animationScore": 87, "html": "...", "css": "..." }
    ],
    "loaders": [
      { "name": "Orbital Loader", "animationScore": 95, "html": "...", "css": "..." }
    ]
  }

______________________________________________________________________

5. select_components （第3.5阶段：组件选择）

为您的框架选择并调整动画UI组件。

运行此之后 design_theme. 它从内置库中为每个类别选择最佳组件，使其适应您的框架，并将其锁定在设计令牌注册表中。

组件视觉样式（每个类别5个变体）：

如果未指定，风格将自动从您的行业和音调中解析出来：

组件类别（13个类别×最多5个样式=61个组件）：

预设（常用集的简写）：

它返回什么：

• 每个组件的生产就绪代码（HTML/CSS、JSX、Vue SFC、Angular或Svelte）
• 使用零硬编码颜色的独立CSS——所有内容都使用您的设计标记
• 锁定的设计令牌注册表（保证一致性）
• 每个组件的可访问性说明

______________________________________________________________________

6. generate_background （第4阶段：背景和模式引擎）

生成与您的行业相匹配的微妙CSS背景图案。

图案类型：

______________________________________________________________________

7. scaffold_project （第五阶段：项目脚手架）

使用基本文件和样板生成完整的项目目录结构。

输入：

它返回什么：

• 包含所有文件夹的完整目录树
• CSS变量文件（来自设计标记）
• CSS重置和基本样式
• 每个部分的HTML/组件模板
• 导航和布局脚手架
• 动画实用程序类
• 准备运行——只需填写内容

普通HTML输出结构：

project/
├── index.html              ← HTML pages at root
├── about.html
├── contact.html
├── assets/
│   ├── css/
│   │   ├── variables.css   ← Design tokens
│   │   ├── reset.css
│   │   ├── animations.css
│   │   ├── base.css
│   │   └── layout.css
│   ├── js/
│   │   ├── animations.js   ← Intersection Observer
│   │   └── main.js
│   ├── images/
│   └── fonts/
└── README.md

React/Next.js输出结构：

src/
├── components/
│   ├── ui/
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Input/
│   │   └── ...
│   └── sections/
│       ├── Hero/
│       ├── Features/
│       └── ...
├── styles/
│   ├── variables.css
│   ├── base.css
│   └── animations.css
└── pages/
    └── page.tsx

______________________________________________________________________

8. fetch_images （第5.5阶段：图像分辨率）

解析每个部分的真实库存照片和SVG图标。

查看专用 图像系统 请参阅以下部分以获取完整文档。

它返回什么：

• 每个部分的解析图像URL（真实照片或Lucide SVG图标）
• 摄影师归因（使用Unsplash/Pixels时）
• 源分解（每层有多少）
• 带有回退状态的摘要

例子：

Input:
  sections: [
    { sectionType: "hero", industry: "fintech" },
    { sectionType: "features", count: 6 },
    { sectionType: "team", count: 4 }
  ]
  industry: "fintech"

Output:
  {
    "hero": [{ url: "https://picsum.photos/seed/uiarch1/1200/600", source: "picsum" }],
    "features": [
      { url: "https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/wallet.svg", source: "lucide", isIcon: true },
      { url: "https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/shield-check.svg", source: "lucide", isIcon: true },
      ...
    ],
    "team": [
      { url: "https://picsum.photos/seed/uiarch101/400/400", source: "picsum" },
      ...
    ],
    "totalImages": 11,
    "sources": { "picsum": 5, "lucide": 6 }
  }

______________________________________________________________________

9. generate_full_page （第6阶段：代码生成）

使用所有组件、动画和样式生成完整的、可用于生产的页面代码。

输入：

它返回什么：

• 完整的页面代码 --准备复制粘贴并运行
• 语义HTML（或JSX/Vue/Angular模板）
• 所有组件均与真实图像和Lucide图标集成
• 所有动画（悬停、聚焦、滚动触发）
• 所有断点的响应式设计
• 辅助功能属性（ARIA、键盘导航、对比度验证）
• 零硬编码颜色——所有CSS变量
• 零控制台错误

生成的代码包括：

• 带有动画下划线的标题/导航（所有页面一致）
• 英雄部分有真实的库存照片和入口动画
• 带有Lucide SVG图标和交错显示的功能卡
• 带有悬停效果的定价表
• 带有真实头像照片的推荐信
• 带有肖像图像的团队部分
• 带组织链接的页脚（所有页面一致）
• 带有动画的移动菜单汉堡
• 功能齐全的表单验证（如果部分包括表单）

______________________________________________________________________

10. seo_audit （第6.5阶段：搜索引擎优化和营销审查）

全面的SEO和数字营销质量审计，并带有反馈回路。

它返回什么：

• 总得分（0-100） 字母等级（A到F）
• 10个审计类别的每个类别得分
• 严重性（严重/警告/信息）的详细问题列表
• 反馈到管道中的可操作修复建议

审计类别（50+项检查）：

示例报告：

SEO AUDIT — Fintech Landing Page
═════════════════════════════════════
Overall Score: 82/100 (Grade: B)

✅ Meta Tags: 90/100
✅ Heading Hierarchy: 100/100
⚠️  Image Optimization: 70/100
    → 2 images missing width/height attributes
✅ Performance: 85/100
✅ Accessibility: 88/100
⚠️  Content Quality: 65/100
    → Hero section has less than 50 words
✅ Technical SEO: 90/100
✅ Mobile: 95/100
❌ Social Media: 30/100
    → Missing Open Graph tags
    → Missing Twitter card meta
✅ Links: 85/100

Fix suggestions fed back to pipeline for remediation.

______________________________________________________________________

11. design_consistency_check （阶段6.7：多页一致性）

验证所有页面看起来都像是由一个设计师设计的。

它返回什么：

• 总体一致性得分 跨所有页面
• 每页得分和详细问题
• 分类一致性分析

检查包括：

例子：

CONSISTENCY CHECK — 3-Page Site
═══════════════════════════════════
Overall: 94/100

Page: Home        → 96/100
Page: About       → 93/100 ⚠️ Footer missing social links present on Home
Page: Contact     → 92/100 ⚠️ Header CTA button uses different padding

Issues:
1. Footer on About page is missing social media icons (present on Home, Contact)
2. Contact page header CTA has 12px padding vs 16px on other pages

______________________________________________________________________

12. review_output （第7阶段：质量保证审查）

根据设计理念和反模式检测进行自动化QA。

输入：

它返回什么：

• 质量保证报告 通过/未通过30+次检查
• 视觉审查清单（设计、层次结构、动画）
• 技术审查清单（可访问性、性能、HTML有效性）
• 业务一致性检查
• 反模式检测（紫色-蓝色梯度，AI告诉，不一致成分）
• 具体补救建议
• 总体质量得分（1-10）
• 已准备好修复操作项

检查包括：

示例报告：

QA REPORT — Fintech Landing Page
═════════════════════════════════════

✅ Design Quality: PASS
✅ Component Consistency: PASS
✅ Accessibility (WCAG AA): PASS
✅ Performance: PASS
⚠️  Animation Density: WARNING — Hero section lacks scroll animation
❌ Business Alignment: FAIL — CTA button not prominent enough

Overall Score: 8/10

Recommendations:
1. Add fade-in-up animation to hero headline
2. Increase CTA button size by 20%
3. Verify pricing section contrast ratio on hover states

______________________________________________________________________

13. generate_build_manifest （最终：构建报告）

生成一份全面的降价报告，记录所使用的每个组件。

它返回什么：

完整的 BUILD-MANIFEST.md 文件包含：

• 每页部分细分，包括组件列表
• UIverse GitHub源URL 对于每个组件类别
• 带有浏览链接的内置库参考
• 设计标记摘要（颜色、字体、主题）
• SEO评分、一致性评分、QA审核评分
• 完整的管道元数据和归因积分

输出示例：

# BUILD MANIFEST — Fintech Pro

## Page: Home (index.html)

| Section | Components Used | Source |
|---------|----------------|--------|
| Navigation | navigation (animated) | Built-in |
| Hero | button-primary, button-secondary | Built-in |
| Features | card × 6, Lucide icons | Built-in + Lucide CDN |
| Pricing | card × 3, badge, button-primary | Built-in |
| Footer | — | Custom |

### Component Sources
- Buttons: https://github.com/uiverse-io/galaxy/tree/main/buttons
- Cards: https://github.com/uiverse-io/galaxy/tree/main/cards
- Loaders: https://github.com/uiverse-io/galaxy/tree/main/loaders

### Audit Scores
- SEO: 82/100 (B)
- Consistency: 94/100
- QA: 8/10

---
Built with UI Architect MCP by FODUU (https://www.foduu.com)

______________________________________________________________________

14. generate_content （文案部分）

生成结构化的部分副本——标题、功能、定价、推荐、CTA、常见问题解答。不需要API密钥。

它返回什么：

• 结构化JSON内容（标题、副标题、项目、CTA等）
• 准备通过 generate_full_page 或通过AI编排器（Claude等）进行定制

______________________________________________________________________

15. seo_fix （来自SEO审计的自动补丁）

自动修复以下人员发现的常见SEO问题 seo_audit --缺少元标记、alt文本、Open Graph、标题层次结构、延迟加载等。

它自动修复的内容：

• 缺少视口、字符集、标题和元描述标签
• 缺少Open Graph和规范链接标签
• 缺失 lang 归因于 ``
• 无图像 alt 文本
• 缺失 loading="lazy" 在下面的折叠图像上
• 标题层次结构已损坏（如果不存在h1，则将第一个h2升级为h1）
• 缺少跳转到内容可访问性链接

______________________________________________________________________

16. run_pipeline （完整编排）

在一次调用中端到端地链接所有工具——从描述到具有质量门和自动重试功能的生产就绪网站。

它的作用：

1. 自动运行完整的13步流水线
2. 代码生成后，运行SEO审计+QA审查
3. 如果SEO得分低于阈值，则适用 seo_fix 自动补丁
4. 如果QA失败，则重新生成带有修复提示的页面
5. 退回至 maxRetries 质量合格前的时间
6. 生成最终构建清单

它返回什么：

• 所有生成的页面（HTML、CSS、JS）
• 脚手架文件（目录结构、基本CSS）
• SEO评分、QA评分、一致性评分
• 完整的管道执行日志，包括时间
• 构建清单

______________________________________________________________________

需要零个API密钥

UI架构师是 完全确定性 -不需要LLM API密钥。所有设计标记、调色板、排版、组件、背景、脚手架、SEO修复和代码生成都可以在没有任何外部AI服务的情况下运行。

由于这是一个MCP服务器，它已经被AI代理（Claude、GPT等）通过Claude Code、Cursor或Windsurf等工具调用。调用AI提供了智能层——MCP服务器提供了专门的UI生成引擎。

可选图像API密钥 （两者都是免费的）可以提高图像质量，但不是必需的：

______________________________________________________________________

图像系统

UI架构师包括 三层图像分辨率系统 这确保了每个部分都能得到真实、相关的图像，而不是空框。

运作原理

在没有任何API密钥的情况下工作。 Lorem Picsum+Lucide图标提供开箱即用的真实图像和图标。为关键字匹配的结果添加免费的Unsplash/Pixels键。

部分→ 图像类型映射

关键词→ 图标智能

该系统包括 200+输入关键字到图标地图 自动将业务概念解析为Lucide图标：

"security"     → shield-check    "analytics"  → bar-chart-3
"shipping"     → truck           "payment"    → credit-card
"cloud"        → cloud           "team"       → users
"growth"       → trending-up     "support"    → headphones
"automation"   → bot             "education"  → graduation-cap

加 15个行业特定图标集 （金融科技获得钱包/盾牌检查/趋势上升，医疗保健获得心跳/听诊器/盾牌加等）。

获取API密钥（免费）

Unsplash和Pexels都提供免费的API密钥：

未喷涂： 首选 unsplash.com/developers，创建免费帐户，注册应用程序。你每小时收到50个请求（生产应用程序每小时收到5000个请求）。

像素： 首选 pexels.com/api，创建一个免费帐户。你每小时收到200个请求。

将它们添加到您的MCP配置中：

{
  "mcpServers": {
    "ui-architect": {
      "command": "node",
      "args": ["/path/to/dist/index.js"],
      "env": {
        "UNSPLASH_ACCESS_KEY": "your-unsplash-key",
        "PEXELS_API_KEY": "your-pexels-key"
      }
    }
  }
}

______________________________________________________________________

UIverse组件集成

UI架构师使用 UIverse.io组件作为主要来源 对于所有UI元素。其工作原理如下：

流量

1. 获取 — explore_components 从UIverse GitHub存储库下载真实的动画组件，按动画丰富程度排序
2. 适应 --UIverse适配器引擎将所有硬编码的颜色重新映射到CSS自定义属性，规范化类名以匹配项目约定(.btn, .card, .input-field)，和摘录 @keyframes 规则
3. 注入 --自适应组件CSS被注入到脚手架基础样式表中(animations.css)以及每个部分的CSS输出，替换内置的硬编码样式
4. 后备方案 --如果UIverse获取失败（速率限制、网络），则会自动使用内置组件样式

什么需要适应

颜色重映射

UIverse CSS中的所有硬编码十六进制值都会自动替换：

• 原色蓝/紫/靛→ var(--color-primary)
• 绿党→ var(--color-success)
• Reds → var(--color-error)
• 浅灰色→ var(--color-neutral-100) 通过 var(--color-neutral-300)
• 深灰色→ var(--color-neutral-700) 通过 var(--color-neutral-900)
• 白色→ var(--color-neutral-50)
• RGBA值→ rgba(var(--color-primary-rgb), ...)

这意味着UIverse组件会自动匹配颜色智能引擎生成的任何调色板。

______________________________________________________________________

使用示例

示例1：“在React中为我构建一个金融科技登录页面”

You: Build me a fintech landing page for a startup that offers budgeting tools.
     Include hero, features, pricing, and CTA sections. React + modern tone.

Claude uses pipeline:
 1. analyze_project     → scope: landing page, fintech, millennials, modern tone
 2. plan_architecture   → React + CSS Modules, component hierarchy
 3. design_theme        → light theme, navy primary, gold accent, Sora + Inter
 4. explore_components  → fetch top animated buttons & cards from UIverse
 5. select_components   → ["landing"], framework: "react"
 6. generate_background → geometric dot-grid pattern
 7. scaffold_project    → complete React project structure
 8. fetch_images        → hero photo, feature icons (wallet, shield, chart), team avatars
 9. generate_full_page  → full landing page with real images + animations
10. seo_audit           → 82/100, missing OG tags flagged
11. design_consistency  → single page, auto-pass
12. review_output       → QA report, 8/10
13. build_manifest      → BUILD-MANIFEST.md with all component URLs

Result: Complete, production-ready React landing page with:
  - Light theme, navy #0A2540 primary, gold accent
  - Real stock photos + Lucide SVG icons
  - 5 animated React components (button, card, nav, badge)
  - Scroll-triggered entrance animations on all sections
  - Responsive at 375px, 768px, 1024px, 1440px
  - WCAG AA accessible, keyboard navigable
  - Dot-grid background pattern on hero
  - Zero hardcoded colors (all CSS variables)
  - Build manifest with component source links

示例2：“餐厅的多页面网站”

You: Build a 3-page website for an Italian restaurant.
     Home: hero, menu preview, testimonials, CTA.
     Menu: full menu with categories.
     Contact: form, map, hours.
     Vanilla HTML.

Claude uses pipeline:
 1. analyze_project     → restaurant, 3 pages, warm/elegant tone
 2. plan_architecture   → Vanilla HTML, shared header/footer
 3. design_theme        → warm palette, brown primary, cream accent
 4. explore_components  → animated cards for menu items
 5. select_components   → neumorphic style (food industry)
 6. generate_background → organic wave section dividers
 7. scaffold_project    → 3 HTML files at root, assets/ folder
 8. fetch_images        → food photos, restaurant interior, chef portrait
 9. generate_full_page  → 3 complete pages, same header/footer
10. seo_audit           → audit each page
11. design_consistency  → verify header/footer match across all 3 pages
12. review_output       → final QA
13. build_manifest      → per-page component report

Result:
  project/
  ├── index.html        ← Home page
  ├── menu.html         ← Menu page
  ├── contact.html      ← Contact page
  └── assets/
      ├── css/          ← Shared variables, reset, animations
      ├── js/           ← Shared navigation, scroll animations
      ├── images/       ← Downloaded restaurant photos
      └── fonts/

示例3：“只需为我的Angular项目提供组件”

You: I need button-primary, card, and input components for Angular.
     Corporate style, flat design.

Claude uses:
1. design_theme         → corporate, light, navy primary, 4px radii
2. select_components    → ["button-primary", "card", "input"], framework: "angular"
3. review_output        → validate component code quality

Result: 3 production Angular components with separate HTML + SCSS,
hover lift animations, focus rings, zero hardcoded colors.

______________________________________________________________________

建筑

ui-architect-mcp/
├── src/
│   ├── index.ts                         # MCP server entry point (17 tools, stdio transport)
│   ├── engine/
│   │   ├── types.ts                     # All TypeScript type definitions
│   │   ├── color-engine.ts              # Color Intelligence Engine (15 industry profiles)
│   │   ├── typography-engine.ts         # Font pairing, type scale, spacing, shadows
│   │   ├── pattern-engine.ts            # Background pattern generator (5 styles)
│   │   ├── component-library.ts         # 25 core components (button, card, input)
│   │   ├── components-part2.ts          # 15 components (toggle, radio, loader)
│   │   ├── components-part3.ts          # 21 components (badge, tooltip, nav, modal, dropdown)
│   │   ├── component-adapter.ts         # 8 framework adapters + Design Token Registry
│   │   ├── llm-engine.ts               # Unified LLM adapter (Claude API + OpenAI API)
│   │   └── uiverse-adapter.ts          # UIverse component adapter (color remap + class normalization)
│   └── tools/
│       ├── analyze-project.ts           # Tool 1:  PM analysis & scope
│       ├── plan-architecture.ts         # Tool 2:  System architecture
│       ├── design-theme.ts              # Tool 3:  Design system generation
│       ├── explore-components.ts        # Tool 4:  UIverse GitHub fetcher (hybrid)
│       ├── select-components.ts         # Tool 5:  Component selection & adaptation
│       ├── generate-background.ts       # Tool 6:  Background patterns
│       ├── scaffold-project.ts          # Tool 7:  Project scaffolding
│       ├── fetch-images.ts              # Tool 8:  3-Layer image resolution (200+ icon map)
│       ├── generate-section.ts          # Internal: Individual section generator
│       ├── generate-full-page.ts        # Tool 9:  Full page assembler
│       ├── seo-audit.ts                 # Tool 10: SEO & marketing audit (50+ checks)
│       ├── design-consistency-check.ts  # Tool 11: Multi-page consistency validator
│       ├── review-output.ts             # Tool 12: QA review & anti-pattern detection
│       ├── generate-build-manifest.ts   # Tool 13: Build report generator
│       ├── generate-content.ts          # Tool 14: LLM-powered section copywriting
│       ├── seo-fix.ts                   # Tool 15: Auto-patch SEO issues
│       └── run-pipeline.ts             # Tool 17: Full orchestration pipeline
├── CLAUDE.md                            # AI instruction file (1,278 lines of design rules)
├── package.json
├── tsconfig.json
└── README.md

19800+行TypeScript 28个源文件。

发动机是如何工作的

色彩智能引擎 (color-engine.ts)

• 15个行业色彩配置文件，带有精心策划的主/次/重点调色板
• 行业意识主题选择（游戏→ 黑暗，医疗→ 光等）
• 有色中性音阶生成（暖原色→ 暖灰色）
• 所有文本/背景组合上的WCAG AA对比度验证
• 用于确定性调色板生成的种子随机性
• 从不产生紫蓝色AI渐变

排版引擎 (typography-engine.ts)

• 按行业+色调匹配评分的10个谷歌字体配对
• 模块化比例（1.25比，通过标题显示）
• 音调感知边界半径（企业→ 清晰2-4px，俏皮→ 圆形10-14px）
• 为每个子系统生成完整的CSS变量

构件库 (component-library.ts + components-part2.ts + components-part3.ts)

• 61个精选组件，涵盖13个类别和5种视觉风格
• 风格：平面、气动、玻璃形态、渐变、动画
• CSS关键帧、弹簧测量、悬停变换、所有变体的聚焦环
• 零硬编码颜色——全部使用CSS自定义属性引用
• ARIA属性烘焙到HTML模板中

组件适配器 (component-adapter.ts)

• 将原始HTML/CSS转换为React JSX、Vue SFC、Angular组件、Svelte或vanilla HTML
• 构建设计令牌注册表（每个类别锁定一种样式）
• 自动从行业+基调（例如，公司）中解析组件风格→ 平面，游戏→ 坡度）
• 为每个组件生成可访问性审计说明

图像分辨率引擎 (fetch-images.ts)

• 3层回退：取消屏蔽API→ API Pexels→ Lorem Picsum（零配置）
• 200多个关键字到Lucide图标地图，用于功能/服务/工作原理部分
• 15个行业特定图标集（每个行业6个图标）
• 分段感知策略（英雄→ 照片、特写→ 图标、团队→ 化身）
• API响应的内存内缓存
• 摄影师归因收藏

UIverse浏览器 (explore-components.ts)

• 从UIverse GitHub仓库获取(uiverse-io/galaxy)通过GitHub REST API
• 动画检测评分（0-100）：@关键帧、过渡、变换、悬停状态
• 具有100ms API延迟的模块级缓存
• 13个类别映射到GitHub文件夹路径

______________________________________________________________________

设计理念

以下是每个输出中都包含的核心规则：

从不看人工智能生成

设计令牌注册表

注册表保证视觉一致性：

• 按钮： 最多2个变体（主要填充+次要概述）
• 卡： 1种款式，仅尺寸/内容不同
• 输入： 1种样式适用于所有字段类型
• 其他所有组件： 每个类别1种锁定样式

这反映了真实设计系统的工作原理（Material UI、Chakra、Ant design）。

默认情况下为高动画

每个组件包括：

• 悬停变换（平移Y、缩放、阴影仰角）
• 具有原色发光的对焦环
• 活动状态（按下刻度）
• 滚动触发显示的入口动画
• 环境效果（浮动、脉冲、渐变）
• 春季假期(cubic-bezier(0.34, 1.56, 0.64, 1))用于有趣的互动
• 世博曲线(cubic-bezier(0.16, 1, 0.3, 1))用于平滑入口

WCAG AA无障碍

• 所有文本/背景组合通过4.5:1的对比度
• 没有纯黑色 #000 或纯白色 #FFF --中性色向主色调着色
• 每个组件模板中的ARIA属性
• 键盘可导航交互元素
• 将指标聚焦于所有可聚焦的元素

______________________________________________________________________

支持的框架

______________________________________________________________________

支持行业

颜色智能引擎为以下内容策划了配置文件：

任何无法识别的输入默认为带有现代音调的技术。

______________________________________________________________________

路线图

核心管道（完整）：

• \[x\] analyze_project --第一阶段需求分析
• \[x\] plan_architecture --第二阶段系统设计
• \[x\] design_theme --第三阶段设计系统生成
• \[x\] explore_components --阶段3.2 UIverse实时浏览器
• \[x\] select_components --第3.5阶段组件选择
• \[x\] generate_background --第4阶段模式生成
• \[x\] scaffold_project --五期工程脚手架
• \[x\] fetch_images --第5.5阶段图像分辨率
• \[x\] generate_full_page --第6阶段代码生成
• \[x\] seo_audit --第6.5阶段SEO和营销审计
• \[x\] design_consistency_check --阶段6.7多页一致性
• \[x\] review_output --第7阶段质量保证审查
• \[x\] generate_build_manifest --最终建造报告

未来的增强功能：

• \[\]黑暗模式切换变量生成
• \[\]组件主题预览（您可以在浏览器中打开HTML输出）
• \[\]Figma导出和设计令牌同步
• \[\]组件文档的故事书集成
• \[\]灯塔绩效评分在review_output中

______________________________________________________________________

贡献

欢迎捐款。该项目的结构使您可以独立添加新组件、行业配置文件或框架适配器。

要添加新组件，请执行以下操作：

1. 添加a ComponentDefinition 进入 src/engine/component-library.ts （或 components-part2.ts / components-part3.ts)
2. 从5种风格中选择一种(flat, neumorphic, glassmorphic, gradient, animated)以及现有类别，或添加新类别 ComponentCategory 在 src/engine/types.ts
3. 确保使用所有颜色 var(--color-*) 引用（零硬编码十六进制值）
4. 集 animationLevel: 'high' 并包括悬停/聚焦/活动/入口动画
5. 将ARIA属性添加到HTML模板
6. 跑 npm run build 和测试

要添加新的行业配置文件，请执行以下操作：

1. 向添加条目 INDUSTRY_PROFILES 在 src/engine/color-engine.ts
2. 在中添加字体配对条目 src/engine/typography-engine.ts
3. 在中添加模式映射 src/engine/pattern-engine.ts
4. 在中添加别名 src/tools/design-theme.ts

要添加新的框架适配器，请执行以下操作：

1. 在中添加新的适配器功能 src/engine/component-adapter.ts
2. 将框架添加到 Framework 输入 src/engine/types.ts
3. 处理它在 adaptComponent switch语句

要添加新的图像源，请执行以下操作：

1. 在中添加fetcher函数 src/tools/fetch-images.ts （遵循Unsplash/Pixels模式）。
2. 将其添加到 resolvePhotos 备用链。
3. 将源类型添加到 ResolvedImage.source.

______________________________________________________________________

许可证

麻省理工学院——使用它，分叉它，运送它。

______________________________________________________________________

食品 --开源由 食品 团队

灵感源自 UIverse.io 以及开源设计社区