AI前端编程自动生成页面
网上教程说的是链接到figma，那意味着需要改变UI和产品的工作方式，让他们放弃已经熟悉的生产力工具；而且figma收费也不便宜。
使用AI的目的是提高生产力，为了自己提高生产力而需要别人降低生产力是不可取的。
如果需要实现下图的效果，首先需要分析页面布局，告诉AI IDE应该如何生成代码
编写布局描述MD文件
方法一：手工描述页面布局
推荐：简单、可控、快捷 ， 利用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好，部分按钮、卡片识别不准确
将效果图拖拽到对话窗口，输入你想要做的事情：
这是一个移动端效果图，帮我生成提示词，放入 <index.md> 先不要生成代码，待我修改后再生成代码
还可以点击下方的提示词优化，生成更优的提示词
根据提供的移动端效果图，生成一份详细的设计提示词并保存至 <index.md> 文件中。提示词应包含界面布局结构、色彩方案、交互元素说明、排版要求及特殊设计细节等关键信息。请确保提示词内容完整且专业，能够准确传达设计意图。当前阶段仅需完成提示词文档的创建，无需进行代码实现，待提示词经过审核修改确认后，再进行后续的代码开发工作。
实现代码
输入你想要做的事情的提示词，也可以让IDE自动优化
根据 <index.md> 中的描述，生成符合项目规范的移动端代码
未经过任何修改的实现效果，耗时1个小时
- 描写布局描述问题：40分钟
- 生成代码：10分钟
- 必要的调整：10分钟
先分析、有目标、有逻辑、描述的约清楚，才能实现更好的效果
继续调整代码
选中实现有问题的区块代码，ctrl+u ,然后在输入框输入你想要继续修改的提示词
例如：
{{ activity.theme}}应该 和 报名人数{{ activity.registrationCount }}在同一行
修正后
