Meta把内部设计系统开源了：支撑内部13000+应用：专为Agent调优
2026-07-03
2026-07-07 0
周五下午五点，Leader 甩来十几张设计图：“下周一上线，快速搞一下。”
我熟练地截图、喂给 AI，三秒出码。打开预览，血压直接拉满——满屏蓝紫渐变，按钮像根荧光棒，布局全凭想象力。
“能不能用 DevUI 组件库来实现？”我压着火又试了一次。
AI 很听话，扭头给我生造了一个 d-input-box，继续涂着它那标志性的 AI 味配色……
盯着那堆散发着“赛博廉价感”的AI味页面，我陷入了沉思：
“怎么让 AI 真正照着图片样式来生成？能不能让它学会用现有组件库，而不是凭空造轮子？“
这两个问题不解决，再强的模型也只是个高级涂鸦工具。于是我索性自己动手，做了两个专门解决这些问题的 Skill。
下面就是这套 “截图 → 企业级页面” 的完整拆解。
读完这篇文章，你将收获
现在我给你看到的是一张我随意画的潦草手绘图，没有添加任何额外提示词，直接触发Skill生成的页面：
这背后的核心，就是今天要分享的2个自研 Agent Skill：
在讲具体方案之前，先聊聊目前用 AI 生成前端页面，到底有哪几条路可以走。搞清楚全貌，才能理解后面为什么要做 Skill。
这是目前门槛最低、最直观的方式。你只需要用自然语言（中文或英文）清晰地描述你想要的页面结构、样式和功能，AI 就能自动生成对应的 HTML、CSS 和 JavaScript 代码。
听起来没问题？但实际用起来有几个硬伤：
结论：手写描述适合于现有页面的微调，但要从0还原设计稿，或许"自己写代码都比写提示词快"不是段子。
既然手写描述太慢，那能不能直接从设计稿中提取结构化信息来生成代码？这就是业内主流的图像生成前端代码方案之一——不从截图"猜"，不用手写描述，而是直接解析设计工具的源文件。
核心流程：
代表工具：Pixso D2C、Semi Design、Appy Pie、Figma 官方插件、Figma-Context-MCP、imgCook 等
优势：
局限：
另一种思路：不依赖设计源文件，让 AI 直接"看图写码"。核心是视觉 - 语言多模态神经网络，打通图像像素、视觉语义、代码文本三大模态，实现 UI 截图、设计图、图表等图像到可执行代码（HTML/CSS/React/Vue/ 图表代码等）的端到端转换。
核心原理：
代表工具：v0.dev、Screenshot-to-code、AIUI.me 等
优势：
UI 原型设计而打造，适合快速原型验证、页面初稿。局限：
那么，有没有一种方案，既能像像素级方案一样“丢图即出码”，又能像结构化方案一样做到“代码风格可控、组件库适配”？
这正是本文要分享的方案：图像识别增强 + DevUI组件库的Skills方案——用 Skill 把“看图”和“写规范代码”两件事串联起来。本质上，它在像素级视觉方案的基础上，通过 Skills 注入结构化分析能力和组件库知识，弥补平台适配、组件适配、框架适配的短板。
优势：
手绘稿、原型图、交互示意图等多种输入，输入灵活，支持意图识别局限：
本质上，这仍属于像素级视觉方案，我们只是做了一系列更符合我们企业内部生产直接可用的实践优化。
现在AI的现状是，只要你能说清楚，它就能做出来。
可问题就在“说清楚”这一步——它本身就是一个苦力活。明明截图里已经把结构画得明明白白，为什么还得再写三百字的提示词去描述一遍？
虽然大多数IDE和Agent已经支持上传图片并分析，但分析结果往往不尽如人意：信息频繁丢失，生成的页面更是时好时坏、质量堪忧。
用户：
AI 回复：
这个skill，便是让Agent内置的图片分析能力更上一层楼。
它的任务很纯粹：接收一张页面截图，使用 Agent内置工具 AnalyzeImage 分析图片的结构、布局、内容和样式，并根据内容理解业务分析交互逻辑，输出一份结构化的 UI 描述语言（UIDL，UI Description Language）。
你只需要在上传图片的同时，在提示词中激活这个 Skill。例如：
图像识别增强SKill本质上是一个图片→结构化文档的转换管线：以四维分析模型为引擎，以量化描述规范为约束，以双形式（Markdown + JSON）输出为产物，最终产出可直接落地为 UI 代码的分析文档。
四维分析模型：对界面/组件从 Position、Content、Interaction、Style 四维进行确定性描述，确保输出可直接落地为UI代码。
| 维度 | 含义说明 | 核心问题 |
|---|---|---|
| Position | 定义布局结构、层级与相对位置 | 组件在何处展示？ |
| Content | 明确组件类型、文本与数据内容 | 展示哪些信息？ |
| Interaction | 定义交互行为与状态变更逻辑 | 内容如何动态变化？ |
| Style | 约束视觉表现、尺寸与颜色规范 | 呈现何种视觉效果？ |
描述规范体系：要求结构清晰 + 数值量化 + 状态完整，全覆盖布局、组件、内容、样式、交互五大维度，所有描述具备唯一性。
上方、下方、左侧、右侧、居中、左上角、右下角，明确模块与模块、模块与父容器的相对位置，禁用「旁边、附近、周围」等模糊性表达包含、位于…内部、隶属于、嵌套于」描述层级。兄弟关系：使用「并列、相邻、左侧/右侧、上方/下方」描述同级位置十六进制，可使用语义化命名：主题蓝、警告橙、成功绿文字必须完整提取并描述这个 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会包含更多详细内容和规则，后面会开源同步出来。
下面就是一次真实使用：我直接上传截图，使用Skill分析图片，生成结构化UI描述
你会发现，这份文档已经精确描述了布局结构、模块位置、组件功能（tabs、搜索框、按钮、链接）、交互逻辑、页面上的文案以及对应的JSON结构化UIDL。
由于大模型训练数据的原因，AI总是偏向于蓝紫渐变色、大圆角、玻璃态和阴影浮层的页面，设计风格固化，AI 风味明显。
与其让AI重复造轮子、瞎猜布局，现有的经过检验的企业级组件库及其设计规范，用的更让人放心。DevUI组件Skil便是让AI能够了解现有组件及其用法，生成符合DevUI组件规范的页面。
拿到 UIDL 之后，DevUI Skill负责将它落地为符合 DevUI 组件库规范的业务代码，包括：
DESIGNS.md 中的颜色、圆角、间距、字体规范直接喂给 AI，禁止它自由发挥。在提示词中激活 DevUI Skill：
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}
- ...
我把表单截图生成的 UIDL 交给 DevUI 组件库技能，生成页面效果如下：
可以看到，页面整体布局基本一直，组件使用正确，仅部分细节布局和间距等需要调整优化。
再看下生成的代码效果：
可以看到，无论是页面效果还是代码规范度完全符合DevUI规范，表单使用了 DevUI 的 d-form 和 d-input，按钮是 d-button primary 块级。所有命名、API、样式变量全都是 DevUI 生态下最标准的写法。
前面只是分步使用Skill，我们也可以将多个 Skill 串联，你将能通过一次对话，一张截图，快速生成前端页面：
实践案例：ip白名单访问控制页面
把三个 Skill 串起来，整个流程无比丝滑，一次对话便可完成需求开发：
图像识别Skill，分析图片并使用devui skill生成页面；接口调用生成skill，一键生成接口定义、调用、mock、配置等
可以看到，表格数据的查询、搜索、分页功能全都正常可用，并且自带mock机制，后端接口未就绪也不阻塞开发，仅部分组件配置/间距细节需要微调：
如果你也面临：前端页面生成困难，效果不佳，组件不会用，功能实现繁琐
不妨试试这套组合：
三者结合，就实现了从截图到企业级代码的端到端自动化，直观、精准、可复用。对于有固定组件库和设计规范的团队来说，这个思路几乎可以消灭一大半的页面搭建工作。
如果你也想动手试试，可以参考上面的 Skill 提示词，替换成你们自己项目规范的组件库（Element Plus、Ant Design、Naive UI、MateChat 一样适用），让你的Agent会用组件，遵循设计规范、遵循编码规范。
MateChat 正在快速发展，我们欢迎更多开发者加入：
如果这篇文章对你有帮助，欢迎点赞、收藏，有疑问直接在评论区聊～
Copyright(C) 2020-2026 jiyx.com All Rights Reserved 联系方式：[email protected]