---
title: "MCP 生态实战：补齐 Claude Code 的 UI 短板"
author: deletexiumu
pubDatetime: 2026-04-06T00:00:00+08:00
featured: false
draft: false
tags:
  - Claude Code
  - AI 工具
  - 教程
description: "用 MCP 生态补齐 Claude Code 做 UI 的短板：Stitch MCP 实测对比、DESIGN.md 自动生成设计约束、5 个配置踩坑解法、MCP 安全检查清单。"
---

![封面图：Claude Code 通过 MCP 连接设计工具](/blog/mcp-stitch-ui-design/01-cover.jpg)

上周用 Claude Code 写了一个数据分析后端——API、数据库、鉴权，一气呵成。然后让它生成配套的 Dashboard 前端页面。

出来的东西"能用"：数据能显示，交互逻辑没问题。但打开浏览器的一瞬间，心凉了半截——间距像是随机数生成的，配色停留在 2010 年的 Bootstrap 默认主题，卡片圆角有的 4px 有的 12px，整个页面散发着浓烈的"AI slop"气息。

改了三轮 prompt，从"请用更现代的设计风格"到"参考 Linear 的视觉语言"，效果改善有限。问题不在 Claude 的能力——它的逻辑推理是顶级的——而在于它做 UI 时缺了两样关键的东西。

## Claude Code 做 UI 的两个核心缺失

![架构图：缺失与工具对应关系](/blog/mcp-stitch-ui-design/02-architecture.jpg)

### 缺设计约束：没有 Design System 可参考

Claude 生成代码时，逻辑层面有明确的约束——API 接口定义、数据库 schema、类型系统。但 UI 层面呢？没有 Design Token 做锚点，每次生成的组件风格都可能不同。这个按钮用 `#1A73E8`，那个按钮用 `#2563EB`，都是蓝色，但放在一起就是不协调。

所谓"AI slop"的本质不是模型笨，是上下文里缺少设计规范。没有规范，模型只能凭训练数据中的"平均审美"猜，每次猜的结果都略有不同。

### 缺可视化反馈：终端里看不到渲染效果

Cursor 和 Windsurf 能在编辑器旁边实时预览 UI 变更。Claude Code 跑在终端里，看不到渲染结果。这意味着它只能"盲写"——写完一版代码，你手动刷新浏览器看效果，再用文字描述哪里不对，它再改。

没有视觉反馈循环，效率极低。你说"间距太大"，它不知道你说的是哪个间距；你说"整体感觉不够紧凑"，它只能猜着调。

### MCP 怎么解决这两个问题

MCP（Model Context Protocol）是 Anthropic 在 2024 年 11 月推出的开源协议，2025 年 12 月捐赠给 Linux Foundation。一句话概括：**让 AI 通过标准接口调用外部专业工具**。

打个比方：Claude Code 是一个全栈工程师，MCP 让它能"打电话问设计师"——不是自己硬猜，而是调用专业设计工具获取设计上下文。

生态规模：截至 2026 年 3 月，已有超过 12,000 个 MCP 服务器，涵盖数据库、浏览器、云平台、设计等 10 大类别。Claude Code 原生支持 MCP，接入具体工具需要一次性配置和认证。

## Stitch MCP：核心方案

Google Stitch 是 Google Labs 推出的 AI 原生 UI 设计平台（2026 年 3 月发布 2.0），基于 Gemini 模型。对 Claude Code 用户来说，它通过 MCP 协议提供了两个关键能力：**直接生成高质量 UI 页面**和**自动产出完整的 Design System 文档**。

### 实测：同一个 Dashboard 的对比

我用相同的需求描述分别让 Claude Code 和 Stitch MCP 生成数据分析 Dashboard。需求是：导航栏、4 个指标卡片（用户数、月活、收入、转化率）、月度收入柱状图、热门产品列表、最近订单表格。

**Claude Code 直接输出**（baseline）：

![Baseline：纯 Claude Code 输出，间距不统一、配色混乱、圆角各异](/blog/mcp-stitch-ui-design/screenshot-baseline.jpg)

间距不统一，卡片圆角各不相同（4px/12px/0/8px），蓝色混用了五个色值，阴影深浅不一，整体"能看但不耐看"。这就是缺少设计约束的典型结果。

**Stitch MCP 输出**：

![Stitch MCP 真实输出：统一的设计语言、层次分明、专业级 UI](/blog/mcp-stitch-ui-design/screenshot-stitch.jpg)

差异一目了然。配色统一、组件风格一致、间距遵循网格、卡片有层次感。但更重要的不是这个页面本身——而是 Stitch **同时自动生成了一份 DESIGN.md**。

### DESIGN.md：Stitch 最大的价值

