5.3 案例 2：使用 MCP 实现 AI 网页生成器

本节内容，我们通过一个具体的例子，来讲解 MCP 服务器在 AI 辅助编程场景的应用。

AI 辅助编程 2024 年下半年开始大火，出现了 Cursor、Bolt、Replit 等代表产品，帮助用户通过自然语言来驱动 AI 编程，让很多没有编程基础的用户，也做出了自己的产品。

在开始正式内容之前，先来介绍一下我做过的两个 AI 辅助编程产品：

Pagen

Pagen 是我在 2024 年 8 月份发布的一个 AI 辅助编程产品，定位是：AI 落地页生成器。核心功能是根据输入的产品名称与描述内容，生成落地页代码，并自动部署上线，给到用户一个可公开访问的网址。

图：Pagen 产品官网

Pagen 为零编程基础的用户（比如电商卖家）提供了很大的便利，可以在几分钟之内，为自己的产品生成一个宣传网页。

CopyWeb

CopyWeb 是我在 2025 年 2 月份发布的一款 AI 辅助编程产品，定位是：网页设计转代码工具。核心功能包括复刻指定网页的设计风格、通过图片生成网页组件、Figma 设计稿转代码、一句话生成原型图等。

图：CopyWeb 产品官网

CopyWeb 发布之后，受到了产品经理、设计师、前端工程师的好评，通过 AI 将网页设计转换成代码组件，在社区内共享复用。大大提升了产品原型设计与前端开发的效率。

在本节内容，我们主要讲解如何通过 MCP 服务器来辅助编程，实现与 Pagen、CopyWeb 两款产品类似的功能：一句话生成网页、Figma 设计稿转网页。

5.3.1 需求分析

分析目标产品的功能，我们可以看到，Pagen 生成网页的功能比较简单，只需要提供产品的名称、描述和关键词，指定输出语言即可通过 AI 生成落地页。

CopyWeb 相对而言功能更加全面，一句话生成网页的输入内容跟 Pagen 类似，我们主要关注 CopyWeb 的 Figma 转代码功能，输入 Figma 文件地址，即可通过 AI 生成网页代码。

我们选择以下两个功能，来分析实现的思路和步骤：

通过提示词生成网页

用户在大模型客户端输入对要生成网页的要求，大模型客户端通过 MCP 服务器获取补充内容，再请求大模型生成代码，最后大模型客户端通过 MCP 服务器把代码部署上线，给到用户一个可访问的地址。

要实现这个需求，我们需要准备：

一套用于生成网页的提示词模板
代码输出稳定的大模型（比如：deepseek-coder），用于生成目标代码
一个可以把代码部署上线的 MCP 服务器
可选：一个可联网查询的 MCP 服务器，为用户要生成的网页补充内容

通过 Figma 设计稿生成网页

整体交互流程跟通过提示词生成网页类似，额外需要：

一个 MCP 服务器，用于读取 Figma 设计稿地址对应的内容和图片
支持视觉理解且代码输出稳定的多模态大模型（比如：claude-3.7-sonnet），用于理解设计稿图片，然后输出代码

需求分析清楚之后，接下来我们就着手来实现。

5.3.2 准备 MCP 服务器

在实现 AI 编程助手之前，我们先准备需要用到的 MCP 服务器。用到的工具包括：

关键词联网搜索
部署代码获得访问地址
读取 Figma 设计稿内容和图片

在 MCP.so 平台通过关键词搜索，可以找到一些包含目标工具的 MCP 服务器。

关键词联网搜索

在 5.3 小节中，我们使用 Tavily MCP 服务器来实现联网搜索。这一次我们可以换一个联网搜索的 MCP 服务器，对比一下不同的联网搜索工具的搜索效果。

我们选择 Perplexity MCP 服务器来实现本次的联网查询需求。

图：Perplexity MCP 服务器

参考文档说明，先完成此 MCP 服务器的配置：

在 Perplexity 账户中心创建 API 密钥

配置 Perplexity MCP 服务器

在 Cursor 的 MCP 配置文件中，添加 Perplexity MCP 服务器的配置：

{
  "mcpServers": {
    "perplexity-ask": {
      "command": "npx",
      "args": ["-y", "server-perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

图：Perplexity MCP 服务器配置

调试联网搜索

在 Cursor 配置好 Perplexity MCP 服务器之后，可以看到此服务器提供了一个 perplexity-ask 工具，用来联网搜索后回答用户的提问。

在 Cursor 对话面板，我们明确指定使用 Perplexity 查询信息，来调试 Perplexity MCP 服务器的联网查询工具。

图：Perplexity MCP 服务器调试

可以看到，Perplexity MCP 服务器联网查询信息后，回复用户的提问，给到了准确的信息。初步满足我们为指定产品查找关联信息的需求。

部署代码获得访问地址

我们选择腾讯发布的 EdgeOne Pages MCP 服务器来实现代码部署需求。

图：EdgeOne Pages MCP 服务器

参考文档说明，先完成此 MCP 服务器的配置：

此 MCP 服务器没有鉴权参数，直接配置即可使用。

配置 EdgeOne Pages MCP 服务器

在 Cursor 的 MCP 配置文件中，添加 EdgeOne Pages MCP 服务器的配置：

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}

调试代码部署

在 Cursor 中配置好 EdgeOne Pages MCP 服务器之后，可以看到此服务器提供了一个 deploy-html 工具，用来部署代码。

在 Cursor AI 对话面板，调试 EdgeOne Pages MCP 服务器的代码部署工具，如图所示：

图：EdgeOne Pages MCP 服务器调试

可以看到，EdgeOne Pages MCP 服务器能够部署 AI 生成的 HTML 代码，并且返回一个可以公开访问的网页地址。初步满足我们实现 AI 编程助手最后一步部署代码的需求。

读取 Figma 设计稿内容和图片

我们选择 Figma MCP Server 来实现读取 Figma 设计稿内容和图片的需求。

图：Figma MCP Server

参考文档说明，先完成此 MCP 服务器的配置：

配置 Figma Access Token

在 Figma 平台，依次点击左上角的用户头像 -> Settings -> Security -> Personal access tokens -> Generate new token，创建一个 Figma Access Token。

图：创建 Figma Access Token

配置 Figma MCP 服务器

在 Cursor 的 MCP 配置文件中，添加 Figma MCP 服务器的配置：

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio",
        "--figma-api-key=your-figma-api-key"
      ]
    }
  }
}

