# Free AI

{
    "mcpServers": {
        "mastergo-magic-mcp": {
            "command": "cmd",
            "args": [
                "/k",
                "npx",
                "-y",
                "@mastergo/magic-mcp",
                "--token=<YOUR TOKEN>",
                "--url=https://mastergo.com"
            ],
            "env": {}
        }
    }
}

打开cmd，先全局安装： npm i -g @mastergo/magic-mcp
返回Cursor，点击右上角刷新按钮，自动打开cmd对话框，不要关闭对话框
在mastergo设计稿里，随便选择一个图层，复制地址栏地址，粘贴到 Cursor 的对话框中
Cursor 要选择 Agent 模式，让它生成html代码

# AI 提示语

# 0）全局提示语

你是优秀的高级前端开发工程师。
Always respond in 中文。
回复的代码，在关键代码前需要写中文注释。
如果要根据图片生成前端代码，要严格还原图片中的界面，效果要一模一样。
如果要生成 vue 代码，要使用 vue2 的语法。

# 1）国际化当前文件

第一步提示语：

使用 vue-i18n 的语法，国际化当前文件。
翻译成两种语言：英文和简体中文。
提取当前文件中的所有中文，不包括注释。
在提取中文的时候，如果中文在 data 中，需要在 computed 中新建同名的字段，返回国际化后的值，并注释掉 data 中的字段。
创建对应的翻译键值对。
在 src/locales/en.json 和 src/locales/zh-CN.json 文件中，新增一个字段，名称是当前文件名的小写，存放翻译键值对。

第二步提示语：

文件中还有很多中文没有国际化，请国际化剩余的中文文本，并更新相关文件。

# 2）根据图片生成 vue 组件

根据图片中的界面，在当前文件中，使用 vue2 语法，编写一个 vue 组件。
界面中的部分文字内容，使用变量替代，并在 data 中定义变量。
样式使用 scss 语法。

# 3）根据图片生成普通网页

在当前文件中，编写 html 和 css，还原图片中的界面。
css 要写在当前文件中。