设计师和产品经理，这两个角色在设计产业中原本界限分明，但如今正变得越来越模糊。

设计师不仅要考虑用户体验和产品功能，产品经理也需要具备一定的设计思维。

在这种融合趋势下，一个很现实的问题摆在眼前：如何把一个灵感快速变成可操作的设计稿？

项目背景

在设计领域，从概念草图到最终视觉呈现，中间往往要经历一系列复杂步骤。

技术限制、沟通障碍，再加上来回返工，都会拖慢设计推进速度。设计师们对此应该深有体会。

正是基于这个痛点，我们开发了一款名为DesignGenie的Figma插件，目标就是让整个创意流程变得更简单、更高效。

DesignGenie的核心思路

通过这个工具，设计师可以快速捕获网页上的创意，并将其转化成Figma中可直接操作的设计资源。

这样一来，品牌形象更新、界面设计迭代周期都能大幅缩短。

我们希望它做到的三件事

• 第一，快速捕捉和展示设计灵感，帮助设计师快速将概念转化为视觉稿。
• 第二，支持快速探索和更新视觉语言，配合产品经理确定风格方向。
• 第三，在新网站构建过程中，能加速迭代和测试不同设计方案。

技术评估关注点

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

DesignGenie的功能亮点

• 无限导入：用户可以无限次从网站导入内容，工作效率直接拉满。
• 多视口导入：支持多个视口，满足不同设备的设计需求。
• 主题模式：深色/浅色模式切换，取决于源网页是否支持。
• 编辑与协作：在Figma中直接编辑网页元素，团队实时反馈。
• 提炼功能：可以提炼视觉稿中优秀的图标等元素。
• 字体配置：生成时可快速匹配需要替换的字体样式。
• 高度还原：保留原有网页的布局、样式，还原度很高。
• 协作便捷：支持团队共享，提升产设研协作效率。

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

DesignGenie的工作流程

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

下面拆开来讲。

第一阶段：获取HTML

服务端使用playwright工具抓取目标页面内容。

如何组织html的内容和结构？通过nodeType和tagName对节点进行分类，再通过childNodes获取子节点并计算嵌套关系。

整体分为6类对象：FrameObj、TextObj、SvgObj、ImageObj、VideoObj、RectangleObj。

对象分类说明

• FrameObj对应Figma中的FrameNode，是一个用来定义布局层次的容器。

主要属性包含Rect（x, y, width, height）、children和styles。

Rect通过Element.getBoundingClientRect()计算得到，children通过childNodes处理div嵌套关系，styles则用window.getComputedStyle获取。

对于transform属性（rotate、skew等），计算后给出matrix，直接对应Figma的relativeTransform。

• TextObj对应文本节点，记录value和font。

value一般从TextNode.nodeValue取，但在input、select等元素中nodeValue可能为空，此时会兜底取placeholder。

• SvgObj当nodeType为1且tagName为'SVG'时，记录svg = elem.outerHTML。
• ImageObj & VideoObj类似，获取对应标签的src属性即可。

注意video的src可能包裹在source标签下。

• RectangleObj是一个特殊分类，用来处理伪元素。

伪元素无法直接通过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等。

核心属性映射

• Position属性

获取阶段的obj都是从左上角{ x: 0, y: 0 }开始计算位置的。

通过递归IFrameNode的子节点，计算相对父级的x,y，最外层节点在生成时相对画布给定可见区x,y，就能得到所有节点在Figma中的位置。

• Fill属性

已经支持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计算过程类似。

• Stroke属性

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

• Effects属性

通过boxShadow计算，支持InnerShadowEffect和DropShadowEffect。

我们实现了parseCSSNodes对css内容进行拆词，从拆词内容中提取offsetX、offsetY、blurRadius、spreadRadius等属性。

第三阶段：生成Design

基于解析阶段产出的DSL数据结构，通过Figma API直接生成设计稿。

核心就是递归创建节点，使用figma.createFrame()、figma.createText()、figma.createNodeFromSvg()、figma.createRectangle()等API，并通过appendChild设置层级关系。

总结感悟

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

平衡设计和产品思维

设计师注重细节和用户体验，产品经理则需要考虑商业价值和用户需求的平衡。

这要求在创意和实用性之间找到最佳点，同时确保每个设计决策都能带来实际商业收益。

学习新技能

学习新技能是免不了的。

除了设计，项目管理、数据分析、市场策略等都需要掌握。

这些技能需要时间和精力，更需要在真实项目中不断试错和完善。

适应新的角色

适应新的角色也是一道坎。

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

用户体验与用户价值的平衡

关于用户体验与用户价值的平衡，设计师追求极致体验，产品经理更注重价值交换。

体验是润滑剂，但重要性取决于产品类别。

比如阅读类产品，字体和行间距极其关键；工具类产品中，这些细节对用户价值的贡献可能就没那么大了。

资源分配与试错

资源分配与试错是团队层面的核心课题。

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

市场定位与用户识别

市场定位与用户识别是最后一个关键点。

产品设计不光是创意实现，更重要的是市场定位、用户识别、PMF验证和策略调整。

我们的目标，就是缩短从创意到市场反馈的周期，提升迭代速度和市场响应能力。

从技术角度看，这是一次完整的“前端页面→设计稿”的自动转换方案。

从产品角度看，这是一次让设计和开发之间壁垒更薄、效率更高的尝试。

未来还有很长的路要走，但至少，第一步已经迈出去了。