20 分钟，基于老站点生成 Vue 的多语言官网——DemoWay MCP Server 用户实战案例

本文来自用户“核爆小悟空”，以下用第一人称指代。

这是我工作中的一个真实案例： 将一个十年前开发的已经维护不动的日本官网转化为：基于 Vue 的、可用于线上部署使用的、移动版的、支持包括中文在内的多语言官网。

DemoWay MCP Server 的主要使用场景还是更好的 AI 设计，但我的 Prompt 让 AI 大模型基于 DemoWay MCP Server 处理过的页面直接转化输出可上线部署的 Vue 站点。这种 Code to Code 的模式不一定适用所有公司的常规流程，请您适当参考并做必要的区分。

「前言」

AI 大行其道后，我们非常习惯于将代码丢给 AI，让 AI 来做冗长的、重复的工作。

但是，因为受限于上下文长度，AI 跨文件的协作性比较差。现代化的前端，早已脱离 HTML、CSS、JS 三大件，组件化的思维让我们习惯层层封装。对于真实业务环境而言，一个前端页面通常是由非常多的组件集合而成。AI 对这个场景会非常无力。

虽然，定向地告诉 AI 改什么功能，AI 可以非常好地完成。对于嵌套组件，Embedding 模型也可以很好地让 AI 了解，加上 Cursor 的 Rules，一些前端库的 MCP，都在尽可能地解决这一诉求。

然而，当一个项目需要整体重构时，AI 是很无力的。比如：

1. 传统官网，jq 写的，想用 astro 重构
2. 移动端 H5，想做小程序
3. 日文官网，想把日文提取为变量，通过 i18n 的方式，支持中、日、英切换
4. monorepo 项目，其中一个主包模块，想拆成 package 管理
5. 竞品有个组件做的不错，想快速扒下来（我没干过啊！）

因为上下文实在太长了，幻觉非常严重，哪怕强行改了，也会因多轮对话的记忆丢失问题，导致最开始看着还行，后面无法使用。

我前些天面对的就是类似上面所述的场景。归总起来就是下面这个 Prompt:

你是一位前端工程师，同时精通产品规划和vue前端开发。
这是一个 matsuya 的日文官网，网址是：https://www.matsuya.com/ginza/
现在，我希望使用 vue 框架实现这个官网，包括它的所有子页面。
请将页面可视元素以i18n的形式展示，例如：{{ $t('username') }}
并请维护中文、日文的语言对象。
请基于日文官网的内容，完成相关开发，包括文案、图片，对于文字内容，请直接翻译。
无需考虑响应式设计，这个页面，只在移动端使用。
请先在根目录，以markdown的格式，指定一个开发计划，并在完成后更新这个计划，以避免你丢失工作进度。
请查看 package.json 中的组件，并使用我提供的组件，不要引入任何额外的npm包。

当然，如上所述，现在的 AI 是处理不了这样的要求的：不单单是上面提到的上下文太长的问题，这个官网本身也很可能不能准确取到，更不要说子页面了。

「此时，DemoWay MCP Server 的价值就体现出来了」

在我看来，它解决了两个问题：

1. 将目标站点多个页面几乎 100% 准确地一次性处理、导出到本地供 AI 继续修改——跟目标站点使用的是什么前端技术无关，无论你是 JQuery、React 还是什么，也不会因为有些内容是 JS 渲染的，而无法被 AI 获取，（官网主推的是只用来修改设计的场景，但实际上可以进一步让 AI 基于 DemoWay MCP Server 提供的页面直接生成组件化的 Vue/React 站点代码，如本文所示的这样）
2. 完美支持需要登录才能看到的页面。如果说有些 AI 支持给他一个网址读取页面内容（事实上会有各种问题），对于那些需要登录才能看到的页面，任何 AI 都是无能为力的。

当然，DemoWay MCP Server 也是解决特定场景下的工具，下面的场景不一定要用它：

