unbundle-design-export

What this skill does

Claude Design exports are single self-extracting HTML files. They pack all assets — fonts, CSS, and JavaScript — as base64+gzip blobs inside custom <script> tags. When opened in a browser, a runtime unpacker reconstructs these assets on the fly.

This skill decodes those blobs and produces a clean, static file structure:

project/
├── index.html    <- plain HTML (no script tags)
├── css/
│   └── app.css   <- all extracted styles
└── fonts/
    ├── font-1.woff2
    └── ... (all font files)

The JavaScript in the bundle is Claude Design's own edit-mode overlay (React + a TweaksPanel component). It is not user content and can be safely discarded for static deployment.

How to perform the extraction

Run the bundled script, passing the directory that contains the export:

node <path-to-this-skill>/scripts/extract_bundle.mjs <project-directory>

No npm install needed — the script uses only Node.js built-ins. It:

• locates the bundle file in the project directory (index.html, index.php, or any .html/.php file containing a __bundler/manifest block)
• backs up the original bundle to _original_bundle<ext>.bak before touching it
• decodes the fonts into fonts/ and the styles into css/app.css
• strips the Claude Design runtime <script> tags and Google Fonts preconnect hints
• overwrites the bundle file with clean static HTML that links css/app.css

If the script exits with an error: stop immediately. Do not delete the backup file. Report the full error output to the user and wait for instructions.

Done when

The task is not complete until every item on this list is verified. Each item must be confirmed by actively reading or inspecting the relevant file — do not assume correctness based on the extraction script having run without errors. Complete any unmet item before reporting success.

• CSS link present: read the output HTML file and confirm it contains <link rel="stylesheet" href="css/app.css"> inside <head>
• CSS non-empty: read css/app.css and confirm it contains actual CSS rules (not an empty or whitespace-only file)
• Fonts extracted: list the fonts/ directory and confirm at least one .woff2 file is present
• No script tags: read the output HTML file and confirm it contains zero <script occurrences — if any remain, resolve them per the Troubleshooting section before proceeding
• Backup removed last: only after every item above has passed, delete the _original_bundle*.bak file from the project directory. If any check failed, keep the backup — it is the only remaining copy of the original export — and report the failure instead.

Troubleshooting

"No Claude Design bundle found" — The file may be named differently. Check that __bundler/manifest appears in the file, then pass the filename explicitly as a second argument: node <path-to-this-skill>/scripts/extract_bundle.mjs <project-directory> <bundle-filename>.

Script tags remain after extraction — Read the HTML file and list every remaining <script> tag. Show the list to the user and ask explicitly whether each should be kept or removed. Do not decide independently. Do not mark the task complete until the user has answered and the appropriate action has been taken.

node not found — Node.js must be installed. Download from nodejs.org. Version 18+ is recommended (ESM support).

If the user wants JavaScript preserved — Some projects include interactive components. In that case, keep the text/jsx asset, compile it with Babel (npx babel --presets @babel/preset-react), write it to js/app.js, and add a <script src="js/app.js"> tag. React and ReactDOM from the manifest can also be extracted and served locally.