Extract a Claude Design artifact into a live app component
Claude Design ships beautiful artifacts, but only as preview URLs. This workflow pulls the real HTML into your own app so you can embed it, theme it, and ship it, no Tailwind imitation, no screenshots pretending to be proof.
- Time
- 15 minutes
- Cost
- $0
- Stack
- Claude CodeChrome DevTools MCPNext.jsChrome
You’re stuck with
You built something great in Claude Design but can't get the real HTML out. Screenshots aren't proof and re-implementing the Tailwind by hand loses every bit of interactivity.
You end up with
A real Claude Design artifact running inside a /your-route page in your Next.js app, served from your own domain, with its JS, CSS, and theming intact.
This workflow produced
Jarvis Founder Mode
The initial Jarvis Founder Mode from Claude Design, shipped from a single prompt. Live ⌘K command dock, compute burn tracker, inline release notes, pre-flight checklist, and a five-factor launch risk radar, all from one pass.
The recipe
1. Open the artifact you want to keep
In Claude Design, open the finished project page. The one with the preview iframe on the right and your prompt history on the left.
Make sure the artifact is fully loaded in the preview pane before you move on. If the preview shows a spinner or a "regenerating" state, the HTML you're about to pull will be incomplete.
2. Wire Claude Code to your browser
Open a Chrome window with remote debugging enabled. From a fresh terminal:
open -na "Google Chrome" --args \
--remote-debugging-port=9222 \
--user-data-dir="$HOME/.claude-design-chrome"
The separate --user-data-dir matters. Chrome refuses to enable CDP on your default profile. Use a scratch profile and log into claude.ai inside it once.
Then enable the Chrome DevTools MCP in your Claude Code settings (it ships built-in, just toggle it on). Claude Code can now drive that browser window directly.
3. Ask Claude Code to pull the HTML
Paste this into Claude Code:
Use chrome-devtools to list pages. Select the tab on claude.ai/design
showing my project. Run evaluate_script to return
document.documentElement.outerHTML from the preview iframe only,
not the outer app shell. Save the result to
public/proofs/<your-slug>.html.
Claude Code will find the iframe (the preview is sandboxed), run the eval inside it, and write the file. Confirm you got real markup, a full <html>...</html> tree, not a 20-line shell.
4. Strip Claude's preview bridge
Claude Design injects a small postMessage script into every preview so the editor can receive resize and event signals. When you run the HTML outside claude.ai, that script throws and pollutes your console.
Find and remove it. It always looks something like:
<script>
window.addEventListener("message", /* claude preview bridge */ ...);
window.parent.postMessage(/* ... */);
</script>
One regex, one pass, one commit. Your iframe stops complaining immediately.
5. Grab any shared CSS the artifact needs
If the preview references an external stylesheet (often colors_and_type.css for artifacts built inside a shared design system), ask Claude Code to fetch it too:
Inspect the saved HTML. If it links to any external stylesheet from
claude.ai, use chrome-devtools to fetch each stylesheet and save
them under public/proofs/ next to the HTML. Rewrite the link tags to
point at the local copies.
Now the file is self-contained.
6. Wrap it in a React component
Create app/<route>/<route>.tsx:
"use client"
export function MyArtifact() {
return (
<div className="rounded-xl border border-border overflow-hidden">
<iframe
src="/proofs/your-slug.html"
title="Claude Design artifact"
className="w-full h-[720px] bg-background"
sandbox="allow-scripts allow-same-origin"
/>
</div>
)
}
Keep allow-scripts so interactivity still works. Keep allow-same-origin so fonts and relative paths resolve. Drop any other sandbox flag, you don't need it.
7. Ship it
Route that component from wherever makes sense, a /builds/[slug] page, a landing hero, a stack showcase. Commit the HTML to public/proofs/ and let Next.js serve it as a static asset. No build step, no hydration cost, no database. The artifact is now yours.
Why this workflow beats the alternatives
Screenshots are not proof. Anyone can fake a hero image. A working iframe proves the design is real and reacts to input.
Re-implementing the Tailwind is a trap. You spend two hours copying class names and still miss the small transitions, the focus states, and the JS. Then a prospect opens it on mobile and the layout breaks. Pull the real HTML instead.
Claude Design is a capture tool, not a shipping tool. Treat the preview as the source of truth and your app as the delivery layer. The moment you cross that boundary cleanly, the artifact becomes a compounding asset.
Steal this starter
Drop these three blocks into a fresh Claude Code conversation, in order, with your own slug.
Prompt 1, extract:
Use chrome-devtools MCP. Find the tab on claude.ai/design showing
my project <project-id>. Run evaluate_script inside the preview
iframe to capture document.documentElement.outerHTML. Write the
result to public/proofs/<your-slug>.html.
Prompt 2, clean:
Open public/proofs/<your-slug>.html. Remove any <script> block
that references window.parent or postMessage from the claude.ai
preview bridge. If there are external stylesheet links pointing to
claude.ai, fetch each one, save under public/proofs/, and rewrite
the link tag to point at the local copy.
Prompt 3, wrap:
Create app/<route>/<route>.tsx as a client component that renders
/proofs/<your-slug>.html inside a fixed-height iframe with
sandbox="allow-scripts allow-same-origin" and rounded border
styling matching the app shell.
That's the whole recipe. Takes about fifteen minutes once the Chrome profile is set up, and the second one you do takes five.
Get new workflows and breakdowns in your inbox.