仅凭几张图片，我们是如何让 AI 自动生成 70% 可用前端代码的？

src/pages/index/├── index.tsx                    # 主页面组件├── style.module.less           # 主页面样式└── components/    ├── Header/                 # 头部组件    │   ├── index.tsx    │   └── style.module.less    └── ServiceCard/           # 服务卡片组件        ├── index.tsx        ├── style.module.less        ├── ServiceTypeSelector/  # 服务类型选择器        │   ├── index.tsx        │   └── style.module.less        ├── BenefitList/         # 福利列表        │   ├── index.tsx        │   └── style.module.less        └── SubmitButton/        # 提交按钮            ├── index.tsx            └── style.module.less

使用 imgcook 生成代码。模块链接：http://tao-d2c.fc.alibaba-inc.com/modules/621/preview；基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名，采用 css modules，组件目录包含 index.tsx、index.modules.css ，此组件放入当前 components 目录下

使用 imgcook 生成代码。模块链接：http://tao-d2c.fc.alibaba-inc.com/modules/621/preview；基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名，采用 css modules，组件目录包含 index.tsx、index.modules.css ，此组件放入当前 components 目录下
可用的移动端组件库 @alife/cook-unify-mobile 包含的常用组件- Button 按钮，- Icon 图标
请按照如下的步骤进行页面的开发1. 识别用户提供图片中的功能，和组件有相似度，询问用户是否需要组件进行开发；2. 对用户选择的组件，从node_modules中检索代码，找到了组件库的实现和定义，用来完善上下文（Icon使用PayCircleOutline、ExclamationCircleOutline、ClockCircleOutline,），然后使用结果完成代码的生成；输出

src/components/DiningBenefitsCard/├── index.tsx              # React 组件文件└── index.module.css       # CSS Modules 样式文件

1. 使用组件库组件：    ○ Button 组件：使用 @alife/cook-unify-mobile/2x 的     Button 组件实现底部"前往授权"按钮    ○ Icon 组件：使用         ■ PayCircleOutline（金色）- 餐补消费        ■ ExclamationCircleOutline（蓝色）- 员工折扣        ■ ClockCircleOutline（橙色）- 员工专享2. 语义化命名：    ○ 组件名：DiningBenefitsCard（用餐优惠卡片）    ○ CSS 类名都采用语义化命名，如：        ■ .benefitsCard - 优惠卡片        ■ .cardTitle - 卡片标题        ■ .benefitsGrid - 优惠项目网格        ■ .benefitItem - 优惠项目        ■ .authorizeButton - 授权按钮3. 设计还原：    ○ 完整还原了 imgcook 解析的布局结构和尺寸    ○ 保持了原始的颜色、字体、间距等设计细节    ○ 使用图标替换了原始的图片资源，更加语义化4. 技术实现：    ○ 使用 TypeScript 和 React    ○ 采用 CSS Modules 进行样式隔离    ○ 支持点击回调函数 onAuthorize    ○ 支持通过 props 传入额外的 classNam

[{    "type": "prompt",    "path": "./naposMarketing/snippet/story.md",    "desc": ""}, {    "type": "prompt",    "path": "../knowledge-graph/cookUnifyMobile.md",    "desc": ""}, {    "type": "prompt",    "path": "./naposMarketing/snippet/sample.md",    "desc": ""}, {    "type": "snippet",    "path": "../code-base/src/services/NaposMarketingController.ts",    "desc": "src/services/NaposMarketingController.ts 接口定义"}, {    "type": "snippet",    "path": "../code-base/src/pages/mobile/NaposMarketing/index.tsx",    "desc": "src/pages/mobile/NaposMarketing 页面示例tsx"}, {    "type": "snippet",    "path": "../code-base/src/pages/mobile/NaposMarketing/style.module.less",    "desc": "src/pages/mobile/NaposMarketing 页面示例less"}, {    "type": "snippet",    "path": "../code-base/src/pages/mobile/NaposMarketing/components/ListItem/index.tsx",    "desc": "src/pages/mobile/NaposMarketing 页面示例 组件ListItem tsx"}, {    "type": "snippet",    "path": "../code-base/src/pages/mobile/NaposMarketing/components/ListItem/style.module.less",    "desc": "src/pages/mobile/NaposMarketing 页面示例 组件ListItem less"}]

# B端Napos活动营销页
你是一个前端开发专家，擅长移动端页面开发，你需要按照如下步骤学习，然后完成开发任务，生成一个活动营销页的页面的代码。1. 理解移动端常见营销页面的结构2. 学习案例中的示例代码3. 从需求中提取功能信息4. 要求用户按照规格输入需求和接口，参考案例，按照如下条件生成代码   4.1 理解本篇文档中的知识图谱，看饿了么中后台 App 组件库中哪些组件可以被用于需求开发，询问用户需要使用哪些组件，依次用于开发   4.2 使用@alife/cook-unify-mobile组件库
## 营销页面的结构
典型的B端/Napos的营销页面，多卡片信息呈现，包含1）若干个卡片呈现，默认展示限定条数，如果超出限定条数，可以进行展开其余部分2）提交区域，包含用户提供的协议，提交按钮