Stitch 每次生成 UI 时，都会自动产出一份完整的 Design System 文档。这不是简单的颜色列表，而是一套包含设计哲学、组件规范和禁忌清单的专业规范。

看看实际生成的 DESIGN.md 片段：

```markdown
## Creative North Star: The Precision Curator

Core Principles:
- Dimensionality over Division: Never use lines to separate ideas.
  Use space and subtle shifts in surface tone.
- Information Density with Breathing Room: Data is dense,
  but the "canvas" is vast.

## The "No-Line" Rule
Do not use 1px solid borders to section off content.
Boundaries must be defined solely through background shifts.

## Ambient Shadows
Avoid the "drop shadow" look. Use Ambient Diffusion:
Shadow Value: 0px 8px 24px rgba(25, 28, 29, 0.06).
The shadow should feel like a soft glow, not a dark stain.
```

这份文件对 Claude Code 的价值在于：**把它放在项目根目录，Claude Code 后续生成任何前端代码时都会读取这个文件作为设计约束**。不再是"每次猜一个蓝色"，而是"按 `#1A73E8` 来，圆角 12px，不准用分割线"。

一个设计系统不只是让一个页面好看，而是让**整个项目**的所有页面保持一致。这才是 MCP 生态的真正杠杆——不是一次性生成一个漂亮页面，而是建立可复用的设计约束。

### 配置 Stitch MCP

**前提**：已有 Google 账号和 Claude Code。

```bash
# 安装 + 认证（一条命令完成 OAuth）
npx @_davideast/stitch-mcp init

# 检查配置健康度
npx @_davideast/stitch-mcp doctor
```

`init` 会自动弹出浏览器完成 Google OAuth 认证。完成后在项目根目录的 `.mcp.json` 中添加：

```json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@_davideast/stitch-mcp", "proxy"]
    }
  }
}
```

验证：在 Claude Code 中问 `"List my Stitch projects."`，应返回你的项目列表。

**已有 Google 账号**：约 5-10 分钟可跑通。**从零开始**（需创建 Google Cloud 项目）：约 15-20 分钟。

认证方式有三种：自动 OAuth（推荐，运行 `init` 即可）、API Key（设置 `STITCH_API_KEY` 环境变量，不用每小时刷新）、手动 gcloud。对大多数用户，API Key 方式最省心——OAuth token 每小时过期。

### Stitch MCP 配置踩坑实录

配置过程中踩了不少坑，按出现顺序记录如下，帮你少走弯路。

**坑 1：gcloud 命令找不到**

`init` 会提示运行 `gcloud auth login`，但终端报 command not found。原因是 init 安装了 bundled gcloud 到 `~/.stitch-mcp/google-cloud-sdk/`，但没加到 PATH。解决：

```bash
# 用完整路径执行
~/.stitch-mcp/google-cloud-sdk/bin/gcloud auth login
~/.stitch-mcp/google-cloud-sdk/bin/gcloud auth application-default login
```

**坑 2：认证成功但 init 仍报 "No authenticated account found"**

手动执行 gcloud auth 成功了，但 init 第 4 步仍然报错。原因是 stitch-mcp 运行时未使用 bundled gcloud 的 PATH。解决：先 export PATH 再跑 init：

```bash
export PATH="$HOME/.stitch-mcp/google-cloud-sdk/bin:$PATH"
npx @_davideast/stitch-mcp init
```

**坑 3：Token fetch failed / Could not obtain access token**

init 第 7 步报 `[Gcloud] Token fetch failed`。这个坑最隐蔽：stitch-mcp 使用独立的 config 目录 `~/.stitch-mcp/config/`（通过 `CLOUDSDK_CONFIG` 环境变量），而手动执行的 gcloud auth 把凭证存到了系统目录 `~/.config/gcloud/`。两边凭证不互通。解决：

```bash
# 将系统 ADC 凭证复制到 stitch-mcp 的 config 目录
cp ~/.config/gcloud/application_default_credentials.json \
   ~/.stitch-mcp/config/application_default_credentials.json
```

**坑 4：API request failed with status 403**

init 第 9 步 "Test connection" 报 403。原因是 GCP 项目未启用 Stitch API。解决：

```bash
~/.stitch-mcp/google-cloud-sdk/bin/gcloud services enable \
  stitch.googleapis.com --project=你的项目ID
# 同时启用依赖的 Firestore API
~/.stitch-mcp/google-cloud-sdk/bin/gcloud services enable \
  firestore.googleapis.com --project=你的项目ID
```

**坑 5：跨项目使用时认证失败（最坑）**

在项目 A 中 `init` 成功一切正常，切换到项目 B 后调用 Stitch MCP 报认证失败。原因是 `init` 生成的 MCP 配置是 HTTP 直连模式，Authorization header 中的值是占位符 `Bearer <YOUR_ACCESS_TOKEN>`——在 init 所在项目通过 proxy 工作正常，但其他项目读到的是占位符。

