Claude Code前端项目开发准备工作

Demo

94b19ffca784ae0653680f076ffd1ecb_compress(1).jpg

安装plugin（Skill）

启动claude code后终端执行命令/plugin 搜索安装

• superpowers （强烈推荐，技能拉满）
• frontend-design
• code-review
• figma （需要授权，执行/mcp list 选择figma去授权）

Snipaste_2026-04-16_10-32-48.png

安装MCP

1. playwright增强BUG修复

playwright官网

claude mcp add playwright npx @playwright/mcp@latest

2. MasterGo

https://github.com/mastergo-design/mastergo-magic-mcp
前提需要你在masterGo中是研发席位

获取 MasterGo API Token 的步骤：

• 1. 登录 https://mastergo.com
• 2. 进入「个人设置」→「点击“安全设置”选项卡」→「找到个人访问令牌」
• 3. 创建/复制一个Token

添加 MasterGo MCP方式：全局配置（对所有项目生效）

全局生效

编辑 C:\Users\用户.claude.json，在其中添加 MCP 服务器配置。
.claude.json

{
  "mcpServers": {
    "mastergo": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@mastergo/magic-mcp"
      ],
      "env": {
        "MASTERGO_API_TOKEN": "你的token",
        "API_BASE_URL": "https://mastergo.com"
      },
      "type": "stdio"
    }
  },
}

当前项目生效

项目根目录创建
.mcp.json

{
  "mcpServers": {
    "mastergo": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@mastergo/magic-mcp"
      ],
      "env": {
        "MASTERGO_API_TOKEN": "你的token",
        "API_BASE_URL": "https://mastergo.com"
      },
      "type": "stdio"
    }
  }
}

配置好重启 Claude Code 后再用 /mcp list 应该就能看到 mastergo 了

Snipaste_2026-04-23_10-26-52.png

使用MasterGo MCP生成前端代码

• 1.发送解析指令：

请通过 MasterGo MCP 读取这个设计稿：[粘贴你的 MasterGo 链接]
解析所有设计参数：颜色、字体、间距、尺寸、圆角、阴影、自动布局、图层结构

• 2.复制以下指令，替换技术栈即可：

基于上面解析的 MasterGo 设计稿，生成【可直接上线的生产级前端代码】，严格遵守：
1. 技术栈：React 19 + TypeScript + Tailwind CSS
2. 规范：组件化、语义化、TS类型校验、可复用
3. 样式：1:1像素级还原设计稿，精准匹配所有颜色/间距/字体/阴影
4. 响应式：适配移动端+桌面端
5. 输出：完整代码文件 + 注释 + 使用说明

Coding命令行记录：

Snipaste_2026-04-16_10-43-11.png

94b19ffca784ae0653680f076ffd1ecb_compress(1).jpg