How to Recreate an AI Prototype from Claude or Figma Make into a Figma Design File

🔁 Workflow between Claude and Figma

Note: This document is based on my experience and trials/errors but summarised with AI

From Claude to Figma (Prototype → Design)

  1. Generate your prototype in Claude.
    Ask Claude to output your UI as HTML. Example prompt: “Create a responsive credit dashboard with a sidebar, chart area, and summary cards — output clean HTML and inline CSS.”

  2. Publish your artifact(if you’re on a personal or standard Claude account).
    • Once the prototype is ready, click “Publish” in the top-right corner of the artifact view.
    • Copy the public artifact link.

  3. Import into Figma with the ‘html.to.design’ plugin.
    • In Figma, open Plugins → html.to.design
    • Paste the artifact link directly into the plugin
    • When you import the artifact using html.to.design, it will appear inside a main frame where the layout is automatically structured using Figma’s Auto Layout.
    • A corresponding component overview panel will also appear, showing the base components used in the generated design.
    • Note that some Auto Layout structures may contain unnecessary nesting or wrappers, since the plugin follows the original HTML hierarchy quite literally.

  4. If your environment is private (enterprise or closed setup):
    • You can’t publish artifacts publicly.
    • Instead, download the artifact:
      • Click the three dots (•••) in the artifact view
      • Choose “Download as HTML” or “Export artifact”
        (If your artifact is only available as a TXM file, scroll down to read the instructions on how to recreate it.)
      • Save the file locally
    • Then, open the HTML file in any text editor, copy the full code, and paste it into the html.to.design plugin manually.

  5. Tidy and structure your imported design.
    • Apply your brand styles
    • Use Auto Layout for all frames (Shift + A)
    • Name and group layers properly for handoff.




From a Claude TXM prototype → Rebuild to HTML

If your prototype in Claude was created in another format (e.g. TXM or non-HTML text output):

  1. Start a new chat in Claude.
  2. Upload the TXM file or paste the content.
  3. Use a clear prompt like: “Recreate this prototype as a clean HTML + inline CSS version suitable for import into Figma using the html.to.design plugin.”
  4. Claude will regenerate your prototype in HTML, which you can then either publish or download as described above.
  5. ⚠️ In most cases (around 8 out of 10), you’ll need to point out missing or incorrect elements that occurred during the reconstruction process.
    • Review the output carefully and give feedback until it looks exactly the way you want it to.
    • Adding screenshots or visual examples of what’s missing or incorrect often helps Claude understand and refine the design more accurately.
    • Repeat this process iteratively until the regenerated HTML fully matches your intended layout and design.


From Figma to Claude (Design → Functional Prototype)

  1. Export your Figma design as HTML using a plugin like Figma to HTML or Figma to Code. Or you can paste your design as a print screen/copied as a PNG
  2. Open Claude and paste the HTML/image with a prompt such as: “Turn this into an interactive prototype with transitions and hover effects using HTML, CSS and minimal JavaScript.”
  3. You can then iterate within Claude, publish the result, and preview or import it back to Figma again if needed.


⚙️ Figma Make (AI Design Assistant) Workflows

From a regular Figma design → Figma Make

  1. Open Figma Make (AI) and describe your intent, for example: “Turn this web dashboard into a mobile version using Auto Layout and consistent spacing.”
  2. Create and refine the prototype inside Figma Make until it looks the way you want.
  3. When you’re happy with the result, click the “Copy design” icon.
    • The design is now copied and can be pasted directly into your regular Figma file, where it will appear as editable layers and frames.
  4. Once pasted in your main Figma file, apply Auto Layout (Shift + A), adjust spacing, and reconnect components as needed.
    • You now have a fully editable and structured design ready for collaboration or handoff.


💡 Pro Tips

  • Public Claude artifacts import seamlessly via link. For private environments, always download and paste HTML manually.
  • If your artifact exists only as a TXM file, rebuild it using the guide above.
  • Keep Claude’s HTML output semantic and clean for best results in Figma.
  • When regenerating from TXM → HTML, explicitly request clean and readable structure for smoother import.

Content