而且 OAuth token 每小时过期，即使手动填入真实 token 也会很快失效。

**解决：全局改用 proxy 模式**（强烈建议所有人都这么做）：

```bash
# 移除 init 生成的 HTTP 直连配置
claude mcp remove -s user stitch

# 改用 proxy 模式（自动管理 OAuth token，跨项目通用）
claude mcp add -s user stitch npx -- -y @_davideast/stitch-mcp proxy
```

proxy 模式通过 stdio 本地代理与 `stitch.googleapis.com` 通信，自动从 `~/.stitch-mcp/config/` 读取 ADC 凭证刷新 token，无需手动管理。

**其他注意事项**：项目目录中的 `.env` 文件可能导致 proxy 报错，需移走或重命名。修改 `.mcp.json` 后 Claude Code 可能用缓存，需要重启会话。API Key 不要提交到公开仓库。

**定价**：当前完全免费，只需 Google 账号。两档生成额度：

- **Standard 模式**（Gemini 3 Flash，适合快速迭代）：每月 350 次生成
- **Pro 模式**（Gemini 3.1 Pro，支持图片输入、高保真输出）：每月 200 次生成

对比同类工具动辄 $15-$60/月的定价，Stitch 目前是性价比最高的选择。建议趁免费阶段多试——这种额度不一定永远持续。

### Stitch MCP 的工作流

配置完成后，Claude Code 可以直接调用这些工具：

- `create_project`：创建设计项目
- `create_design_system`：定义设计系统（配色、字体、圆角等）
- `generate_screen_from_text`：从文字描述生成 UI 页面（HTML + 截图 + DESIGN.md）
- `get_screen_code`：获取页面的 HTML 代码
- `get_screen_image`：获取页面截图

典型工作流：让 Claude Code 调用 Stitch 生成页面 → 获取 DESIGN.md → 将 DESIGN.md 放入项目根目录 → 后续所有前端代码都按这个规范来。

## AIDesigner：另一个设计工具的选择

AIDesigner（aidesigner.ai）是另一个 AI 设计工具，提供了从文字描述生成 UI 的能力。

![AIDesigner 生成的 Dashboard：专业布局、导出功能、分页器等完整交互细节](/blog/mcp-stitch-ui-design/screenshot-aidesigner.jpg)

用相同的 Dashboard 需求描述，AIDesigner 也能生成质量不错的 UI 设计——统一的配色、专业的布局、中文标签支持。

### 与 Stitch 的差异

| 维度 | Stitch | AIDesigner |
|------|--------|------------|
| MCP 集成 | 原生 MCP Server，Claude Code 可直接调用 | MCP 主要用于项目管理工作流，设计生成需在官网操作 |
| 产出物 | HTML + DESIGN.md + 截图 | 免费版仅预览截图，HTML 和设计规范需付费下载 |
| Design System | 自动生成完整 DESIGN.md | 通过工作流生成设计 brief |
| 定价 | 免费（Standard 350 + Pro 200 次/月） | Free / Pro $25/月（100 credits） |
| 与 Claude Code 协作 | 无缝——直接通过 MCP 调用，产出可直接用于项目 | 需手动桥接——在官网生成后下载/截图 |

**实话说**：如果你用 Claude Code 做开发，Stitch MCP 是更顺畅的选择——因为它真正实现了"Claude Code 调用 MCP → 获取设计产出 → 继续开发"的完整链路。AIDesigner 的设计质量不差，但目前它的 MCP 集成不具备直接生成 UI 的能力，实际设计需要在 aidesigner.ai 官网手动操作，再将产出桥接回项目。

## Pluck：补充视觉参考输入

前面解决了设计约束和设计生成的问题，还有一个场景没覆盖：**你看到一个好看的网站，想让 Claude Code"照着那个风格来"**。

Pluck 是一个 Chrome 扩展（不是 MCP 工具），解决的正是这个问题。点击任意网页元素，它自动提取完整的 HTML 结构、CSS 样式（颜色、字体、间距、布局），然后根据你选择的技术栈格式化成结构化 prompt。

三步完成：浏览网站看到好设计 → Pluck 捕获组件 → 粘贴给 Claude Code 作为参考。

它支持 Alt+Click 提取 React 组件的 props、state 和 source 上下文，对 React + Tailwind + shadcn 项目尤其有用。

**与 Stitch 的配合**：Pluck 抓取的视觉参考可以融入 Stitch 的 Design System 定义——比如从 Linear 抓取配色和组件风格，在 Stitch 中创建对应的 Design System，再生成自己的页面。

**定价**：Free $0/月（50 次捕获）/ Unlimited $10/月。

## MCP 安全：装之前要知道的事

