domains / families / design / figma-to-static

figma-to-static

separate

Convert Figma design files to pixel-level mobile-first static HTML/CSS pages. Use when: (1) user provides a Figma file link and wants a static web page, (2) user sends design screenshots/assets and says "按设计图还原", (3) user asks to build a landing page from Figma, (4) iterating on Figma-to-code pixel accuracy. Handles: Figma MCP-first extraction (metadata/context/screenshots) with REST API fallback, layered DOM reconstruction (not whole-image paste), visual diff pipeline with region heatmap for quality validation, mobile-first responsive layout. NOT for: React/Vue/SPA frameworks, server-side rendering, interactive JS-heavy pages.

When to use

• Figma file link to static web page
• design screenshots/assets restoration
• build landing page from Figma
• Figma-to-code pixel accuracy iteration
• layered DOM reconstruction
• visual diff pipeline with region heatmap
• mobile-first responsive layout

When not to use

• React/Vue/SPA frameworks
• server-side rendering
• interactive JS-heavy pages

Skill page

Source