Exporting Claude artifacts and projects without losing styling
React / static HTML
Claude artifacts are usually single-file React components or standalone HTML. They convert well once wrapped into a small project structure.
Quick answer
Download the artifact or copy the generated files into a folder, zip it, and upload — Claude output is usually a single-page React or HTML project.
Where do I find the ZIP?
- Open the Claude artifact or project containing your site
- Use the artifact download/copy option to save each generated file
- Place them in one folder keeping the original file names (index.html, App.jsx, styles.css)
- Zip the folder and upload it
What your upload should contain
index.html (for HTML artifacts)package.json + src/ (for React artifacts)CSS filesAny referenced images
Claude (Artifacts & Projects) troubleshooting
Only one page is detected
Claude artifacts are often single-page. Split sections into separate HTML files or add real routes before exporting.
Tailwind classes have no styling
Artifacts rely on a Tailwind CDN script. Keep that script tag in index.html or add a real Tailwind build.
Images are placeholders
Replace placeholder URLs with local image files inside the project folder.
Best practices before exporting
- Export the artifact as a complete HTML file including its CSS
- Combine multiple artifacts into one folder with an index.html entry point
- Inline or bundle any CDN dependencies you rely on
- Add a simple navigation between pages before exporting
How to export
Method 1 — Download the artifact as HTML (best result)
- Open the artifact in Claude
- Use the download/copy option to save the full HTML
- Place it in a folder as index.html with an assets/ subfolder
- Zip the folder and upload it
Method 2 — Multi-page bundle
- Save each page artifact as its own .html file
- Keep index.html at the root
- Cross-link the pages with plain <a href> tags
- Zip and upload
Method 3 — React project export
- Ask Claude to output a complete Vite + React project
- Save the files locally with package.json
- Zip the project root and upload
Accepted input
- ZIP archive
- GitHub repository
- Static export
- Source project
- Build output
Not recommended
- Old build folders from a previous version of the project
- Incomplete exports that are missing package.json or index.html
- Screenshots, Figma files, PSD files or design mockups
- node_modules — always exclude it, it makes uploads slow and adds nothing
Supported features
- Static HTML pages
- Inline and linked CSS
- Single-file React components
- Images referenced relatively
Unsupported features
- Artifacts that call external APIs at runtime
- Claude-hosted state
- Server logic
Common mistakes
- Uploading a code snippet instead of a runnable page
- Missing index.html at the root of the ZIP
- Relying on CDN scripts that are blocked in the sandbox
Conversion tips
- Ask Claude to produce a complete multi-page site rather than one long page
- Request semantic HTML explicitly — it improves the WordPress template mapping
Readiness checklist
- Navigation — Use real anchor links with readable labels. Menus built purely from JavaScript state are harder to map to WordPress menu locations.
- Images — Reference images from your project folder (imports or /public). Images loaded from a temporary preview host may not be reachable at conversion time.
- Assets — Fonts, icons and CSS should live inside the project. Locally hosted assets are copied into the theme automatically.
- Forms — Standard form markup is converted to Contact Form 7 or WPForms. Custom JavaScript submit handlers are replaced by the WordPress form handler.
- Routing — Every route you want as a WordPress page must be reachable from the navigation, a sitemap or a route manifest.
- Animations — CSS animations and common libraries survive. Heavy scroll-timeline or canvas effects may render differently in WordPress.
- SEO — Titles, meta descriptions and canonical tags are extracted per page and mapped into the theme and your SEO plugin.
- Responsive — Breakpoints are preserved as-is. Check mobile before exporting — the converter never fixes a layout that was already broken.
Claude (Artifacts & Projects) FAQ
Can I upload a Claude artifact directly?
Yes, if it is a complete HTML page. Save it as index.html inside a folder and zip that folder.
What if my site has several artifacts?
Save each as its own HTML file in the same folder, cross-link them and upload one ZIP.
Can I convert a Claude artifact directly?
Yes, once it is saved as files in a ZIP. We cannot read an artifact from a chat link.
Does Claude Projects export a repository?
Not directly. Save the files locally, or have Claude output a full project structure you can zip.
Is a single-file HTML artifact enough?
Yes. A single index.html converts into a one-page WordPress theme.
Do I need to install anything to convert a Claude project?
No. Everything runs server-side. You upload a ZIP or paste a repository URL and receive a WordPress theme ZIP plus a live preview in the browser.
Should I remove node_modules before uploading?
Yes, always. node_modules is reinstalled during conversion, so including it only makes the upload slow and can push you over the size limit.
Can I preview the result before paying?
Yes. The WordPress preview is free for every conversion. Payment is only required when you download the theme ZIP.
What happens to my forms?
Standard HTML form markup is mapped to Contact Form 7 or WPForms shortcodes. Custom JavaScript submit handlers are replaced by the WordPress form handler.
Will my SEO titles and meta descriptions survive?
Yes. Titles, meta descriptions and canonical tags are extracted per page and written into the theme templates so your SEO plugin can take over.