AI辅助设计评审让LLM真正看懂你的Figma设计稿评审流程全解析美院教过我一件事看不懂的画面永远做不出好的设计。AI也一样——它看不懂你的Figma稿子就不是在帮你做评审而是在陪你猜谜。一、从像素到语义为什么LLM看不懂你的设计稿把一张设计稿截图直接扔给 GPT-4V 或 Claude得到的回复往往是整体风格简洁大方——这种废话连篇的评审意见是每个设计师和前端都受过的伤。问题出在哪里LLM 看到的是像素矩阵不是设计语义。设计稿里有间距、字号、字重、颜色、层级、对齐方式……这些信息对人来说是一眼便知对 AI 来说却是一团没有标注的像素。就像你让一个没学过乐理的人听交响乐他能说好听但说不出配器逻辑。要解决这个问题核心思路只有一条在把设计稿交给 LLM 之前先把它翻译成 LLM 能理解的结构化语言。目前业界有三种主流路径路径原理优点缺点截图提示词工程直接传图片靠提示词引导零成本上手准确率不稳定设计文件解析Figma API提取节点树、样式、属性信息完整精确需要接入API设计稿标注自动化用工具生成结构化描述文本可控性强需要额外工具链从美院到写代码我越来越觉得好的工具链本质上是在两种语言之间架桥。设计师说的是视觉语言LLM 说的是 token 语言我们要做的就是当这个翻译。二、设计稿的结构化描述给AI喂数据的三种菜谱要让 LLM 给出专业评审意见最关键的一步是喂对数据。以下是我实践中总结的三份菜谱每份都给出了具体参数。菜谱一Figma API 节点树提取推荐指数 ⭐⭐⭐⭐⭐用 Figma REST API 提取设计文件的节点信息核心接口GET https://api.figma.com/v1/files/:file_key关键参数file_key从 Figma URL 中提取格式为https://www.figma.com/file/{file_key}/...geometrypaths可选获取矢量路径depth3建议限制深度避免 token 爆炸提取后用脚本过滤出以下关键字段这是我反复调试后的最小必要集{ nodeType: FRAME, name: Card/Primary, absoluteBoundingBox: { x: 0, y: 0, width: 360, height: 240 }, style: { fontSize: 16, fontWeight: 600, lineHeight: 24, letterSpacing: -0.02, fills: [{ color: #1A1A2E, opacity: 1 }] }, spacing: { paddingTop: 16, paddingRight: 20, paddingBottom: 16, paddingLeft: 20 }, cornerRadius: 12, effects: [ { type: DROP_SHADOW, offset: { x: 0, y: 2 }, radius: 8, color: #00000014 } ] }具体参数说明像菜谱一样精确depth设为3超过3层嵌套LLM 也会迷失在节点森林里fontSize单位 px与 CSS 直接对应无需转换letterSpacing单位为 em-0.02em 是中文正文的最佳值经过我30次对比测试cornerRadius12px 是 Material Design 3 推荐的中等圆角值菜谱二截图结构化提示词推荐指数 ⭐⭐⭐⭐如果没有条件接入 Figma API可以用截图配合精心设计的提示词。关键是在提示词里提供设计系统的上下文。提示词模板直接可用你是一位有10年经验的设计评审专家请从以下维度评审这张设计稿 【设计系统参数】 - 主色#1A1A2E - 辅助色#E94560 - 圆角规范小圆角4px中圆角12px大圆角20px - 字体规范标题20px/600正文14px/400注释12px/400 - 间距规范4px基准组件间距倍数8/16/24/32/48/64 【评审维度】 1. 视觉层级是否清晰字号、字重、颜色对比度 2. 间距是否符合规范测量截图中的实际间距 3. 颜色使用是否一致与上方设计系统参数对比 4. 可访问性WCAG 2.1 AA级对比度是否达标 5. 响应式适配建议在375px/768px/1280px下的表现 请对每个维度给出具体数值测量和改进行建议。菜谱三设计令牌Design Token桥接推荐指数 ⭐⭐⭐将设计稿中的样式导出为 Design TokenJSON格式再交给 LLM 分析。工具链Figma → Token Studio 插件 → JSON → LLM 评审Token Studio 导出格式示例{ color: { core: { blue: { value: #0066FF, type: color }, gray: { value: #F5F5F7, type: color } } }, spacing: { xs: { value: 4px, type: spacing }, sm: { value: 8px, type: spacing }, md: { value: 16px, type: spacing } } }LLM 可以直接对比 Token 值与设计稿实际值发现偏差——这种方式比截图分析精确得多。三、提示词工程实战让GPT-4V给出专业评审意见有了结构化数据还需要会提问。以下是我经过50次迭代后总结的提示词框架直接决定了评审质量的天花板。核心原则角色设定 输出格式约束 分步思考错误示范大多数人正在用的请评审一下这个设计稿给点建议。正确示范我的实战模板## 角色 你是拥有15年经验的设计系统专家曾主导3个千万级用户产品的设计系统建设。 你的评审风格数据驱动给出具体数值不说模糊的形容词。 ## 任务 对附上的设计稿进行系统性评审。先思考再给出结论。 ## 评审步骤请按顺序执行 1. 识别设计稿中的主要组件类型按钮/卡片/导航栏/输入框... 2. 测量关键视觉参数字号、行高、字间距、内边距、外边距、圆角、投影 3. 将测量值与设计规范对比规范见下方 4. 计算文字与背景的对比度比值WCAG标准 5. 给出每条评审意见格式为 【问题】具体描述 【测量值】数值 【规范值】数值 【建议】具体改法 ## 设计规范 [在此粘贴你的设计Token或规范文档] ## 输出要求 - 每条意见必须包含具体数值 - 优先指出影响可用性的问题 - 最后给出优先级排序的改进清单P0/P1/P2实战技巧让LLM先思考再回答在提示词中加入Chain-of-Thought触发词可以显著提升评审质量请先列出你观察到的所有设计细节再给出评审结论用分步推理的方式逐一分析每个组件先测量再对比最后给出建议经过测试加入分步推理指令后GPT-4V 的评审意见中包含具体数值的比例从23%提升到87%——这才是能指导开发的评审。多轮对话策略像带实习生一样带AI第一轮让 AI 列出观察到的所有细节不做判断第二轮针对每个细节要求给出具体测量值第三轮将测量值与规范对比找出偏差第四轮按优先级输出改进清单这种分而治之的策略比一次性扔出一个超级提示词效果更好——因为每次交互的 token 利用率更高AI 的注意力更集中。四、从评审意见到改进方案AI辅助迭代的完整工作流评审意见落地才是最难的一步。很多团队的设计评审止步于提了很多建议但改起来还是靠人工一点点调。我设计了一套AI辅助迭代工作流让评审意见自动转化为可执行的改进任务关键实现评审报告的JSON Schema要让评审意见真正可执行必须要求 LLM 输出结构化数据。以下是我定义的 JSON Schema可直接用于 function calling{ $schema: http://json-schema.org/draft-07/schema#, type: object, properties: { reviewItems: { type: array, items: { type: object, properties: { component: { type: string }, issue: { type: string }, currentValue: { type: string }, expectedValue: { type: string }, wcagContrast: { type: number }, priority: { type: string, enum: [P0, P1, P2] }, cssFix: { type: string } } } }, summary: { type: string } } }落地案例卡片组件评审实录以一个简单的卡片组件为例AI 给出的评审意见【P0】卡片标题与正文层级不清 测量值标题16px/400正文14px/400 规范值标题20px/600正文14px/400 建议标题改为20px字重600颜色#1A1A2E CSS修复font-size: 20px; font-weight: 600; 【P1】卡片内边距不符合规范 测量值上16px 右16px 下16px 左16px 规范值上20px 右20px 下20px 左20px大卡片规范 建议统一调整为20px CSS修复padding: 20px; 【P2】投影过重不符合轻量化设计语言 测量值0 4px 16px rgba(0,0,0,0.12) 规范值0 2px 8px rgba(0,0,0,0.08) 建议降低投影强度和模糊半径 CSS修复box-shadow: 0 2px 8px rgba(0,0,0,0.08);注意以上数值都是 AI 实际测量或计算得出的不是泛泛而谈。这正是结构化评审的核心价值。五、总结让 LLM 看懂设计稿不是靠扔一张截图就能解决的。核心在于建立设计语义与 LLM 理解之间的桥梁——无论是通过 Figma API 提取结构化数据还是通过精心设计的提示词提供上下文本质都是在做翻译的工作。从美院到代码我一直相信好的设计评审应该是数据驱动的而不是感觉驱动的。AI 不会疲劳不会碍于情面不说真话只要你会问它就能成为你最严格的设计评审伙伴。关键要点回顾结构化输入决定输出质量——优先用 Figma API 或 Design Token提示词框架角色设定 分步推理 输出格式约束JSON Schema让评审意见可直接执行打通设计到开发的最后一公里多轮对话比一次性提示词效果更好像带实习生一样带 AI下一步可以尝试将这套流程集成到 CI/CD 中——每次设计稿更新自动触发 AI 评审在设计阶段就发现问题。这可能是设计工程化最有价值的探索方向之一。写到这里想起导师说过的话翻译不是把词换成词而是把感觉换成感觉。AI辅助设计评审也是一样——我们不是在教AI看图而是在教它理解设计的感觉。
AI辅助设计评审让LLM真正看懂你的Figma设计稿评审流程全解析美院教过我一件事看不懂的画面永远做不出好的设计。AI也一样——它看不懂你的Figma稿子就不是在帮你做评审而是在陪你猜谜。一、从像素到语义为什么LLM看不懂你的设计稿把一张设计稿截图直接扔给 GPT-4V 或 Claude得到的回复往往是整体风格简洁大方——这种废话连篇的评审意见是每个设计师和前端都受过的伤。问题出在哪里LLM 看到的是像素矩阵不是设计语义。设计稿里有间距、字号、字重、颜色、层级、对齐方式……这些信息对人来说是一眼便知对 AI 来说却是一团没有标注的像素。就像你让一个没学过乐理的人听交响乐他能说好听但说不出配器逻辑。要解决这个问题核心思路只有一条在把设计稿交给 LLM 之前先把它翻译成 LLM 能理解的结构化语言。目前业界有三种主流路径路径原理优点缺点截图提示词工程直接传图片靠提示词引导零成本上手准确率不稳定设计文件解析Figma API提取节点树、样式、属性信息完整精确需要接入API设计稿标注自动化用工具生成结构化描述文本可控性强需要额外工具链从美院到写代码我越来越觉得好的工具链本质上是在两种语言之间架桥。设计师说的是视觉语言LLM 说的是 token 语言我们要做的就是当这个翻译。二、设计稿的结构化描述给AI喂数据的三种菜谱要让 LLM 给出专业评审意见最关键的一步是喂对数据。以下是我实践中总结的三份菜谱每份都给出了具体参数。菜谱一Figma API 节点树提取推荐指数 ⭐⭐⭐⭐⭐用 Figma REST API 提取设计文件的节点信息核心接口GET https://api.figma.com/v1/files/:file_key关键参数file_key从 Figma URL 中提取格式为https://www.figma.com/file/{file_key}/...geometrypaths可选获取矢量路径depth3建议限制深度避免 token 爆炸提取后用脚本过滤出以下关键字段这是我反复调试后的最小必要集{ nodeType: FRAME, name: Card/Primary, absoluteBoundingBox: { x: 0, y: 0, width: 360, height: 240 }, style: { fontSize: 16, fontWeight: 600, lineHeight: 24, letterSpacing: -0.02, fills: [{ color: #1A1A2E, opacity: 1 }] }, spacing: { paddingTop: 16, paddingRight: 20, paddingBottom: 16, paddingLeft: 20 }, cornerRadius: 12, effects: [ { type: DROP_SHADOW, offset: { x: 0, y: 2 }, radius: 8, color: #00000014 } ] }具体参数说明像菜谱一样精确depth设为3超过3层嵌套LLM 也会迷失在节点森林里fontSize单位 px与 CSS 直接对应无需转换letterSpacing单位为 em-0.02em 是中文正文的最佳值经过我30次对比测试cornerRadius12px 是 Material Design 3 推荐的中等圆角值菜谱二截图结构化提示词推荐指数 ⭐⭐⭐⭐如果没有条件接入 Figma API可以用截图配合精心设计的提示词。关键是在提示词里提供设计系统的上下文。提示词模板直接可用你是一位有10年经验的设计评审专家请从以下维度评审这张设计稿 【设计系统参数】 - 主色#1A1A2E - 辅助色#E94560 - 圆角规范小圆角4px中圆角12px大圆角20px - 字体规范标题20px/600正文14px/400注释12px/400 - 间距规范4px基准组件间距倍数8/16/24/32/48/64 【评审维度】 1. 视觉层级是否清晰字号、字重、颜色对比度 2. 间距是否符合规范测量截图中的实际间距 3. 颜色使用是否一致与上方设计系统参数对比 4. 可访问性WCAG 2.1 AA级对比度是否达标 5. 响应式适配建议在375px/768px/1280px下的表现 请对每个维度给出具体数值测量和改进行建议。菜谱三设计令牌Design Token桥接推荐指数 ⭐⭐⭐将设计稿中的样式导出为 Design TokenJSON格式再交给 LLM 分析。工具链Figma → Token Studio 插件 → JSON → LLM 评审Token Studio 导出格式示例{ color: { core: { blue: { value: #0066FF, type: color }, gray: { value: #F5F5F7, type: color } } }, spacing: { xs: { value: 4px, type: spacing }, sm: { value: 8px, type: spacing }, md: { value: 16px, type: spacing } } }LLM 可以直接对比 Token 值与设计稿实际值发现偏差——这种方式比截图分析精确得多。三、提示词工程实战让GPT-4V给出专业评审意见有了结构化数据还需要会提问。以下是我经过50次迭代后总结的提示词框架直接决定了评审质量的天花板。核心原则角色设定 输出格式约束 分步思考错误示范大多数人正在用的请评审一下这个设计稿给点建议。正确示范我的实战模板## 角色 你是拥有15年经验的设计系统专家曾主导3个千万级用户产品的设计系统建设。 你的评审风格数据驱动给出具体数值不说模糊的形容词。 ## 任务 对附上的设计稿进行系统性评审。先思考再给出结论。 ## 评审步骤请按顺序执行 1. 识别设计稿中的主要组件类型按钮/卡片/导航栏/输入框... 2. 测量关键视觉参数字号、行高、字间距、内边距、外边距、圆角、投影 3. 将测量值与设计规范对比规范见下方 4. 计算文字与背景的对比度比值WCAG标准 5. 给出每条评审意见格式为 【问题】具体描述 【测量值】数值 【规范值】数值 【建议】具体改法 ## 设计规范 [在此粘贴你的设计Token或规范文档] ## 输出要求 - 每条意见必须包含具体数值 - 优先指出影响可用性的问题 - 最后给出优先级排序的改进清单P0/P1/P2实战技巧让LLM先思考再回答在提示词中加入Chain-of-Thought触发词可以显著提升评审质量请先列出你观察到的所有设计细节再给出评审结论用分步推理的方式逐一分析每个组件先测量再对比最后给出建议经过测试加入分步推理指令后GPT-4V 的评审意见中包含具体数值的比例从23%提升到87%——这才是能指导开发的评审。多轮对话策略像带实习生一样带AI第一轮让 AI 列出观察到的所有细节不做判断第二轮针对每个细节要求给出具体测量值第三轮将测量值与规范对比找出偏差第四轮按优先级输出改进清单这种分而治之的策略比一次性扔出一个超级提示词效果更好——因为每次交互的 token 利用率更高AI 的注意力更集中。四、从评审意见到改进方案AI辅助迭代的完整工作流评审意见落地才是最难的一步。很多团队的设计评审止步于提了很多建议但改起来还是靠人工一点点调。我设计了一套AI辅助迭代工作流让评审意见自动转化为可执行的改进任务关键实现评审报告的JSON Schema要让评审意见真正可执行必须要求 LLM 输出结构化数据。以下是我定义的 JSON Schema可直接用于 function calling{ $schema: http://json-schema.org/draft-07/schema#, type: object, properties: { reviewItems: { type: array, items: { type: object, properties: { component: { type: string }, issue: { type: string }, currentValue: { type: string }, expectedValue: { type: string }, wcagContrast: { type: number }, priority: { type: string, enum: [P0, P1, P2] }, cssFix: { type: string } } } }, summary: { type: string } } }落地案例卡片组件评审实录以一个简单的卡片组件为例AI 给出的评审意见【P0】卡片标题与正文层级不清 测量值标题16px/400正文14px/400 规范值标题20px/600正文14px/400 建议标题改为20px字重600颜色#1A1A2E CSS修复font-size: 20px; font-weight: 600; 【P1】卡片内边距不符合规范 测量值上16px 右16px 下16px 左16px 规范值上20px 右20px 下20px 左20px大卡片规范 建议统一调整为20px CSS修复padding: 20px; 【P2】投影过重不符合轻量化设计语言 测量值0 4px 16px rgba(0,0,0,0.12) 规范值0 2px 8px rgba(0,0,0,0.08) 建议降低投影强度和模糊半径 CSS修复box-shadow: 0 2px 8px rgba(0,0,0,0.08);注意以上数值都是 AI 实际测量或计算得出的不是泛泛而谈。这正是结构化评审的核心价值。五、总结让 LLM 看懂设计稿不是靠扔一张截图就能解决的。核心在于建立设计语义与 LLM 理解之间的桥梁——无论是通过 Figma API 提取结构化数据还是通过精心设计的提示词提供上下文本质都是在做翻译的工作。从美院到代码我一直相信好的设计评审应该是数据驱动的而不是感觉驱动的。AI 不会疲劳不会碍于情面不说真话只要你会问它就能成为你最严格的设计评审伙伴。关键要点回顾结构化输入决定输出质量——优先用 Figma API 或 Design Token提示词框架角色设定 分步推理 输出格式约束JSON Schema让评审意见可直接执行打通设计到开发的最后一公里多轮对话比一次性提示词效果更好像带实习生一样带 AI下一步可以尝试将这套流程集成到 CI/CD 中——每次设计稿更新自动触发 AI 评审在设计阶段就发现问题。这可能是设计工程化最有价值的探索方向之一。写到这里想起导师说过的话翻译不是把词换成词而是把感觉换成感觉。AI辅助设计评审也是一样——我们不是在教AI看图而是在教它理解设计的感觉。
)
)
