Import from AI tools html.to.design docs Home Docs Blog Home Docs Blog Table of Content Getting started What is html.to.design? Features Subscribe to PRO PRO plan PRO for teams FAQ Import methods Web Extension File Editor MCP Electron SDK Import from AI Overview Claude AI Lovable Genspark Browser extension What is it? How to install Import a private webpage Import from other tools How-to Launch the Figma plugin Open an .h2d file Open a .make file Import a mobile version Import in any language Import via query mode Import a list of URLs Improve image quality Troubleshooting Report an issue Missing fonts Not capturing full page Different from real phone Bot-protected sites Links Figma plugin Figma plugin for teams Browser extension Let’s talk Send us an email Message on Discord X/Twitter @html_to_design Getting started What is html.to.design? Features Subscribe to PRO PRO plan PRO for teams FAQ Import methods Web Extension File Editor MCP Electron SDK Import from AI Overview Claude AI Lovable Genspark Browser extension What is it? How to install Import a private webpage Import from other tools How-to Launch the Figma plugin Open an .h2d file Open a .make file Import a mobile version Import in any language Import via query mode Import a list of URLs Improve image quality Troubleshooting Report an issue Missing fonts Not capturing full page Different from real phone Bot-protected sites Links Figma plugin Figma plugin for teams Browser extension Let’s talk Send us an email Message on Discord X/Twitter @html_to_design Import from AI tools Import from AI using the browser extension The html.to.design browser extension allows you to import previews generated by AI tools directly from your browser. You can capture a design preview without deploying the generated code to a live URL. The browser extension supports the following AI tools: AI Studio Anything Bolt ChatGPT Claude Deepseek Figma Make GenSpark Gemini Gemini CLI Kimi Komposo Lovable Magicpath Magic Patterns Manus Meku MiniMax Agent OpenAI Codex Opencode Polymet Qwen Readdy Replit Skywork v0 Variant The list is constantly growing, so if you use an AI tool that is not listed here, please let us know via the Discord community. Example Here is a short video showing how to import a design preview generated by Figma Make using the html.to.design browser extension: Import HTML code from AI If all you have is the HTML code, you can also import it to Figma layers with the html.to.design plugin. There are two methods: Option A: Paste your HTML code in the Editor tab. Option B: Upload or drop a .zip file with your code in the File tab. This method if preferred if you’re importing from Google Stitch to Figma, for example. Previous page Electron SDK Next page Claude AI On this page Overview Import from AI using the browser extension Example Import HTML code from AI html.to.design Menu Home Docs Blog Guides Import your website into Figma Convert private webpages into Figma designs Import mobile screens into Figma Benchmark competitors in Figma Collaborate and get feedback Reproduce UI effects in Figma Try out different copy Get missing design assets html.to.design © 2022-2026 Brought to you by Terms & Conditions Privacy Policy