Figma to HTML

将 Figma 设计稿转换为高保真响应式 HTML 页面。

用户需提供

Figma 地址 — 带 node-id 参数的完整 URL（如 figma.com/design//...?node-id=428-2244）
参考截图 — 用户上传的目标页面截图（用于视觉校准）
需要下载的图片 node-id 列表（可选）— 指定需要导出为本地图片的节点 ID

工作流程

按以下 4 个阶段顺序执行，每阶段完成后向用户确认再继续。

阶段 1：获取 Figma 数据

从用户提供的 URL 中解析 fileKey 和 nodeId

URL 格式：figma.com/(file|design)//...?node-id=
nodeId 中的 - 替换为 :（如 428-2244 → 428:2244）

调用 Figma-AI-Bridge__get_figma_data 获取设计数据：

```

fileKey: 从 URL 解析

nodeId: 从 URL 解析（格式 1234:5678）

```

<工作目录>/-figma.json

```

文件名示例：428-2244-figma.json

阶段 2：下载图片资源

在工作目录下创建 images/ 文件夹（如不存在）
从阶段 1 的 JSON 数据中识别需要下载的图片节点：

含 imageRef 的填充（用户头像、背景图等）
含 IMAGE-SVG 类型的节点（图标、矢量图）
用户额外指定的 node-id

调用 Figma-AI-Bridge__download_figma_images 批量下载：

```

fileKey: 同上

localPath: <工作目录>/images

nodes: [

{ nodeId: "xxx:xxx", fileName: "<描述性名称>.png", imageRef: "..." },

{ nodeId: "xxx:xxx", fileName: "<描述性名称>.svg" }

]

pngScale: 2

