我要投稿

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

发布日期：2025-05-14 12:05:47 浏览次数： 1529 作者：DemoWay CN

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

这是我工作中的一个真实案例：

将一个十年前开发的已经维护不动的日本官网转化为：基于 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 是很无力的。比如：

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

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

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

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

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

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

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

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

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

如果你有设计图，可以直接用 Figma MCP Server、MasterGo 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/ 来查看当前的实现效果。