提取公共样式与变量

在导入网页到 MasterGo/Pixso/即时设计 时，自动提取页面中的 CSS 变量、颜色、字体等公共样式，并在设计稿中生成对应的公共样式和颜色变量，帮助你快速构建一致的设计系统。

什么是公共样式？

每个网站/网页一般都有复用的颜色、字体、阴影特效等，Refore 网页转设计 插件现在支持在导入的时候自动识别、提取这些公共的样式，并更新到相应的 Figma 等设计软件的样式库里方便你统一修改、复用。

Refore 网页转设计 在给颜色变量起名的时候不是随便起的——我们内置了 1570+ 专业颜色名称库，能自动识别最接近的标准色名：

• #DC2626 → 瓦伦西亚红`
• #2563EB → 蓝丝带`
• #F3F4F6 → 野沙灰`

什么是样式变量？

简单来说，就是样式里的公共变量，比如字号、色值、粗细等等：

网页中的 CSS	导入后自动生成
color: #DC2626	颜色变量：color/Red/瓦伦西亚红37
font-size: 14px + font-family: Inter	文字样式：Inter-14/Regular
box-shadow: 0 2px 4px rgba(0,0,0,0.1)	效果样式：Drop Shadow-0
border-radius: 8px	数值变量：radius/8

同时，会自动去重：相同的颜色值会复用同一个变量，不会重复创建。

使用场景

• 建立设计规范：一键将品牌官网转换为可复用的设计系统
• 竞品分析：快速整理竞品的配色方案和字体规范
• 设计迁移：从旧项目提取样式，应用到新设计

如何使用

1. 点高级导入按钮 -> 在弹框里勾选”提取公共样式和变量” 如果是导入 HTML 文件, 拖入 HTML 文件 -> 在弹框里勾选”提取公共样式和变量”

2. 在画板右侧的样式面板里查看自动生成的颜色变量、文字样式、效果样式和数值变量

兼容性说明

因为平台基础能力差别，目前只有 Figma、Pixso 有变量功能（MasterGo还在内测）。所以，我们的插件在MasterGo 和 即时设计里也能提取公共样式并友好命名，但无法将相关数值存在变量里