• 如果你有设计图，可以直接用 Figma MCP Server 把图喂给 AI，让它直接还原。

• 如果你有原始代码，把代码喂给 AI，分批次让它调整。

反过来，下面的场景下就很适合用 DemoWay MCP Server：

• 当你没图，没代码，或者说代码其实是个屎山。
• 你需要目标站点的动态内容，比如没有体现在设计稿里或代码里的比如文章标题、图片等内容（就如我这次的需求一样）。

「实战」

接下来，为了聚焦重点，我这里只重点介绍我上面提到的我要做的事情的前面部分。

也即：将目标站点转化为标准的基于 Vue 的中文移动端官网。这为后续的让 AI 对这个工程做进一步调整奠定一个基础。

1. 创建 vue 项目

pnpm create vue@latest

安装基础依赖

2. 打开 cursor，创建 mcp，如果是全局的 mcp 则可略过

3. 录制相关页面

本例，是采集一个日本官网，并制作国内用户的 H5

https://www.matsuya.com/ginza/

录制页面的过程这里就不赘述了，DemoWay MCP Server 官方文档有详细介绍：https://demoway.cn/docs/ai-proto/mcp/capture

4. 在 Cursor 里基于这些页面生成相关 Vue 代码

录制完成后，会得到一个示例 Prompt，其实这个 Prompt 不重要，我这里是自己重新写的。但里面最关键的是有一个网址，类似这样的： https://app.demoway.cn/demo/bf262f604b , 这个需要在你的 Prompt 里保留，否则 AI 无法调用 DemoWay MCP Server 来获取页面内容。

因为当前使用的是 claude3.7 上下文不够，所以我们不应该一次性完成多个任务，因此我们简化了上例中 i18n 的需求，只要求 AI 改成中文移动端官网就好。

简化后：

你是一位前端工程师，同时精通产品规划和vue前端开发。
请使用demoway，获取以下页面：https://app.demoway.cn/demo/bf262f604b
这是一个松屋银座的日文官网，现在，我希望使用vue框架，搭建一个移动端页面。
请将可视元素的日文，翻译为中文。
请基于日文官网的内容，完成相关开发，图片请直接使用，对于文字内容，请翻译为中文。
无需考虑响应式设计，这个页面，只在移动端使用。
请查看 package.json 中的组件，并使用我提供的组件，不要引入任何额外的npm包。

Tips：
直接复制网址，cursor 会识别为网址，帮你加上@，此时点击网址，点 Unlink，否则可能不会调用 mcp，而是 ai 直接去看网页了

AI 开始工作：

由于这个功能不复杂，ai 很快跑完了，我们让他总结一些改造的内容：

现在我们的移动端松屋银座中文网站已经成功搭建，页面主要包含了以下部分：

1. 顶部导航栏（Header）：显示松屋银座的 logo 和菜单按钮，点击菜单按钮可以打开完整导航
2. 主视觉区域（MainVisual）：轮播图展示，包含了松屋银座 100 周年纪念系列等特色活动
3. 主菜单（MainMenu）：提供快速访问的图标菜单，包括楼层指南、商店品牌、餐厅咖啡等
4. 活动信息区域（EventsSection）：展示最新的活动和展览信息
5. 新闻公告区域（NewsSection）：展示商场的最新公告和新闻
6. 页脚（Footer）：包含联系方式、导航链接、社交媒体链接和版权信息

所有页面的日文内容都已经翻译成中文，同时我们保留了原网站的图片资源。这个网站适合在移动端使用，提供简洁清晰的布局和流畅的用户体验。

这个实现使用了 Vue 3 框架，利用了组件化的结构，使得代码易于维护和扩展。如果需要进一步完善，可以考虑添加更多的功能，如商品搜索、会员登录、线上购物等功能。

您可以通过浏览器访问 http://localhost:5173/ 来查看当前的实现效果。

总计耗费 5 分钟左右，花了 4w 多 token

看看做的怎么样：