MCP 生态增长很快，但安全状况不容乐观。几组独立扫描数据：

- **AgentSeal** 扫描 1,808 个 MCP 服务器，**66% 存在安全问题**，其中 43% 有命令注入风险
- **Enkrypt AI** 扫描 1,000 个，**33% 有严重漏洞**
- 另一项对 **5,618 个**服务器的扫描显示，**仅 2.5% 通过全部基本安全检查**

主要风险包括命令注入（用户输入未做消毒直接构建 shell 命令）、供应链攻击（npm/PyPI 上的恶意包伪装成知名工具）、以及认证缺失。供应链攻击已有真实案例：2025 年 9 月，一个非官方的 Postmark MCP 服务器被悄悄修改，将外发消息副本路由到攻击者地址。

**Claude Code 的安全保护**：权限门控（MCP 工具需显式授权）、工具审批（逐工具控制）、OS 级沙箱（Linux 用 bubblewrap，macOS 用 Seatbelt，通过 `/sandbox` 激活）。但"可选"意味着你需要主动启用。

**安装 MCP 前的检查清单**：

1. 版本固定：锁定 MCP 包版本号，不用 `latest`
2. 最小权限：只授予实际需要的权限
3. 审查 `.mcp.json`：检查每个 server 的 `args` 和 `env`
4. 优先用知名维护者的包：Stitch（Google 生态，Apache 2.0）有明确来源

## 落地边界

### 适合的场景

- 用 Claude Code 做全栈项目，前端 UI 质量是瓶颈
- 需要快速建立 Design System 约束（Stitch 自动生成 DESIGN.md）
- 个人项目或早期产品，不需要设计师逐像素交付

### 不适合的场景

- 团队已有成熟的 Figma-to-code 工作流
- 公司不允许接第三方云设计服务
- 需要设计师逐像素交付的精度

### 迁移成本

Stitch 输出的 HTML 和 DESIGN.md 更适合**原型、样式对齐、设计规范建立**。从 Stitch 产出到生产代码，中间有一段手动适配的路——Stitch 产出的是设计上下文和 HTML，不是直接可用的 React/Vue 组件。但这段路比从零开始短得多。

最有价值的不是 Stitch 生成的那个页面本身，而是 DESIGN.md。这份文件作为 Claude Code 的设计约束，能让后续所有页面保持风格统一——这才是持久的收益。

## 结尾

MCP 正在改变 AI 编码工具的协作模式——从"一个模型干所有事"到"一个模型编排专业工具"。在 UI 这件事上，Claude Code 管逻辑，Stitch MCP 管设计生成和规范建立，各司其职。

但要清醒：这不是"一键变美"的银弹。MCP 工具补的是从"能用"到"够好"这段路。从"够好"到"完美"，仍需要设计功底和人工打磨。

如果只做一件事：用 Stitch MCP 生成一个页面，把它产出的 DESIGN.md 放到项目根目录。今天就能看到变化。

---

## 相关阅读

- [Claude Code 实用插件与工具分享：4 个补齐短板的工具](/posts/claude-code-plugins-tools/) — 本文聚焦 UI 短板，那篇覆盖了终端预览、文件管理等其他维度的插件
- [Claude Code 安全三道防线：从权限模式到 Hook 兜底的纵深防护实战](/posts/claude-code-safety-three-defenses/) — 本文提到 MCP 安全风险，那篇详解了 Claude Code 自身的安全机制
- [Claude Code 安装后必做的 9 项设置](/posts/claude-code-essential-settings/) — MCP 配置也是核心设置之一，那篇覆盖了更完整的初始化清单

---

*参考来源*

*Google Stitch 2.0 官方：https://stitch.withgoogle.com/*

*stitch-mcp GitHub（v0.5.3，Apache 2.0）：https://github.com/davideast/stitch-mcp*

*Google Labs Stitch Skills：https://github.com/google-labs-code/stitch-skills*

*AIDesigner 官方：https://www.aidesigner.ai/*

*Pluck 产品页：https://www.pluck.so/*

*MCP 官方文档：https://code.claude.com/docs/en/mcp*

*MCP 协议规范：https://modelcontextprotocol.io/specification/2025-11-25*

*Anthropic Claude Code 沙箱机制：https://www.anthropic.com/engineering/claude-code-sandboxing*

*AgentSeal MCP 安全扫描：https://agentseal.org/blog/mcp-server-security-findings*

*Enkrypt AI MCP 安全评估：https://www.enkryptai.com/blog/we-scanned-1-000-mcp-servers-33-had-critical-vulnerabilities*

*CoSAI MCP 安全白皮书（2026.1）：https://www.oasis-open.org/2026/01/27/coalition-for-secure-ai-releases-extensive-taxonomy-for-model-context-protocol-security/*