从零打造 AI 设计智能体

设计师和产品经理，这两个角色在设计产业中原本界限分明，但如今正变得越来越模糊。设计师不仅要考虑用户体验和产品功能，产品经理也需要具备一定的设计思维。这种融合趋势下，一个很现实的问题摆在眼前：

在设计领域，从概念草图到最终视觉呈现，中间往往要经历一系列复杂步骤。技术限制、沟通障碍，加上来回返工，设计师们对此应该深有体会。正是基于这个痛点，我们开发了一款名为DesignGenie的Figma插件，目标就是让整个创意流程变得更简单、更高效。

先说说核心思路：通过这个工具，设计师可以快速捕获网页上的创意，并将其转化成Figma中可直接操作的设计资源。这样一来，品牌形象更新、界面设计迭代周期都能大幅缩短。

具体到能力层面，我们希望它至少做到三点：第一，快速捕捉和展示设计灵感，帮助设计师快速将概念转化为视觉稿；第二，支持快速探索和更新视觉语言，配合产品经理确定风格方向；第三，在新网站构建过程中，能加速迭代和测试不同设计方案。

在技术评估上，需要考虑几个维度：工具的界面设计是否直观易用，能不能适应不同水平的设计师；技术实现是否可行，包括算法、数据处理和图形渲染能力；市场定位和与竞品的差异化优势；以及开发成本、时间和资源的预估。

先快速过一下DesignGenie的功能亮点：

• 无限导入
  ：用户可以无限次从网站导入内容，工作效率直接拉满。

• 多视口导入
  ：支持多个视口，满足不同设备的设计需求。

• 主题模式
  ：深色/浅色模式切换，取决于源网页是否支持。

• 编辑与协作
  ：在Figma中直接编辑网页元素，团队实时反馈。

• 提炼功能
  ：可以提炼视觉稿中优秀的图标等元素。

• 字体配置
  ：生成时可快速匹配需要替换的字体样式。

• 高度还原
  ：保留原有网页的布局、样式，还原度很高。

• 协作便捷
  ：支持团队共享，提升产设研协作效率。

高级功能目前处于灰度测试阶段，包括可创建自动布局，以及导入需要登录状态的页面（通过Chrome插件配合使用）。

说到底，DesignGenie插件的核心工作就三件事：获取html结构和资源，然后解析，最后生成设计稿。我们拆开来讲。

第一阶段：获取HTML

服务端使用playwright工具抓取目标页面内容。如何组织html的内容和结构？通过nodeType和tagName对节点进行分类，再通过childNodes获取子节点并计算嵌套关系。整体分为6类对象：FrameObj、TextObj、SvgObj、ImageObj、VideoObj、RectangleObj。

对应Figma中的FrameNode，是一个用来定义布局层次的容器。主要属性包含Rect（x, y, width, height）、children和styles。Rect通过Element.getBoundingClientRect()计算得到，children通过childNodes处理div嵌套关系，styles则用window.getComputedStyle获取。对于transform属性（rotate、skew等），计算后给出matrix，直接对应Figma的relativeTransform。

对应文本节点，记录value和font。value一般从TextNode.nodeValue取，但在input、select等元素中nodeValue可能为空，此时会兜底取placeholder。

当nodeType为1且tagName为'SVG'时，记录svg = elem.outerHTML。

类似，获取对应标签的src属性即可。注意video的src可能包裹在source标签下。

是一个特殊分类，用来处理伪元素。伪元素无法直接通过getBoundingClientRect获取x,y，需要根据父级和定位属性叠加计算。根据position分类：相对定位根据父级padding计算；absolute定位按marginLeft+left、marginTop+top的方式计算，优先级left>right、top>bottom；fixed定位与absolute计算过程一致，父级在最外层html.Node上计算。

另外，资源内容（字体、图片等）在插件端通过src请求可能有跨域问题，因此通过playwright的route监控在服务端直接加载并处理好content和mimeType，保存在assets中直接发给插件端。

第二阶段：解析DSL

这是插件的核心环节。在这个阶段，将获取到的htmlObj进行计算，映射到Figma的node属性，包括IFrameNode、IRectangleNode、ITextNode以及Radius、Stroke、Fills等。

：获取阶段的obj都是从左上角{ x: 0, y: 0 }开始计算位置的。通过递归IFrameNode的子节点，计算相对父级的x,y，最外层节点在生成时相对画布给定可见区x,y，就能得到所有节点在Figma中的位置。

：已经支持SolidPaint、GradientPaint、ImagePaint和VideoPaint所有Figma Paint类型。SolidPaint通过styles.color+opacity或styles.backgroundColor+opacity计算。GradientPaint需要计算gradientTransform和gradientStops，核心是通过拆词工具对css渐变部分进行处理，计算缩放、角度和偏移。ImagePaint通过Figma API上传图片获取imageHash，并根据backgroundSize计算scaleMode（FILL/FIT/CROP）。VideoPaint计算过程类似。

：通过borderColor、borderWidth、borderStyle计算strokes、strokeWeight和strokeAlign。

：通过boxShadow计算，支持InnerShadowEffect和DropShadowEffect。我们实现了parseCSSNodes对css内容进行拆词，从拆词内容中提取offsetX、offsetY、blurRadius、spreadRadius等属性。

第三阶段：生成Design

基于解析阶段产出的DSL数据结构，通过Figma API直接生成设计稿。核心就是递归创建节点，使用figma.createFrame()、figma.createText()、figma.createNodeFromSvg()、figma.createRectangle()等API，并通过appendChild设置层级关系。

总结感悟

回过头来看这个项目，其实有很多值得总结的地方。

先说说

。设计师注重细节和用户体验，产品经理则需要考虑商业价值和用户需求的平衡。这要求在创意和实用性之间找到最佳点，同时确保每个设计决策都能带来实际商业收益。

是免不了的。除了设计，项目管理、数据分析、市场策略等都需要掌握。这些技能需要时间和精力，更需要在真实项目中不断试错和完善。

也是一道坎。作为产品经理，要为产品的最终结果负责，这意味着在必要时做出艰难决策——调整方向、终止项目，这种责任感和决策压力是设计师岗位不曾经历的。

关于

，设计师追求极致体验，产品经理更注重价值交换。体验是润滑剂，但重要性取决于产品类别。比如阅读类产品，字体和行间距极其关键；工具类产品中，这些细节对用户价值的贡献可能就没那么大了。

是团队层面的核心课题。资源有限时，如何合理分配进行试错，如何确定用户对产品的真实需求，这需要持续思考和权衡。

最后是

。产品设计不光是创意实现，更重要的是市场定位、用户识别、PMF验证和策略调整。我们的目标，就是缩短从创意到市场反馈的周期，提升迭代速度和市场响应能力。

从技术角度看，这是一次完整的“前端页面→设计稿”的自动转换方案；从产品角度看，这是一次让设计和开发之间壁垒更薄、效率更高的尝试。未来还有很长的路要走，但至少，第一步已经迈出去了。