基于imgcook与Agent的智能出码实践：从图片到70%可用前端代码

本文系统总结了在仅有 UI 图片、无设计稿和交互说明的情况下，如何通过 AI 技术实现高质量前端代码的自动生成。

一、背景与需求

面对一个仅提供了几张效果图，而没有 Sketch 设计稿源文件的前端开发需求，我们决定尝试利用 AI 技术来生成代码。这要求 AI 能够理解图片内容，并将其准确地转化为可运行的前端界面。

经过评估，这种场景非常适合使用 AI 自动出码。我们先后尝试了多种不同的方案进行探索。

二、imgcook + Agent 智能出码方案演进

本方案的核心是基于 imgcook 插件与 Aone Agent，结合 MCP 服务调用来智能产出代码。通过三个阶段的持续优化，我们将生成代码的可用度从最初的基础 Agent 出码的 40%，提升到了最终的 70%。

核心的改进点包括：

1. 引入 imgcook 提升对设计稿细节的还原度。
2. 集成 @alife/cook-unify-mobile 组件库，实现对 Button、Icon 等基础组件的自动识别与正确调用。

2.1 第一阶段：使用 IDE Agent 直接读取图片开发

输入：

• 模式：Agent
• 模型：Claude-4-Sonnet（外部模型，支持多模态）
• 上下文文件：指定了 /src/pages/index/index.tsx 和 /src/pages/index/style.module.less
• 图片输入：提供目标界面的截图。

输出与效果：
Agent 理解了图片内容，并输出了一个结构化的组件目录建议。

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

然而，实际生成的代码存在两个明显问题：

1. 设计稿还原度低：布局、间距、颜色等细节与图片原型差异较大。
2. 未使用现有组件库：生成的按钮、图标等均为手写样式，没有调用项目已有的统一组件库。

2.2 第二阶段：针对性调优

我们针对上述两个痛点进行了优化。

2.2.1 引入 imgcook 提升设计稿还原度
我们找到了历史项目中一个类似模块的设计稿，使用 imgcook 插件对其进行解析。imgcook 能够生成包含详细样式和布局信息的提示词（Prompt）。

关键步骤：

1. 使用 imgcook 解析设计稿，并复制其生成的产物 Prompt。
2. 在 VS Code 中，使用 Aone Agent 插件调用 MCP 服务来执行该 Prompt。

效果：生成的代码在布局和样式细节上高度还原了设计稿，效果显著提升。但此时仍未使用项目约定的组件库。

2.2.2 集成组件库物料
为了让我工智能不仅能还原样式，还能正确使用组件，我们组装了更复杂的提示词。该提示词在 imgcook 产物的基础上，明确指示 AI：

1. 识别图片中与组件库 (@alife/cook-unify-mobile) 相似的组件。
2. 使用 codebase_search 工具，在 node_modules 中检索对应组件的实际代码和 API 定义以学习用法。
3. 最终结合检索到的知识，使用正确的组件完成代码生成。

优化后效果：
AI 成功地：

• 识别出应使用 Button 和 Icon 组件。
• 通过检索，学会了 Icon 组件应使用 PayCircleOutline、ExclamationCircleOutline 等具体图标，并通过 color 属性设置颜色。
• 学会了 Button 组件的 block、size 等属性的正确用法。
• 最终生成的组件 (DiningBenefitsCard) 结构清晰，使用了 TypeScript 和 CSS Modules，且组件 API 传参正确。

2.3 方案输出与对比

技术亮点：

• 技术栈：TypeScript + React + CSS Modules。
• 实现了语义化的组件与类名命名。
• 正确理解并使用了组件库的 API。
• 代码可用度从 40% 提升至 70%。

三种方案效果对比：	出码方式	效果图	可用度
基础 Agent 出码		~40%
+ imgcook (MCP调用)		显著提升
+ imgcook + 组件库检索		~70%

三、进阶：剧本出码模式

为进一步提升代码质量和生成效率，我们探索了“剧本出码”模式。

3.1 核心思想
将开发过程中需要的“物料”（如组件库文档、开发规范、接口定义、示例代码等）预先编排到一个“剧本”（如 story.md）中。通过剧本引导大模型像人类开发者一样，按步骤、有上下文地学习并生成代码。

3.2 开发与使用流程

1. 创作剧本：这是最耗时的步骤，需要精心编排提示词、准备示例，并反复调试以让大模型理解开发意图和规范。
2. 配置物料：通过配置文件组装剧本、知识图谱、示例代码等所有所需物料。
3. 执行出码：在例如 MetaStack 等平台，上传需求图片和描述，选择对应剧本，即可快速生成代码。

3.3 实践成果
使用剧本模式后，我们成功在几分钟内生成了包含 5 个文件、共计 379 行新代码的页面。经评估，代码可用度达到了 80%，超越了之前的 Agent 综合方案。

优势总结：

• 快速构建上下文：剧本一次性提供了丰富的开发上下文。
• 高效高质量产出：几分钟即可产出高可用代码。
• 一劳永逸：剧本创作虽难，但可重复使用于同类需求。
• 结构化模仿：让 AI 模仿人类的编程思维和步骤。

四、总结与展望

通过本次实践，我们验证了从图片生成前端代码的可行性，并探索出一条从基础 Agent 到结合专业工具（imgcook），再到利用知识库和剧本的渐进式优化路径。这不仅大幅提升了开发效率，也让我们看到了 人工智能 在理解复杂需求、调用专业工具方面的巨大潜力。未来，随着 MCP 等协议的发展，前端框架/工程化 领域的智能开发工具将更加成熟，有望进一步改变前端开发的工作模式。

核心感悟：

1. 拥抱变化：主动尝试和理解如 Agent、MCP 等新技术，往往会带来惊喜。
2. 人机协同：AI 在执行和生成上更快，而人的价值在于定义问题、准备上下文和“教导”AI。
3. 工具为先：好的工具能事半功倍，而创造和优化这些工具，正是当前重要的探索方向。