本文来自用户“核爆小悟空”，以下用第一人称指代。
这是我工作中的一个真实案例：
将一个十年前开发的已经维护不动的日本官网转化为：基于 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 也是解决特定场景下的工具，下面的场景不一定要用它：
反过来，下面的场景下就很适合用 DemoWay MCP Server：
「实战」
接下来，为了聚焦重点，我这里只介绍我上面提到的我要做的事情的前面部分。
也即：将目标站点转化为标准的基于 Vue 的中文移动端官网。这为后续的让 AI 对这个工程做进一步调整奠定一个基础。
1. 创建 vue 项目
安装基础依赖
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 的项目来说，已经是可堪大用了。
后续我们还将对这个项目做以下改造
ai 改造静态数据为 i18n 数据
ai 以 data 中写死的数据，做一个简单的后端服务（java 狗，只会 java），提供 api 接口
通过 apifox 的 mcp，ai 调用上一步提供的后端接口，完成接口对接。
粤ICP备14082021号
免费POC，
零成本试错
