Figma 高保真 HTML 生成

要解决的问题

前端从 Figma 设计稿还原页面时，常见难点不是“能不能写 HTML”，而是间距、字体、图片尺寸、响应式断点容易凭感觉估算，导致视觉还原偏差。该流程把还原过程拆成可确认的阶段，优先使用 figma.json 里的结构化数据，而不是只依赖截图目测。

工作过程与注意点

输入通常包括带 node-id 的 Figma 地址、参考截图，以及可选的图片节点 ID。核心步骤包括：

• 获取设计数据：解析 fileKey 和 nodeId，调用 Figma 数据接口并保存 figma.json。
• 下载图片资源：识别 imageRef、IMAGE-SVG 和用户指定节点，按 icon-*.svg、img-*.png、bg-*.png 等命名放入 images/。
• 生成单文件 HTML：从 layout、textStyle、fills、borderRadius、effects 等字段提取布局、字体、颜色、圆角、阴影，并输出内联 CSS。
• 视觉校准与适配：以 figma.json 的间距、宽高、字号为基准，再对照截图调整层次，并添加 @media 断点处理小屏。

适合快速得到可预览、可分享的静态页面。对复杂 SVG 动画、特殊滤镜等无法稳定用 HTML/CSS 表达的部分，应记录为限制项，而不是强行伪造效果。