title: "AI Draws the Design, But You Can't Edit It—This Dead End, Someone Bypassed It in 3 Minutes" description: "UI designs generated by GPT-Image-2 are dead images; Figma MCP deployment is complex and rate-limited. A 3-step workflow bypasses MCP to turn AI-generated designs into editable Figma files." tags: ["AI Design", "Figma", "GPT-Image-2", "Workflow", "html.to.design"]

AI Draws the Design, But You Can't Edit It—This Dead End, Someone Bypassed It in 3 Minutes

Have you ever seen a chef make a full table of dishes but can't taste any of them?

AI image generation tools are in this state right now. GPT-Image-2 can generate a seemingly decent APP homepage design in 10 seconds—gradients, rounded corners, card layouts all present—but it's a PNG. You can't change the font size, adjust spacing, or swap the blue for your brand color. When designers receive this image, they either redraw it from scratch or use it as a reference, essentially no different from having a photo.

The bottleneck of AI design has never been generation—it's editing.

An Overlooked Shortcut

Many know Figma has opened MCP interfaces, allowing AI Agents to directly manipulate the canvas and generate editable layers. Sounds great, but in practice:

• Deploying MCP Server requires configuring the Node environment, applying for API tokens, and handling permission whitelists.
• The Admin console of enterprise Figma may directly block plugin execution permissions.
• API calls have rate limits, making batch generation prone to hitting walls.

This is not a shortcut—it's another detour.

But Figma has officially launched a Chrome extension—html.to.design (by ‹div›RIOTS). What it does is simple and brute-force: turn any web page into an editable Figma file.

This capability perfectly fills the missing link in the AI design workflow.

Three Steps to Go: From AI Output to Editable Figma

① Install the extension, flip one switch

Install the html.to.design extension from the Chrome Web Store, log in to Figma, and authorize. There's a setting that's easy to miss: go to chrome://extensions → click extension details → enable "Allow access to file URLs". Without this, capturing local HTML files will fail.

② AI generates the design + code reconstruction

Use GPT-Image-2 to generate the UI design screenshot you want. Then feed that screenshot to Codex (or any AI that can write front-end code) and have it reconstruct the design using HTML/CSS.

The key at this step is not perfect reconstruction, but a web page file that can be opened. Codex, Claude, Cursor can all do this; even letting GPT write code directly works. Finally, open this HTML file in Chrome and confirm the layout and visuals are roughly aligned.

③ One-click capture, paste and edit

In Chrome, open the html.to.design extension, select "Capture Page", wait 1-2 seconds. Then switch to Figma, go to any page, and Ctrl+V paste.

Now the design becomes editable layers. Text can be changed, colors adjusted, components dissembled. From a dead image to an editable design in less than 3 minutes.

Why This Route Is More Practical Than MCP

The MCP approach is suitable for scenarios requiring Agent fully automated batch runs. But for most designers and developers, you only convert a few designs per day; a 3-minute manual operation is far more worthwhile than spending half a day setting up the environment.

Stay Realistic: Don't Expect 100% Accuracy

This route is not a silver bullet. There are some practical issues to be aware of:

Conversion accuracy has limits. The html.to.design official documentation explicitly states that HTML-to-Figma is a "best-effort" process. iframes, pseudo-elements, and some CSS animations can't be recognized. Complex responsive layouts may shift, requiring manual tweaks.

Free tier has quotas. Monthly import limits apply; heavy users need to upgrade to Pro ($18/month or $10/month if paid annually). If you use it occasionally, the free allowance is sufficient.

Code reconstruction quality determines the final result. The quality of AI-generated HTML/CSS varies. If the reconstructed web page is already off, it will be off in Figma too. This step is the bottleneck of the entire workflow—try multiple AI tools to compare reconstruction results.

Not all designs are suitable for this route. Illustrations, 3D renders are nearly impossible to reconstruct in HTML; this route won't work. It is best for UI interface designs—cards, lists, navigation, forms—these structured layouts.

Trend Analysis: AI Design Competition Focus Is Shifting

In 2025 everyone was competing on "generate UI with one sentence"; in 2026 the trend changed—whoever can turn AI output into editable designs, wins.

At Config 2026, Figma launched three major features: Code Layers, Figma Agent, and Motion. The core logic is to make AI output no longer "dead images" but live layers editable within design tools. Google Stitch, Pixso AI are moving in the same direction—generate in the canvas, edit in the canvas.

The html.to.design workflow is essentially a "folk patch" before official solutions mature. It's not perfect, but it works now, and you can get it running in 3 minutes.

Once Figma Agent and Code Layers are fully available, this route may be replaced by official solutions. But until then, this is the shortest path to turning AI design drafts from "view-only" into "editable".

💡 Tool Links

• html.to.design extension: Search "html.to.design" in Chrome Web Store
• html.to.design Figma plugin: Search "html.to.design by ‹div›RIOTS" in Figma Community
• Alternatives: Copy web to Figma (free, unlimited), Codia Web2Figma (AI-enhanced conversion)