链载Ai

标题: 仅凭几张图片，我们是如何让 AI 自动生成 70% 可用前端代码的？ [打印本页]

作者: 链载Ai 时间: 昨天 22:41
标题: 仅凭几张图片，我们是如何让 AI 自动生成 70% 可用前端代码的？

本文系统总结了在仅有 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.less

2.1.3 实际出码

2.1.4 效果图

2.2 调优过程

主要针对以上两个痛点（改进点）来进行调优，具体过程如下所示。

2.2.1 解决设计稿的还原度的问题-imgcook

Tips：

1.在开发过程中，找到历史设计稿中有一小段内容和本次一样，于是使用历史设计稿中这个小模块继续探索；

2.除了这个有历史设计稿的小模块之外，以下截图其他设计稿内容是人工还原；

使用imgcook

点击复制提示词，imgcook产物Prompt：

使用imgcook生成代码。模块链接：http://tao-d2c.fc.alibaba-inc.com/modules/621/preview；基于此生成一个语义化命名的react组件目录。对其classname语义化命名，采用cssmodules，组件目录包含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#CSSModules样式文件

组件特点：

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○采用CSSModules进行样式隔离○支持点击回调函数onAuthorize○支持通过props传入额外的classNam

Icon和Button使用方式：

1.检索代码后：

a.能学习到Icon的正确使用方式；

b.并且知道通过color指定颜色；

2.检索代码后：

a.能学习到Button的正确使用方式；

b.并且知道通过block、color、size等使用方式；

代码和效果图

变更文件

效果图

组件库组件理解度：非常好👍，能找到应该使用的组件，并且放到相应的位置上；

组件Api理解：非常好👍，能正常传参；

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-size: 12.000001px;font-style: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: auto;text-align: start;text-indent: 0px;text-transform: none;white-space: normal;widows: auto;word-spacing: 0px;-webkit-text-size-adjust: auto;-webkit-text-stroke-width: 0px;text-decoration: none;width: 612.92126px;height: 837px;opacity: 1;transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1) 0s, opacity 400ms ease 0s, height 0ms cubic-bezier(0.25, 0.8, 0.25, 1) 0s;"/>

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-size: 12.000001px;font-style: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: auto;text-align: start;text-indent: 0px;text-transform: none;white-space: normal;widows: auto;word-spacing: 0px;-webkit-text-size-adjust: auto;-webkit-text-stroke-width: 0px;text-decoration: none;width: 614px;height: 480px;opacity: 1;transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1) 0s, opacity 400ms ease 0s, height 0ms cubic-bezier(0.25, 0.8, 0.25, 1) 0s;"/>

2.3 输出

2.3.1 技术实现亮点

使用TypeScript + React + CSS Modules；
语义化组件命名（如DiningBenefitsCard）；
支持组件API正确传参和配置；
实现了从40%到70%的代码可用度提升；

2.3.2 三种形式出码效果图对比

Agent出码

ingFang SC", "Microsoft YaHei", STHeiti, Helvetica, Arial, sans-serif, "Apple Color Emoji";font-style: normal;font-variant-caps: normal;letter-spacing: normal;text-align: initial;text-indent: 0px;text-transform: none;word-spacing: 0px;text-size-adjust: auto;-webkit-text-stroke-width: 0px;text-decoration: none;">Agent出码 + imgcook插件(mcp 服务调用)

ingFang SC", "Microsoft YaHei", STHeiti, Helvetica, Arial, sans-serif, "Apple Color Emoji";font-style: normal;font-variant-caps: normal;letter-spacing: normal;text-align: initial;text-indent: 0px;text-transform: none;word-spacing: 0px;text-size-adjust: auto;-webkit-text-stroke-width: 0px;text-decoration: none;">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页面示例组件ListItemtsx"},{"type":"snippet","path":"../code-base/src/pages/mobile/NaposMarketing/components/ListItem/style.module.less","desc":"src/pages/mobile/NaposMarketing页面示例组件ListItemless"}]

核心提示词

# 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 串联在合适位置；

效果图

大模型代码产物

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-size: 12px;font-style: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: auto;text-align: start;text-indent: 0px;text-transform: none;white-space: normal;widows: auto;word-spacing: 0px;-webkit-text-size-adjust: auto;-webkit-text-stroke-width: 0px;text-decoration: none;width: 837.774583px;height: 619px;opacity: 1;transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1) 0s, opacity 400ms ease 0s, height 0ms cubic-bezier(0.25, 0.8, 0.25, 1) 0s;"/>

3.6 结论

此前我们使用的 Agent 出码配合 imgcook 插件（mcp服务调用）和组件库的综合方案表现已经相当优秀，代码可用度达到70%。然而，当我们引入剧本出码模式后，发现这一方案能够将代码可用度进一步推高至80%，虽然在使用便捷性上需要权衡，但整体开发效果确实更胜一筹。说明在追求更高质量代码生成的道路上，总有更优的解决方案等待发现！

四、感悟

1.不要排斥新事物，尝试去接受，过程和结果都会给你惊喜！之前我还不知道agent究竟是什么东西，现在通过不断的调优过程，慢慢发现了大模型的无边能力。

2. 勇于探索：从尝试到调优的实践过程中，Agent使用、mcp调用、codebase召回等新知识点逐步串联成完整的知识图谱，让我触及更广阔的技术网络。

3.过程中：发现很多东西，AI真的能比人类做得更好更快；但是怎么让AI理解我的想法，是要重点探索的过程。

4.结果：有好的工具，确实能事半功倍，但前提是有好的工具！

欢迎光临链载Ai (https://www.lianzai.com/)