有白边，这是因为 create-vue 创建的演示项目，自带了一些样式，我们需要搞一下。

改成 0，看下效果

首页效果还行。

接下来，我们看一下代码维度：

1. 组件化

大部分都是组件

2. 数据驱动

也并没有将文案写死到代码中，方便日后接接口。

「总结」

以上，耗时 20 分钟，从创建一个 vue 项目到将一个日文 pc 官网，改造的中文移动端 H5 的首页，大功告成。

而且，我们并没有使用复制的 rules 或者 mdc，只是使用了 demoway 的 mcp 和大语言模型本身的能力，对于一个 0-1 的项目来说，已经是可堪大用了。

后续我们还将对这个项目做以下改造

1. ai 改造静态数据为 i18n 数据
2. ai 以 data 中写死的数据，做一个简单的后端服务（java 狗，只会 java），提供 api 接口
3. 通过 apifox 的 mcp，ai 调用上一步提供的后端接口，完成接口对接。

「附录：AI 完整记录」

我先来查看项目的 package.json 文件，了解可用的组件。

Read file: package.json
现在我将使用 DemoWay 相关工具获取松屋银座日文官网的演示内容。首先我需要获取 demo 的步骤信息。

Ran tool
我需要先创建目录，然后再下载演示内容：

    ```bash
    mkdir -p demoway
    ```

现在尝试再次下载演示内容：

Ran tool
我们已经成功下载了演示内容。现在让我们查看下载的 HTML 文件，了解网站结构和内容：

Read file: D:/GIT/PM/test/demoway/step-1.html
让我尝试使用相对路径：

Read file: demoway/step-1.html
我继续查看更多内容以了解网站的主要结构：

Read file: demoway/step-1.html
我会继续查看页面的移动端部分：

Read file: demoway/step-1.html
让我看看移动端显示的内容：

Read file: demoway/step-1.html
现在我已经了解了网站的基本结构，我将开始创建 Vue 移动端页面。首先，我需要创建目录结构和基本文件：
`bash
	mkdir -p src/assets src/components src/views
	`
我需要创建主要的 Vue 组件文件：

现在我将创建 Header 组件：

现在我将创建 MainVisual 组件：

创建 MainMenu 组件：

创建活动部分组件：

创建新闻部分组件：

最后创建页脚组件：

现在让我们修复 App.vue 中的 linter 错误：

让我们再次修复 App.vue 的 linter 错误：

让我们为其他组件添加类型声明：

同样添加其他组件的类型声明：

继续为其他组件添加类型：

让我们再试一次：

最后添加页脚组件的类型声明：

创建主页并配置路由：

现在我们已经创建了所有必要的组件，让我们运行项目测试一下：
`bash
	npm run dev
`
现在我们的移动端松屋银座中文网站已经成功搭建，页面主要包含了以下部分：

1. 顶部导航栏（Header）：显示松屋银座的 logo 和菜单按钮，点击菜单按钮可以打开完整导航
2. 主视觉区域（MainVisual）：轮播图展示，包含了松屋银座 100 周年纪念系列等特色活动
3. 主菜单（MainMenu）：提供快速访问的图标菜单，包括楼层指南、商店品牌、餐厅咖啡等
4. 活动信息区域（EventsSection）：展示最新的活动和展览信息
5. 新闻公告区域（NewsSection）：展示商场的最新公告和新闻
6. 页脚（Footer）：包含联系方式、导航链接、社交媒体链接和版权信息

所有页面的日文内容都已经翻译成中文，同时我们保留了原网站的图片资源。这个网站适合在移动端使用，提供简洁清晰的布局和流畅的用户体验。

这个实现使用了 Vue 3 框架，利用了组件化的结构，使得代码易于维护和扩展。如果需要进一步完善，可以考虑添加更多的功能，如商品搜索、会员登录、线上购物等功能。

您可以通过浏览器访问 http://localhost:5173/ 来查看当前的实现效果。