```

命名规则：

图标类：icon-<功能描述>.svg（如 icon-bell.svg、icon-home.svg）
图片类：img-<描述>.png（如 img-avatar.png、img-banner.png）
背景类：bg-<描述>.png（如 bg-hero.png）

阶段 3：生成 HTML

读取 -figma.json 获取布局、样式、文本内容
参考用户上传的截图确认视觉效果
生成单文件 HTML（内联 CSS），遵循以下原则：

布局规则：

使用 Flexbox / CSS Grid 还原布局结构
从 figma.json 的 layout 字段提取：mode（row/column）、gap、padding、justifyContent、alignItems
尺寸使用相对单位（%, vw, rem），固定像素仅用于小元素（图标、间距）

样式规则：

从 textStyle 提取字体、字号、行高、字重
从 fills 提取颜色（支持纯色、渐变、图片填充）
从 borderRadius、strokes、strokeWeight、effects 提取圆角、边框、阴影/模糊
图片路径指向 images/ 目录下的本地文件

内容规则：

从 text 字段提取所有文案，保持原文
保留 emoji 字符
交互元素（输入框、按钮）使用对应 HTML 标签

语义化：

顶部导航 →
侧边栏 →
主内容 →
输入框 → / </code></li><li>可点击卡片 → <code><button></code> 或 <code><a></code></li></ul><ol><li>如有无法用 HTML/CSS 实现的 UI 元素（如复杂 SVG 动画、特殊滤镜），记录到：</li></ol><p> ```</p><p> <工作目录>/unimplemented-ui.md</p><p> ```</p><p> 格式：</p><p> ```markdown</p><p> # 未实现 UI 元素</p><p> | 节点 ID | 名称 | 原因 | 建议替代方案 |</p><p> |---------|------|------|-------------|</p><p> | xxx:xxx | ... | ... | ... |</p><p> ```</p><h3>阶段 4：视觉校准与响应式适配</h3><p>此阶段以 figma.json 数据为主要参考，用户上传的参考截图为辅助校验。</p><ol><li><strong>间距还原（最高优先级）</strong>：</li><ul><li>严格从 figma.json 提取所有间距数值：<code>padding</code>、<code>gap</code>、<code>margin</code>（来自 <code>layout</code> 和 <code>spacing</code> 字段）</li><li>元素之间的间距必须与 Figma 设计稿一致，不可自行估算</li><li>容器内边距、卡片间距、列表项间距等均以 figma.json 为准</li><li>仅在 figma.json 缺失间距数据时，参考截图辅助判断</li></ul><li><strong>图片尺寸还原（高优先级）</strong>：</li><ul><li>从 figma.json 的节点 <code>width</code>、<code>height</code> 字段提取图片原始尺寸</li><li>图片容器尺寸与 Figma 保持一致（使用 <code>max-width</code> + <code>height: auto</code> 保持比例）</li><li>头像、图标等固定尺寸元素使用 Figma 中的精确像素值</li><li>大图/Banner 使用相对单位但保持宽高比与 Figma 一致</li></ul><li><strong>字体还原（高优先级）</strong>：</li><ul><li>从 figma.json 的 <code>textStyle</code> 字段提取 <code>fontFamily</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>lineHeight</code></li><li>CSS 中的 <code>font-family</code>、<code>font-weight</code>、<code>font-size</code>、<code>line-height</code> 必须与 Figma 设计稿严格一致</li><li>注意中文字体映射：如 <code>PingFang SC</code> 需提供合理的 fallback（<code>-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif</code>）</li><li><code>textAlignHorizontal</code> / <code>textAlignVertical</code> 对应 CSS 的 <code>text-align</code> 和垂直对齐方式</li><li>不同层级文本（标题、正文、辅助文字）的字号、字重差异必须保留，不可统一化</li></ul><li><strong>视觉对比</strong>：将生成的 HTML 与参考截图逐区域对比</li><ul><li>整体布局比例</li><li>颜色准确性</li><li>字体大小和行高</li><li>元素对齐方式</li></ul><li><strong>美观性调整</strong>：</li><ul><li>确保视觉层次清晰（标题 > 正文 > 辅助文字）</li><li>颜色对比度满足可读性要求</li></ul><li><strong>响应式适配（小屏友好）</strong>：</li><ul><li>默认适配主屏幕宽度（参考 Figma 设计稿宽度）</li><li>减少固定宽度：大容器、卡片等优先使用 <code>max-width</code> + <code>width: 100%</code>，避免硬编码 <code>px</code> 宽度</li><li>添加断点适配小屏（≤768px）：</li><li>侧边栏折叠或隐藏</li><li>多列布局改为单列纵向排列</li><li>卡片宽度改为 <code>100%</code></li><li>字号适当缩小（<code>clamp()</code> 或 <code>@media</code> 均可）</li><li>输入框、按钮全宽</li><li>水平间距适当收缩（可按比例缩小，但不可完全去除）</li><li>添加超小屏断点（≤480px）处理极端情况</li><li>使用 <code>@media</code> 查询实现</li><li>图片添加 <code>max-width: 100%</code> 防止溢出</li></ul><li>输出最终 HTML 文件：</li></ol><p> ```</p><p> <工作目录>/index.html</p><p> ```</p><h2>输出文件清单</h2><pre><code><工作目录>/ ├── <nodeId>-figma.json # Figma 原始数据 ├── index.html # 最终 HTML 页面 ├── unimplemented-ui.md # 未实现元素记录（如有） └── images/ # 图片资源 ├── icon-*.svg ├── img-*.png └── bg-*.png </code></pre><h2>注意事项</h2><ul><li>工作目录默认为当前 workspace 下以项目名命名的文件夹，如用户未指定则用 <code>figma-output/</code></li><li>单文件 HTML 便于预览和分享，CSS 全部内联在 <code><style></code> 标签中</li><li>图片路径使用相对路径 <code>images/xxx</code></li><li>如果 Figma 数据中有组件实例（INSTANCE 类型），展开其子节点获取实际内容</li><li>渐变色从 <code>gradient</code> 字段直接提取 CSS <code>linear-gradient</code> 值</li></ul></div> </div> </div> <div id="tab-versions" class="detail-content"> <div class="detail-section"> <h2>版本历史</h2> <p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p> <ul class="version-list"> <li> <div> <span class="version-tag">v1.0.0</span> <span style="font-size:13px;color:#64748b;margin-left:8px;">Initial release</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-04-10 10:46 安全安全 </div> </li> </ul> </div> </div> <div id="tab-security" class="detail-content"> <div class="detail-section"> <h2>安全检测</h2> <div class="sec-grid"> <div class="sec-card"> <h4>腾讯云安全 (Keen)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://tix.qq.com/search/skill?keyword=84cf328a36b3e2da2b58fb5a8359e690" target="_blank">查看报告</a> </div> <div class="sec-card"> <h4>腾讯云安全 (Sanbu)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/26/422795_6dcc60808ea402642b60c35841a3accf.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781410354%3B1812946354&q-key-time=1781410354%3B1812946354&q-header-list=host&q-url-param-list=&q-signature=cd4988191dca93569aa9f9c18c5f6e0d346d70e2" target="_blank">查看报告</a> </div> </div> </div> </div>  <div style="margin-top:24px;"> <h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2> <div class="rec-grid"> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/tech-explorer">技术趋势追踪</a></h3> <div class="rec-owner">user_24c316b5</div> <div class="rec-desc">技术趋势追踪超级技能。追踪 GitHub 月度热门项目、AI 领域顶级项目、Awesome 精选资源，生成趋势报告与深度研究。触发词："技术趋势"、"趋势追踪"、"trending"、"热门项目"、"AI 项目"、"awesome [主题]</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 1</span> <span style="color:#5b6abf;">📥 120</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/skill-quality-rating">skill质量评分审查工具</a></h3> <div class="rec-owner">user_24c316b5</div> <div class="rec-desc">审查 AgentSkill 的整体质量，包含两个阶段：Description 审查（6维/12分）和 Body 内容审查（7维/14分），总分 26 分。Use when 用户说「审查 skill」「review skill」「检查技能」「</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 1</span> <span style="color:#5b6abf;">📥 109</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/openclaw-experience-distiller">openclaw-成功经验提取器</a></h3> <div class="rec-owner">user_24c316b5</div> <div class="rec-desc">从 OpenClaw 会话中提炼成功经验并建立可复用的经验库。触发场景：(1) 用户说「总结经验」「提炼经验」「成功经验」「经验库」「experience」；(2) 面对复杂任务前自动查询历史成功模式；(3) 会话压缩后自动分析是否存在「遇</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 0</span> <span style="color:#5b6abf;">📥 125</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded',function(){ document.querySelectorAll('.detail-tab').forEach(function(btn){ btn.addEventListener('click',function(e){ var tab = this.getAttribute('data-tab'); document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')}); document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')}); this.classList.add('active'); var el = document.getElementById('tab-'+tab); if(el) el.classList.add('active'); }); }); }); </script> <div class="footer"> <p>Skill工具集 © 2026</p> </div></body> </html>