AI前端编程自动生成页面

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

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

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

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

# 移动端首页

## 1. 顶部导航区
- 顶部导航栏高度：90px
  - 左侧：地区下拉选择框，数据绑定
  - 中间：搜索框

## 2. 焦点轮播区
- 焦点轮播区高度：250px
  - 自动轮播 Banner（3-5 张）
  - 左侧浮动按钮：返回顶部

## 3. 快捷入口区（宫格）
- 快捷入口区高度：120px
- 水平布局5个按钮，每个按钮可以点击跳转
  - 图标，大小40px
  - 文字，14px，加粗

## 4. 公告区
- 公告区高度：120px
- 左侧：小喇叭图标
- 中间：公告标题，多条滚动，数据绑定
- 右侧：更多图标

## 5. 服务专区
- 服务专区高度：120px
- 标题：服务专区
- 水平布局5个区块，每个区块可以点击跳转
  - 图标，大小40px
  - 文字，14px，加粗

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

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

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

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

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