# 使用chrome devtools mcp将axure原型重新实现为vue页面

#### 安装chrome devtools mcp

```
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

```


#### 打开axure原型预览

#### 开始使用自然语言创建项目

- 创建空项目


```


创建一个功能完整的移动端应用项目，包含基础的应用框架结构。需实现底部导航栏功能，导航栏应包含三个主要选项卡，分别为"首页"、"列表"和"我的"。确保应用框架具备页面路由管理、状态管理基础架构和响应式布局设计，以适应不同移动设备屏幕尺寸。底部导航栏需实现点击切换页面功能，当前选中项应有明显的视觉标识，并确保在应用启动时默认显示正确的初始页面。


项目级安装`yarn`，使用yarn安装vant , vue-router ,pinia ,swiper ,crypto-js


```



#### 使用chrome devtools 打开原型页面并分析和创建对应的页面


```


使用chrome devtools mcp 打开http://127.0.0.1:32767/15.00.38/index.html


```

#### 


```

这是axure的原型预览页面，按项目要求实现这个页面到index.vue


```

```


保持现有元素和布局不变，参考@public/xvH3GTQIlVovTIZM-image-1764727739274.png 风格，对@src/views/index/index.vue 进行美化



```

```

实现我的页面


```

```

实现detail页面，当点击@src/views/index/index.vue 中的精彩活动时进行跳转，将数据共享为外部json数据

```

```

使用 Chrome DevTools MCP 打开 http://yapi.xxx/xxx，提取 `.right-content` 的 API 文档，按项目实现 API 函数，并在 XXX 区块中集成展示。


```