Turning UI Images into Production‑Ready Front‑End Code with AI: A Full Walkthrough

Project Goal

The team started with only a few UI screenshots—no design files or interaction specifications—and aimed to determine whether AI could generate usable front‑end code directly from these images.

AI‑Assisted Code Generation Pipeline

The workflow combines the imgcook plugin, the Aone Agent, and an MCP (Model‑Code‑Protocol) service. Three optimization stages increased the usable‑code ratio from 40% (basic Agent output) to 70% :

Use imgcook to improve design‑spec fidelity.

Integrate the @alife/cook-unify-mobile component library for automatic Button and Icon recognition.

Refine prompts to include component‑library context and user‑guided component selection.

Direct IDE Image Input

UI screenshots are fed directly into the IDE‑based generation pipeline. The multimodal model Claude‑4‑Sonnet processes the image and produces the following files:

/src/pages/index/index.tsx
/src/pages/index/style.module.less
(plus referenced image assets)

Key prompt used for imgcook:

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

The prompt is pasted into VSCode and executed via the Aone Agent plugin, which calls the MCP service to produce component screenshots.

Optimization Process

Improving Design Fidelity with imgcook

Locate a matching small module in historical design files and reuse it.

Manually reconstruct the remaining parts of the design.

Prompt example for imgcook (same as above) is used to generate a semantic React component scaffold.

Integrating Existing Component Assets

The prompt is extended to include the @alife/cook-unify-mobile library:

使用 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），然后使用结果完成代码生成；输出

Large‑Model Output and Component Structure

The model searches the codebase for component implementations and generates a directory layout such as:

src/components/DiningBenefitsCard/
├── index.tsx          # React component file
└── index.module.css  # CSS Modules style file

Key characteristics of the generated component:

Uses Button and Icon from @alife/cook-unify-mobile/2x.

Semantic naming (e.g., DiningBenefitsCard, class names .benefitsCard, .cardTitle).

Accurate restoration of layout, colors, fonts, and spacing.

Implemented with TypeScript, React, and CSS Modules; supports props and callbacks.

Script‑Based Code Generation (story.md)

To avoid manual prompt tweaking, the team created a “script” ( story.md) that aggregates all required context—component library documentation, sample code, interface definitions—into a single markdown file consumed by the model.

[{"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"}]

The core prompt for the script reads:

# B端Napos活动营销页
你是一个前端开发专家，擅长移动端页面开发，你需要按照如下步骤学习，然后完成开发任务，生成一个活动营销页的页面的代码。
1. 理解移动端常见营销页面的结构
2. 学习案例中的示例代码
3. 从需求中提取功能信息
4. 要求用户按照规格输入需求和接口，参考案例，按照如下条件生成代码
   4.1 理解本篇文档中的知识图谱，查看饿了么中后台 App 组件库中哪些组件可以用于需求开发，询问用户需要使用哪些组件，依次用于开发
   4.2 使用 @alife/cook-unify-mobile 组件库

## 营销页面的结构
典型的B端/Napos的营销页面，多卡片信息呈现，包含
1）若干个卡片呈现，默认展示限定条数，如果超出限定条数，可以进行展开其余部分
2）提交区域，包含用户提供的协议，提交按钮

Running the script produced a complete set of files (≈5 changed files, 379 lines of code) with an estimated 80% usability .

Conclusions

The combined imgcook + Agent + MCP pipeline already achieved a 70% usable‑code rate . Adding the script‑based approach raised usability to about 80% , demonstrating that a well‑structured prompt (story.md) can significantly improve AI‑generated front‑end code quality while remaining repeatable for future projects.

Key takeaways:

AI‑assisted code generation can produce substantial code changes within minutes.

Investing effort in prompt engineering and script creation yields reusable assets that pay off across iterations.

Integrating existing component libraries and design‑fidelity tools (imgcook) is essential for high‑quality output.

Large language models can mimic human programming behavior when guided by concrete examples and structured context.