本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com
阿里妹导读
本文系统总结了在仅有 UI 图片、无设计稿和交互说明的情况下，如何通过 AI 技术实现高质量前端代码自动生成。
一、需求图片
开局一张图需求，前端先行！
对于一个仅提供几张图片没有任何 Sketch 文件和设计稿的前端开发需求，我们尝试使用 AI 技术来生成代码。
看下来非常合适用 AI 出码，分别尝试使用不同方式出码：
二、imgcook + Agent 智能出码方案演进
基于 imgcook 插件 + Aone Agent，结合 mcp 服务调用智能产出代码。
通过三个阶段的优化，将代码可用度从基础 Agent 出码的 40% 提升至最终的 70%。
核心改进包括：引入 imgcook 提升设计稿还原度，集成 @alife/cook-unify-mobile 组件库实现 Button 和 Icon 等组件的自动识别和调用。
2.1 使用 IDE 直接读取图片进行开发
2.1.1 输入
图片示例
详细信息
模式：Agent
模型：Claude-4-Sonnet 外部模型多模态
上下文：
/src/pages/index/index.tsx
/src/pages/index/style.module.less
图片：
2.1.2 输出
描述
组件结构
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.less2.1.3 实际出码
2.1.4 效果图
2.2 调优过程
主要针对以上两个痛点（改进点）来进行调优，具体过程如下所示。
2.2.1 解决设计稿的还原度的问题 - imgcook
Tips：
在开发过程中，找到历史设计稿中有一小段内容和本次一样，于是使用历史设计稿中这个小模块继续探索；
除了这个有历史设计稿的小模块之外，以下截图其他设计稿内容是人工还原；
使用 imgcook
点击复制提示词，imgcook 产物 Prompt：
使用 imgcook 生成代码。模块链接：http://tao-d2c.fc.alibaba-inc.com/modules/621/preview；基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名，采用 css modules，组件目录包含 index.tsx、index.modules.css ，此组件放入当前 components 目录下使用 Agent 调用 mcp 服务
将以上产物 Prompt，复制到 VSCode 中，使用 Aone Agent 插件的 Agent 功能，输出产物效果图，点赞👍，非常好！
但是还有一个问题就是没有使用现有资产组件库，继续调优。
2.2.2 解决没有使用已有组件物料的问题
组装 Prompt
使用 imgcook 产物 Prompt，再结合自己组装的 Prompt，整理成以下提示词：
使用 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,），然后使用结果完成代码的生成；输出大模型产物
分析过程：
使用 codebase_search 工具，在 node_modules 中搜索组件的代码实现：
创建的组件结构：
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 传入额外的 classNamIcon 和 Button 使用方式：
- 检索代码后：
a. 能学习到 Icon 的正确使用方式；
b. 并且知道通过 color 指定颜色；
- 检索代码后：
a. 能学习到 Button 的正确使用方式；
b. 并且知道通过 block、color、size 等使用方式；
代码和效果图
|
2.3 输出
2.3.1 技术实现亮点
使用 TypeScript + React + CSS Modules；
语义化组件命名（如 DiningBenefitsCard）；
支持组件 API 正确传参和配置；
实现了从 40% 到 70% 的代码可用度提升；
2.3.2 三种形式出码效果图对比
Agent 出码
Agent 出码 + imgcook 插件 (mcp 服务调用)
Agent 出码 + imgcook 插件 (mcp 服务调用) + 组件库 (codebase)
结论
三、剧本出码
3.1 剧本介绍
一句话理解：把开发过程中需要的一块块砖，比如组件库，比如开发规范，比如接口元数据，准备好一个 story.md，把这些串联在合适的位置，让大模型理解，再产出我需要的代码！
3.2 剧本开发过程
3.3 创作剧本
比较艰难的一个过程，要不断的调优，不断根据大模型的反馈调整提示词，但是好在只需要做一次，后续可以重复使用剧本，这也是剧本的魅力！
‼️ 核心过程：让大模型模仿人类的写代码行为，给 ta 示例，能让这个过程事半功倍！
核心物料
需要让大模型做什么：story.md；
组件库：cookUnifyMobile.md；
例子：sample.md；
示例代码：把示例代码当作一部分，让大模型学习并仿写；
config 文件，会从上到下组装所需要的物料
[{
"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）提交区域，包含用户提供的协议，提交按钮剧本
呈现形式：md 文件，包含组装好大模型能理解的提示词。
3.4 使用剧本
下面演示一下非开发者，更容易上手的一种方式，只需三步，这里做简单的步骤演示：
1.Step1：打开 metaStack 官网，新建前端出码开发任务，选择你的产品；
2.Step2：上传你的需求原型图片，并且上传需求业务描述；
3.Step3：生成出码提示词；
3.5 剧本应用实践
剧本生成代码优势
快速构建上下文：能够通过剧本编排和任务执行，快速构建出码所需上下文；
高效产出：几分钟即可产出 5 个文件变更，新增 379 行代码，代码可用度达到 80%；
一次性投入，重复使用：剧本创作虽然艰难，需要不断调优和调整提示词，但好在只需要做一次，后续可以重复使用剧本；
模仿人类编程行为：让大模型模仿人类的写代码行为，通过示例让开发过程事半功倍；
结构化开发：把开发过程中需要的组件库、开发规范、接口元数据等准备好，通过 story.md 串联在合适位置；
效果图
大模型代码产物
3.6 结论
此前我们使用的 Agent 出码配合 imgcook 插件（mcp 服务调用）和组件库的综合方案表现已经相当优秀，代码可用度达到 70%。然而，当我们引入剧本出码模式后，发现这一方案能够将代码可用度进一步推高至 80%，虽然在使用便捷性上需要权衡，但整体开发效果确实更胜一筹。说明在追求更高质量代码生成的道路上，总有更优的解决方案等待发现！
四、感悟
不要排斥新事物，尝试去接受，过程和结果都会给你惊喜！之前我还不知道 agent 究竟是什么东西，现在通过不断的调优过程，慢慢发现了大模型的无边能力。
勇于探索：从尝试到调优的实践过程中，Agent 使用、mcp 调用、codebase 召回等新知识点逐步串联成完整的知识图谱，让我触及更广阔的技术网络。
过程中：发现很多东西，AI 真的能比人类做得更好更快；但是怎么让 AI 理解我的想法，是要重点探索的过程。
结果：有好的工具，确实能事半功倍，但前提是有好的工具！
通义千问 3 + MCP：一切皆有可能
MCP 协议通过标准化交互方式解决 AI 大模型与外部数据源、工具的集成难题；通义千问 3 原生支持 MCP 协议，能更精准调用工具；阿里云百炼上线了业界首个全生命周期 MCP 服务，大幅降低 Agent 开发门槛，用户只需 10 分钟即可构建增强型智能体。
点击阅读原文查看详情。