# 前端AI自动生成页面

网上教程说的是链接到figma，那意味着需要改变UI和产品的工作方式，让他们放弃已经熟悉的生产力工具；而且figma收费也不便宜。


使用AI的目的是提高生产力，为了自己提高生产力而需要别人降低生产力是不可取的。


如果需要实现下图的效果，首先需要分析页面布局，告诉AI IDE应该如何生成代码

[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/xvH3GTQIlVovTIZM-image-1764727739274.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/xvH3GTQIlVovTIZM-image-1764727739274.png)




#### 编写布局描述MD文件

##### 方法一：手工描述页面布局

**推荐：简单、可控、快捷** ， 利用markdown的层级标签描述清晰可见

```markdown

# 移动端首页布局大纲


## 顶部导航区
- 高度：90px
- 背景：#1589FF
- 左侧：地区下拉选择框
  - 从后端获取地区列表
  - 字体：16px，加粗
  - 颜色：#fff
- 中间：搜索框
  - 圆角：20px
  - 左侧：搜索图标
  - 右侧：清除图标

## 广告轮播区
- 高度：250px
- 3-5 张自动轮播 Banner
- 右侧浮动按钮
  - 返回顶部图标
  - 宽度：84px

## 快捷入口区
- 高度：150px
- 水平布局5个按钮，每个按钮可以点击跳转
  - 图片，大小40px
  - 文字，14px，加粗

## 公告区
- 高度：100px
- 左侧小喇叭图标
  - 大小：40px
- 中间：公告标题，滚动显示
  - 从后端获取公告列表
- 右侧：更多图标
  - 大小：40px

## 服务专区
- 高度：150px
- 标题栏：左侧图标，标题文字，右侧更多图标
- 服务项：水平布局4个卡片，每个卡片可以点击跳转
  - 背景底图
  - 左上角：图标，大小40px
  - 水平垂直居中
    - 文字：服务名称
    - 文字：数量
  - 右下角文字：“去参加”

## 党群活动
- 标题栏：左侧图标，标题文字，右侧更多图标
- 活动项：水平多条卡片，每个卡片可以点击跳转
- 从后端获取活动列表
- 活动卡片：
  - 第一行：活动标题
  - 第二行：活动内容
    - 左侧：活动图片
      - 宽度：120px
    - 右侧活动内容
      - 文明时代，爱犬圳有家
      - 幼有善育，右侧：报名人数2/10
      - 2025-01-01 10:00-12:00
      - 西丽党群服务中心
      - 地址：北京市海淀区西丽大街100号



```

##### 方法二：让IDE根据效果图自动分析，然后手工修改

**不推荐：trae的效果不如cursor好，部分按钮、卡片识别不准确**

[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/9H3ZGToQ9b1s23G1-image-1764728064068.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/9H3ZGToQ9b1s23G1-image-1764728064068.png)


将效果图拖拽到对话窗口，输入你想要做的事情：

```
这是一个移动端效果图，帮我生成提示词，放入 <index.md> 先不要生成代码，待我修改后再生成代码

```

还可以点击下方的提示词优化，生成更优的提示词

```
根据提供的移动端效果图，生成一份详细的设计提示词并保存至 <index.md>  文件中。提示词应包含界面布局结构、色彩方案、交互元素说明、排版要求及特殊设计细节等关键信息。请确保提示词内容完整且专业，能够准确传达设计意图。当前阶段仅需完成提示词文档的创建，无需进行代码实现，待提示词经过审核修改确认后，再进行后续的代码开发工作。

```

#### 实现代码

输入你想要做的事情的提示词，也可以让IDE自动优化
```
根据 <index.md> 中的描述，生成符合项目规范的移动端代码
```


[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/4i6Qi1xFLsvTGl9H-image-1764734713851.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/4i6Qi1xFLsvTGl9H-image-1764734713851.png)




#### 未经过任何修改的实现效果，耗时1个小时

- 编写布局描述文件：40分钟
- 生成代码：10分钟
- 必要的调整：10分钟

**先分析、有目标、有逻辑、描述的越清楚，才能实现还原度更好的效果**

[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/Ecmyype9s6kyfU9M-image-1764734196393.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/Ecmyype9s6kyfU9M-image-1764734196393.png)


[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/tBnxcZOZ42QQpL5b-image-1764734226494.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/tBnxcZOZ42QQpL5b-image-1764734226494.png)

#### 继续调整代码

选中实现有问题的区块代码，ctrl+u ,然后在输入框输入你想要继续修改的提示词

例如：实现与效果图不一致，活动分类与报名人数不是在同一行

[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/b5FkjaPEFcr2qOMo-image-1764735406591.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/b5FkjaPEFcr2qOMo-image-1764735406591.png)

```

{{ activity.theme}}应该 和 报名人数{{ activity.registrationCount }}在同一行

```

修正后


[![](https://iovhm.com/book/uploads/images/gallery/2025-12/scaled-1680-/eVTrLJRv2zNWxRId-image-1764735511459.png)](https://iovhm.com/book/uploads/images/gallery/2025-12/eVTrLJRv2zNWxRId-image-1764735511459.png)