《AI前端效率提升实践》往期精彩推荐
周五下午五点，Leader 甩来十几张设计图：“下周一上线，快速搞一下。”
我熟练地截图、喂给 AI，三秒出码。打开预览，血压直接拉满——满屏蓝紫渐变，按钮像根荧光棒，布局全凭想象力。
“能不能用 DevUI 组件库来实现？”我压着火又试了一次。
AI 很听话，扭头给我生造了一个 d-input-box，继续涂着它那标志性的 AI 味配色……
盯着那堆散发着“赛博廉价感”的AI味页面，我陷入了沉思：
“怎么让 AI 真正照着图片样式来生成？能不能让它学会用现有组件库，而不是凭空造轮子？“
这两个问题不解决，再强的模型也只是个高级涂鸦工具。于是我索性自己动手，做了两个专门解决这些问题的 Skill。
下面就是这套 “截图 → 企业级页面” 的完整拆解。
读完这篇文章，你将收获
- 一个从截图→企业级页面的自动化实践方案；
- 一个让 AI 不再瞎猜布局的图片识别增强 Skill 设计思路；
- 一个DevUI 组件库 Skill的设计与实现；
- 一次对话便能生成完整前端页面及其功能交互的企业级端到端自动化实践
现在我给你看到的是一张我随意画的潦草手绘图，没有添加任何额外提示词，直接触发Skill生成的页面：
这背后的核心，就是今天要分享的2个自研 Agent Skill：
- image-analyze-improvement —— 把截图、原型图甚至手绘图，转成一种结构化的“UI 描述语言”；
- vue-devui-practices —— 生成符合 DevUI 规范和最佳实践的企业级代码。
一、AI 生成前端页面的三种方式
在讲具体方案之前，先聊聊目前用 AI 生成前端页面，到底有哪几条路可以走。搞清楚全貌，才能理解后面为什么要做 Skill。
1.1 基于自然语言的提示词驱动生成
这是目前门槛最低、最直观的方式。你只需要用自然语言（中文或英文）清晰地描述你想要的页面结构、样式和功能，AI 就能自动生成对应的 HTML、CSS 和 JavaScript 代码。
"页面顶部是一个导航栏，左侧 Logo，右侧有用户头像和下拉菜单；中间区域左右分栏，左边 240px 侧边栏包含可折叠菜单，右边是主内容区，有一个搜索栏和表格……"
听起来没问题？但实际用起来有几个硬伤：
- 提示词极长：一个中等复杂度的后台页面，光描述布局和组件就得 300-500 字，比直接写代码还累；
- 信息容易遗漏：间距、对齐、层级关系……写提示词时漏掉一个，AI 就自由发挥，出来的页面歪七扭八；
- 还原度不足：设计风格固化，AI风味的蓝紫渐变色，布局容易自由发挥
结论：手写描述适合于现有页面的微调，但要从0还原设计稿，或许"自己写代码都比写提示词快"不是段子。
1.2 Design-to-Code方案：从设计源文件生成代码
既然手写描述太慢，那能不能直接从设计稿中提取结构化信息来生成代码？这就是业内主流的图像生成前端代码方案之一——不从截图"猜"，不用手写描述，而是直接解析设计工具的源文件。
核心流程：
代表工具：Pixso D2C、Semi Design、Appy Pie、Figma 官方插件、Figma-Context-MCP、imgCook 等
优势：
- 像素级精准还原： 由于直接读取源文件数据，它能完美保留设计稿的尺寸、间距、色彩、排版和字体规范，视觉还原度极高（通常可达 95% 以上）。
- 设计与开发高度一致：能够最大程度减少设计师与前端开发之间的沟通成本和视觉走查误差，生成的代码结构清晰，更易于后续维护。
- 代码质量高，符合工程规范：能够智能识别 List、Grid 等布局方案，生成语义化的 HTML 标签和符合 BEM 等命名规范的 CSS。支持输出 Vue、React、微信小程序等多种标准框架代码。
局限：
- 强依赖设计工具和源文件格式，截图、手绘图、交互示意图等无法使用；
- 使用门槛高，需要对接Figma平台、mcp工具等，需要进行开发赋能
- 生成的样式代码存在大量的绝对定位布局，难以达到生产可用
- 定制投入大：DSL 到代码的映射规则需要针对组件库定制，前期投入大；
- 对设计稿规范度有要求，图层混乱的设计稿解析效果打折，设计师为了方便会从已有图层复制过来进行叠加修改。
1.3 像素级视觉方案：从图片直接生成代码
另一种思路：不依赖设计源文件，让 AI 直接"看图写码"。核心是视觉 - 语言多模态神经网络，打通图像像素、视觉语义、代码文本三大模态，实现 UI 截图、设计图、图表等图像到可执行代码（HTML/CSS/React/Vue/ 图表代码等）的端到端转换。
核心原理：
代表工具：v0.dev、Screenshot-to-code、AIUI.me 等
优势：
- 门槛极低，无需配置、不用懂设计工具
- 专为快速
UI原型设计而打造，适合快速原型验证、页面初稿。 - 支持手绘稿 / 截图转代码，无需专业设计稿
局限：
- 平台绑定，技术框架单一，框架React/Next.js 为主，样式默认使用Tailwind CSS；
- 代码复用性与工程化困难，对企业级组件库（DevUI、Ant Design 等）无感知，这会导致代码库中出现大量重复且难以维护的冗余代码。
- 还原精度有限，细节易失真，很难做到像素级还原。对标高保真设计稿时，图标、特殊动效、定制主题、复杂排版容易走样，仍需人工微调。
1.4 图像识别增强 + DevUI组件库的Skills方案
那么，有没有一种方案，既能像像素级方案一样“丢图即出码”，又能像结构化方案一样做到“代码风格可控、组件库适配”？
这正是本文要分享的方案：图像识别增强 + DevUI组件库的Skills方案——用 Skill 把“看图”和“写规范代码”两件事串联起来。本质上，它在像素级视觉方案的基础上，通过 Skills 注入结构化分析能力和组件库知识，弥补平台适配、组件适配、框架适配的短板。
优势：
- 使用门槛低，日常使用方便，有截图即可生成
- 平台适配：支持现有IDE/Agent图片上传能力的直接适配
- 组件库与框架适配，定制门槛低：适配门槛低，工程化规则、组件库实践可随时更新和补充，可替换vue-devui、ng-devui、ant-design等不同组件库
- 支持
手绘稿、原型图、交互示意图等多种输入，输入灵活，支持意图识别
- 组件库自带设计规范（间距、颜色、圆角、阴影等），AI只需调用
<d-button>而非重复写<button class="px-4 py-2 rounded...">。生成结果风格统一，不会出现一个页面里两种按钮样式。 - 组件库经过生产验证（可访问性、键盘导航、焦点管理、响应式断点），AI直接继承这些优点，避免自己造轮子出bug。
局限：
- 不追求 100% 像素对齐，优先组件化、可维护、可扩展
本质上，这仍属于像素级视觉方案，我们只是做了一系列更符合我们企业内部生产直接可用的实践优化。
二、图片识别增强Skill：让 AI 读懂图片
2.1 为什么需要它
现在AI的现状是，只要你能说清楚，它就能做出来。
可问题就在“说清楚”这一步——它本身就是一个苦力活。明明截图里已经把结构画得明明白白，为什么还得再写三百字的提示词去描述一遍？
虽然大多数IDE和Agent已经支持上传图片并分析，但分析结果往往不尽如人意：信息频繁丢失，生成的页面更是时好时坏、质量堪忧。
用户：
“请描述这张图片的 UI。”
AI 回复：
“这张图是一个商品管理页面，顶部有搜索框，中间有卡片列表，底部有分页。” ——太模糊，开发者获取的信息严重不足，生成的代码自然容易偏离设计稿。
这个skill，便是让Agent内置的图片分析能力更上一层楼。
2.2 这个Skill做了什么
它的任务很纯粹：接收一张页面截图，使用 Agent内置工具 AnalyzeImage 分析图片的结构、布局、内容和样式，并根据内容理解业务分析交互逻辑，输出一份结构化的 UI 描述语言（UIDL，UI Description Language）。
2.3 适用场景
- 基于图片首次生成页面时
- 用于分析图片的布局、样式、内容，并推理其交互需求
2.4 如何使用
你只需要在上传图片的同时，在提示词中激活这个 Skill。例如：
/image-analyze-improvement分析图片
2.5 设计思路
图像识别增强SKill本质上是一个图片→结构化文档的转换管线：以四维分析模型为引擎，以量化描述规范为约束，以双形式（Markdown + JSON）输出为产物，最终产出可直接落地为 UI 代码的分析文档。
四维分析模型：对界面/组件从 Position、Content、Interaction、Style 四维进行确定性描述，确保输出可直接落地为UI代码。
| 维度 | 含义说明 | 核心问题 |
|---|---|---|
| Position | 定义布局结构、层级与相对位置 | 组件在何处展示？ |
| Content | 明确组件类型、文本与数据内容 | 展示哪些信息？ |
| Interaction | 定义交互行为与状态变更逻辑 | 内容如何动态变化？ |
| Style | 约束视觉表现、尺寸与颜色规范 | 呈现何种视觉效果？ |
描述规范体系：要求结构清晰 + 数值量化 + 状态完整，全覆盖布局、组件、内容、样式、交互五大维度，所有描述具备唯一性。
- 布局描述：整体→局部，上→下，左→右.
- 位置描述：使用精准方位：
上方、下方、左侧、右侧、居中、左上角、右下角，明确模块与模块、模块与父容器的相对位置，禁用「旁边、附近、周围」等模糊性表达 - 层级关系表述: 父子关系：使用「
包含、位于…内部、隶属于、嵌套于」描述层级。兄弟关系：使用「并列、相邻、左侧/右侧、上方/下方」描述同级位置 - 尺寸描述：具体数值（如 16px）、比例`、占满宽度、占据剩余空间等，禁用「大、小、宽、窄」。
- 颜色描述： 使用
十六进制，可使用语义化命名：主题蓝、警告橙、成功绿 - 文字完整性: 图片中所有可见
文字必须完整提取并描述
这个 Skill 的核心是一套精心设计的系统提示词。我在这里分享它的核心框架：
---
# 图片分析增强技能
## 工作流程
1. **接收图片分析请求** → 调用 `AnalyzeImage` 分析图片结构、布局、内容、样式
2. **执行结构化分析** → 四维确定性描述（Position / Content / Interaction / Style）
3. **输出结果** → Markdown + JSON 统一输出
4. **保存结果** → `image-analysis-{pageName}.md`
## 分析四维模型
| 维度 | 含义 | 核心问题 |
|------|------|----------|
| Position | 布局结构、层级、相对位置 | 组件在何处展示？ |
| Content | 组件类型、文本、数据内容 | 展示哪些信息？ |
| Interaction | 交互行为、状态变更逻辑 | 内容如何动态变化？ |
| Style | 视觉表现、尺寸、颜色规范 | 呈现何种视觉效果？ |
## 描述规范
- **顺序**：整体→局部，上→下，左→右
- **层级**：父子（包含/嵌套于）+ 兄弟（并列/相邻/左侧/右侧）
## 输出模板
```markdown
## 页面整体结构分析
* **页面类型**：[...]
* **布局结构**：[...]
* **视觉风格**：[...]
---
## 布局结构
**整体结构**：[区域划分，从上到下、从左到右、从整体到局部]
**[区域名称]**：位于[位置]，包含[组件]，[排列方式]。
[逐层描述，体现父子与兄弟关系]
---
## JSON 结构化数据
```json
{
"layout": {
"order": "vertical | horizontal",
"sections": [{
"name": "[区域名称]",
"order": "[排列方向]",
"type": "[DevUI组件]",
"spacing": { "between": 16, "marginTop": 16 },
"align": "left | center | right",
"fixed": "right | left",
"children": [{
"name": "[组件名称]",
"type": "[组件类型]",
"text": "[显示文本]",
"icon": "[图标]",
"states": [],
"interactions": {},
"purpose": "[功能说明]"
}]
}]
}
}
```
---
## 交互逻辑
### 1. [交互场景]
* [交互行为描述]
有了这个提示词后，我把它配置为一个Agent Skill，使用时只上传截图触发技能，它就能输出一份标准的结构化UI描述文档。
这里仅是介绍Skill的基本结构和设计思路，完整版Skill会包含更多详细内容和规则，后面会开源同步出来。
2.6 实践案例：设计稿截图 → UIDL
下面就是一次真实使用：我直接上传截图，使用Skill分析图片，生成结构化UI描述
你会发现，这份文档已经精确描述了布局结构、模块位置、组件功能（tabs、搜索框、按钮、链接）、交互逻辑、页面上的文案以及对应的JSON结构化UIDL。
三、DevUI 组件 Skill：DESIGNS.md + 组件库最佳实践
DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"高效、开放、可信、乐趣"四种自然与人文相结合的理念，旨在为设计师、前端开发者提供标准的设计体系，并满足各类落地场景，是一款企业级开箱即用的产品。
3.1 为什么需要它
由于大模型训练数据的原因，AI总是偏向于蓝紫渐变色、大圆角、玻璃态和阴影浮层的页面，设计风格固化，AI 风味明显。
- 缺少设计约束：在未提供设计规范的情况下，模型会取“最大公约数”风格，即最常见的模板。
- 不了解组件库：通用模型不知道团队用的是 Ant Design、Element Plus 还是 DevUI，更不知道主题色、圆角 token、间距系统。
与其让AI重复造轮子、瞎猜布局，现有的经过检验的企业级组件库及其设计规范，用的更让人放心。DevUI组件Skil便是让AI能够了解现有组件及其用法，生成符合DevUI组件规范的页面。
3.2 这个Skill做了什么
拿到 UIDL 之后，DevUI Skill负责将它落地为符合 DevUI 组件库规范的业务代码，包括：
- 识别组件需求：根据用户需求识别需要使用的DevUI组件，让 AI 知道 DevUI 有哪些组件（Button, Table, Form, Modal...）
- 读取设计系统 Design Token：把
DESIGNS.md中的颜色、圆角、间距、字体规范直接喂给 AI，禁止它自由发挥。 - 读取组件文档：读取需要使用的组件的 API / Demo 文档
- 根据组件文档和最佳实践生成页面
3.3 适用场景
- 需要使用DevUI组件时
- 获取DevUI组件相关API文档、Demo用法
- 生成符合DevUI设计规范的前端页面
3.4 如何使用
在提示词中激活 DevUI Skill：
/vue-devui-practices使用DevUI组件生成一个表单页面
3.5 设计思路
Skill目录结构
vue-devui-practices/
│ SKILL.md
└───references/
│ DESIGNS.md
│ Form-表单.md
│ Icon-图标.md
│ Input-输入框.md
│ ...
└───demo/
│ table-virtualScroll.md
└─── ...
我为它准备了另一套系统提示词，核心逻辑是将 UIDL 中的抽象描述与 DevUI 组件能力做映射。部分提示词如下：
## Overview
{技能的整体定位与核心能力概述，1-2句话说明技能做什么、怎么做}
## Quick Start
### 1. 识别组件需求
{根据用户需求，映射到技能支持的组件/能力清单，按分类列举}
### 2. 获取组件文档
{使用 Read 工具按需读取 references 目录中的文档，路径规则：`references/{组件名}.md`}
**重要**：若 references 中无对应文档，需参考 `references/DESIGN.md` 设计规范自行实现。
### 3. 获取设计规范与变量
{读取设计规范文件，获取样式变量、设计约束等}
### 4. 根据组件文档和最佳实践生成页面
{文档内容输出清单，如：组件介绍、用法示例、Props/Events/Slots/Methods/类型定义、最佳实践}
## Component Usage
### 基本规范
**组件引入**：{组件注册方式与使用前缀}
## 核心编码原则
...
## Resources
### references/
**组件文档**：每个文档包含：
- {文档内容项1}
- {文档内容项2}
- ...
**其他文档**：
- `references/DESIGNS.md`：{设计规范说明}
- `references/Install.md`：{安装配置说明}
## Best Practices
- {最佳实践1}
- ...
3.6 实际案例：UIDL → DevUI代码展示
我把表单截图生成的 UIDL 交给 DevUI 组件库技能，生成页面效果如下：
可以看到，页面整体布局基本一直，组件使用正确，仅部分细节布局和间距等需要调整优化。
再看下生成的代码效果：
可以看到，无论是页面效果还是代码规范度完全符合DevUI规范，表单使用了 DevUI 的 d-form 和 d-input，按钮是 d-button primary 块级。所有命名、API、样式变量全都是 DevUI 生态下最标准的写法。
四、组合使用: 端到端企业级前端开发实践
前面只是分步使用Skill，我们也可以将多个 Skill 串联，你将能通过一次对话，一张截图，快速生成前端页面：
- 用图像识别增强 Skill 解析设计稿截图，得到结构化布局和组件清单。
- 将布局描述 + 组件清单交给 DevUI Skill，生成符合规范的前端页面代码。
- 此时，再搭配接口调用生成Skil使用，一键生成接口调用代码，完成从UI页面到接口调用的功能交互！
接口调用生成Skill详细介绍：《接口即代码: 一个Skill轻松搞定类型定义、接口调用、Mock与调试》
实践案例：ip白名单访问控制页面
把三个 Skill 串起来，整个流程无比丝滑，一次对话便可完成需求开发：
- Step1：在 Agent 中，我上传一张截图，然后直接触发
图像识别Skill，分析图片并使用devui skill生成页面； - Step2：输入后端提供的接口设计：直接触发
接口调用生成skill，一键生成接口定义、调用、mock、配置等 - Step3：按需求完成从UI页面到接口调用的功能交互
可以看到，表格数据的查询、搜索、分页功能全都正常可用，并且自带mock机制，后端接口未就绪也不阻塞开发，仅部分组件配置/间距细节需要微调：
五、总结
如果你也面临：前端页面生成困难，效果不佳，组件不会用，功能实现繁琐
不妨试试这套组合：
- 图像识别增强 Skill —— 让 AI 真正看懂布局、样式、交互，把模糊的视觉输入变成了严谨的数据结构；
- DevUI 组件 Skill —— 让 AI 遵循设计规范，告别随机风格，使用已有的标准化组件。
- 接口调用生成 skill —— 让AI遵循编码规范生成功能接口逻辑
三者结合，就实现了从截图到企业级代码的端到端自动化，直观、精准、可复用。对于有固定组件库和设计规范的团队来说，这个思路几乎可以消灭一大半的页面搭建工作。
如果你也想动手试试，可以参考上面的 Skill 提示词，替换成你们自己项目规范的组件库（Element Plus、Ant Design、Naive UI、MateChat 一样适用），让你的Agent会用组件，遵循设计规范、遵循编码规范。
📣 加入我们
MateChat 正在快速发展，我们欢迎更多开发者加入：
- 💬 DevUI微信小助手：devui-official（添加时请备注MateChat）
- 🌟 代码仓库地址：gitcode.com/DevCloudFE/…
如果这篇文章对你有帮助，欢迎点赞、收藏，有疑问直接在评论区聊～
感谢贡献者 @liuguolin 提供的优质好文！
