作为前端开发者，我最烦的事情之一就是把设计稿人肉翻译成代码。Figma稿看起来漂亮，导出后要么是一堆散乱的 SVG。要么是切图，真正可用的代码还得自己写。这种重复劳动导致进度拖慢、错误率上升，而且经常出现设计与实现不一致的情况。说起来，

2026 年。MCP协议的出现改变了这个局面。这篇文章从技术视角详细说明 GemDesign 的 MCP 服务。展示如何从原型直接生成可运行的工程代码，并在每一步嵌入前端开发者常见的痛点及解决思路。

MCP是大模型间通讯的开放协议，由 Anthropic 提出。它定义了一套标准接口，让不同的 AI 服务可以互相调用能力。 实现「模型即服务」的环境。

GemDesign 基于 MCP 协议提供了三个主要工具：

// 获取应用下所有页面列表
interface ListPagesParams {
appuuid: string;}
// 获取页面完整 HTML 源码
interface GetPageContentParams {
appuuid: string;pageuuid: string;}
// 下载资源文件
interface DownloadAssetParams {
再看url，string;destination: string;}

架构设计关键点：GemDesign 输出的是通用 HTML，而非固定代码。这代表着 AI Agent 可以根据项目需求。智能适配任意技术栈和组件库，解决主要问题「只能生成单一框架」的问题。

二、为什么通用 HTML 比直接输出代码更好？

直接输出代码的问题

以 v0.dev 为例，它直接输出 React 代码。但存在以下限制：

• 技术栈固定：只能生成 React，无法满足 Vue、Svelte 等团队需求。
• 组件库固定：默认绑定 shadcn/ui，导致样式程序冲突。
• 代码规范受限：难以遵循公司内部 lint / architecture 规范。
• 增量更新困难：原型迭代后必须手动对比、修改代码。

通用 HTML 的优势

GemDesign 原型 → 通用 HTML → AI Agent 解析 → 任意技术栈代码

三、实战：从原型到 React 项目

原型设计

在 GemDesign 中使用「文生界面」快速描述后台：

- 侧边栏导航
- 顶部栏
- 主内容区包含使用者列表表格和筛选条件
- 使用者详情页和编辑弹窗
- 风格：深蓝色主题。
8px 圆角，轻微阴影

The prompt 自动生成了四个页面：使用者列表页、使用者详情页、权限管理页、数据统计页。

MCP 配置

在 Cursor 项目根目录创建 MCP.json 并写入：

{
"mcpServers": {
"gemdesign": {
"command": "npx","args":
}
}
}

代码生成指令示例

# 使用 GemDesign Project Builder。还原 appuuid 为 "xxxx" 的项目，目标技术栈 React + Ant Design
npx cursor mcp call gemdesign generate --appuuid xxxx --stack react --ui antd

A I Agent 执行流程如下：

1. 调用 /list_pages 获取页面列表；
2. 遍历页面并调用 /get_page_content 获取每个页面完整 HTML；
3. L​ayer‑1 DOM 解析，识别结构化 UI 元素；其实，
4. D​ata‑driven 映射至 Ant Design 对应组件；按理说，
5. T​ypeScript 类型自动抽取；其实，
6. C​all /download_asset 下载图片/图标等资源；
7. E​xport 完整项目文件结构。

生成的项目结构

my-app/
├── src/
│ ├── components/
│ │ ├── UserTable.tsx
│ │ ├── UserDetail.tsx
│ │ ├── PermissionTree.tsx
│ │ └── StatChart.tsx
│ ├── pages/
│ │ ├── UserList.tsx
│ │ ├── UserDetail.tsx
│ │ ├── Permission.tsx
│ │ └── Dashboard.tsx
│ ├── types/
│ │ └── index.ts
│ └── styles/
│ └── me.ts
├── package.json
└── tsconfig.json

生成的关键代码片段

# TypeScript 类型定义：

interface UserData {
至于id，string;name: string;email: string;role: 'admin' | 'editor' | 'viewer';lastLogin: string;怎么说呢，status: 'active' | 'inactive';}
interface TableColumn {
title的观点是，string;怎么说呢，dataIndex: keyof UserData;key: string，render?: => React.ReactNode;说起来，}

# Ant Design 表格映射示例：

import { Table。Tag } from 'antd';import type { ColumnsType } from 'antd/es/table';const columns: ColumnsType =;export default function UserTable {
const = useState;// TODO：业务层面自行补充 API 调用
return 
}

四、多技术栈生成测试对比实验