调试获取 Figma 设计稿内容和图片

在 Cursor 中配置好 Figma MCP 服务器之后，可以看到此服务器提供了一个 get_figma_data 工具，用来获取 Figma 设计稿的基本信息。和一个 download_figma_images 工具，用来下载 Figma 设计稿里的图片。

在 Cursor AI 对话面板，调试 Figma MCP 服务器的获取 Figma 设计稿内容和图片工具，如图所示：

图：Figma MCP 服务器调试

可以看到，通过 Figma MCP 服务器，我们已经能获得设计稿的详细信息，初步满足我们后面要通过设计稿转网页的需求。

在配置好这几个 MCP 服务器之后，接下来我们就可以实现 AI 编程助手的功能了。

5.3.3 通过提示词生成网页

我们来实现通过提示词生成网页的需求。用户在大模型客户端操作，整体的交互流程为：

用户在大模型客户端输入想要生成的网页，可以指明通过联网补充信息
大模型客户端通过 MCP 服务器联网查询相关的信息
大模型客户端带上联网搜索得到的内容，请求大模型生成网页代码
大模型客户端通过 MCP 服务器部署 AI 生成的代码
大模型回复网页地址给用户，用户打开预览网页

虽然 AI 大模型可以根据用户的输入提示词，直接输出代码。但为了让生成的代码可用性更高，我们需要设计提示词来添加页面样式、图片占位、响应式等方面的要求。

设计一套用于生成网页内容的提示词如下：

你是一名专注于根据用户输入内容和图片生成高质量网页代码的前端专家。

## 主要要求

1. 根据用户输入的描述、补充要求、参考信息和/或图片，生成符合要求的网页代码。
2. 用户可能会在 user message 里补充详细需求、传递设计参考、上传图片等，请综合所有信息进行实现。
3. 如果用户只用文字描述网页，可以发散性地进行创意和实现，生成美观、合理的网页结构和样式。
4. 如果用户上传了图片，并要求参考图片设计生成网页，则需对图片进行精准的像素级复刻，确保布局、配色、字体、间距等细节与图片一致。
5. 重点关注：
   - 颜色（背景、文字、边框）
   - 字体（字体、字号、字重、行高）
   - 间距（内外边距）
   - 布局与定位
   - 交互状态（hover、focus、active）

## 字符串规范

- 所有字符串使用双引号
- 字符串内双引号需转义（如："这是 \"引用\" 内容"）
- JSON 对象的 key 和 value 都用双引号
- 模板字符串嵌套双引号时需转义
- 多语言文本需正确编码

## 技术规范

- 使用语义化 HTML5 标签
- 代码整洁、易维护
- 样式全部用 Tailwind CSS 工具类
- 充分利用现代 CSS 特性（如 CSS 变量）
- 不遗漏任何 UI 元素
- 重点：
  - Tailwind 配色方案
  - 文本内容与用户输入一致
  - 布局准确，善用 flex/grid
- 交互效果全部用 Tailwind 类实现（hover:、focus:、active:、transition-、animate-）
- 图片：
  - 统一用 https://picsum.photos
  - 格式如：https://picsum.photos/400/300?random=1
  - 方图用：https://picsum.photos/200?random=2
  - 多图需用不同 random 参数
  - alt 文本需详细描述图片内容
- 不要用"// 这里添加更多内容"之类的注释，所有内容都要实现
- 所有数据（数组、对象）在 JS 代码开头定义
- 列表等重复元素用函数生成

## 响应式要求

1. 移动端优先开发
2. 针对以下断点适配：
   - 移动端：< 640px
   - 平板：640px - 1024px
   - 桌面端：> 1024px
3. 保证字体、间距、图片、布局等随断点自适应
4. 合理使用流式排版和间距
5. 各断点下都需测试

## 允许的外部资源

- Google Fonts
- Tailwind CSS: `<script src="https://cdn.tailwindcss.com"></script>`
- Font Awesome 5: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">`

> 输出的代码应为单个完整的 HTML 文件，不需要额外的格式包装或示例。

我们把提示词保存到 web.md 文件中，然后在 Cursor AI 对话框引用这个提示词文件，提出生成网页的需求，要求先联网查询信息，再生成目标网页。

大模型调度 Perplexity MCP 服务器来实现联网查询需求，由 Cursor 发起对 Perplexity MCP 服务器的调用，可以看到，在调用 Perplexity MCP 服务器的 perplexity_ask 工具多次之后，大模型获得了足够的上下文信息，才开始生成网页代码。如图所示：