Claude Design to YOOtheme Pro: The Complete Workflow
The awkward part of using Claude Design with YOOtheme is the handoff. You have a design you want to use, but its headings, cards and buttons still need to become elements you can edit in the builder.
YOOforged Convert handles that translation. Give it the page’s HTML and a screenshot, then import the resulting layout into YOOtheme Pro on WordPress or Joomla. Expect a finishing pass for images, styling and anything the conversion missed.
The workflow at a glance
You’ll need:
- Claude Design access through Claude Pro, Max, Team or Enterprise; Enterprise admins must enable it
- A YOOforged Pro or Agency plan, which includes Convert
- An up-to-date YOOtheme Pro installation on WordPress or Joomla
- A code editor, and Chrome or Firefox for a screenshot
The steps:
- Design one page in Claude Design.
- Export it with Export as standalone HTML.
- Paste the exported HTML into Convert, or copy the rendered HTML if the export needs it.
- Attach a full-page screenshot of the design.
- Convert, check the result, and download the layout JSON.
- Upload the layout to YOOtheme’s Layout Library and refine it.
Anthropic lists those Claude plans in its current getting-started guide. Check YOOforged’s plans before starting; Convert requires a paid subscription.
Why the HTML needs conversion for YOOtheme
As of September 14, 2026, Anthropic’s published destinations don’t list a native YOOtheme Pro export. The HTML export gives you a starting point, but YOOtheme needs its own layout format to make the individual elements editable.
A YOOtheme builder layout contains sections, rows, columns and elements, each with its own settings. It’s stored as JSON and rendered with UIkit. That structure lets you edit a heading, change a button or rearrange a row in the builder.
If you place a design inside an HTML element, its contents remain part of that block’s code. They don’t become separate builder elements.
Convert rebuilds the markup as native YOOtheme sections, grids, headlines, text, images and buttons, the same pipeline as our Figma to YOOtheme Pro guide. It doesn’t connect to your Claude account or your website. It works only from the HTML and screenshot you give it.
If an export packages its HTML inside a loader, Convert can unpack it only when it recognizes the template format. It doesn’t run the exported application. If scripts create the page’s content, you may need to copy the rendered HTML from your browser or convert from a screenshot. Both routes are covered below.
Step by step
1. Build the page in Claude Design
Get the main content and layout into place before exporting. A hero, service cards, a text-and-image section, an FAQ and a closing call to action give Convert recognizable structures to work with.
Use real headings and body copy where you can. If the design has tabs, filters or other controls, decide which content you want in the imported page. A screenshot captures the state you can see; it can’t reveal an unopened panel.
2. Export as standalone HTML
Open Export in the upper-right corner and choose Export as standalone HTML. Anthropic documents the option in its export guide.
Keep the downloaded file intact and open it in your browser to check that the page loads. Convert’s HTML field accepts page markup; a ZIP, PDF, presentation or project URL isn’t a substitute. If you downloaded the project as a ZIP, return to Claude Design and choose the HTML export for this walkthrough.
3. Paste the file into Convert
Open the downloaded .html file in a code or plain-text editor such as VS Code or Notepad. Select everything, copy it, and paste it into Convert in the YOOforged app.
For the direct-file route, paste the complete export. Don’t cut arbitrary chunks out of encoded data. If the page needs scripts to build its content, use the rendered-HTML instructions in Troubleshooting instead.
On a Mac, TextEdit can show HTML as formatted text. Switch it to HTML code view before copying, or use a code editor.
4. Attach a full-page screenshot
Open the exported page in your browser and wait for the content to load. Scroll through it once, then take a full-page screenshot at the width you designed for. Attach it alongside the HTML. PNG, JPEG and WebP are accepted, with a 5MB image limit.
In Chrome, open DevTools, press Ctrl+Shift+P (Cmd+Shift+P on a Mac), type screenshot, and choose Capture full size screenshot. Google documents its screenshot tools here. In Firefox, right-click an empty area and choose Take Screenshot, then Save full page and download it; see Mozilla’s instructions.
With both inputs, Convert uses the screenshot to interpret section boundaries, columns and visual grouping, while the HTML supplies text and URLs. Match the two: a screenshot of just the hero is a poor companion for a whole page of HTML. For a section conversion, crop the screenshot to that section too.
5. Convert and check the result
Click Convert. Compare the result with your design: a matching section count is a useful first check, but seven sections can still contain missing text or the wrong arrangement.
Check headings, paragraphs and card counts. Unresolved placeholders such as {{ title }} can indicate that template content wasn’t filled in, but they’re not proof of a particular cause. Compare them with the rendered page and use the troubleshooting steps if content is missing.
When the result looks right, download the JSON file. The Copy button copies the same JSON, but you’ll need it saved as a .json file for the next step.
6. Import into YOOtheme Pro on WordPress or Joomla
For a first attempt, open an empty test page in YOOtheme Pro. Click Library, go to My Layouts, and choose Upload Layout in the upper-right corner. Select your JSON file, then click the uploaded layout’s name to load it.
By default, loading a layout replaces the page’s current layout. To add it to a page that already has content, pick Insert at the top or Insert at the bottom in the lower-left corner of the Library first. YOOtheme documents this workflow for WordPress and Joomla.
Now inspect the actual page. Compare content and section order, test links, replace missing images, and check desktop, tablet and mobile layouts. Successful JSON import alone doesn’t tell you whether the conversion preserved everything you wanted.
What comes across, and what doesn’t
Convert is designed to map these into native elements:
- Page structure and section order
- Rows, columns and card grids
- Headlines, paragraphs and lists
- Buttons and their links
- Images that already point to a public web address, provided the source stays accessible
Expect to finish by hand:
- Images bundled into the export. Convert doesn’t upload those assets into your site’s media library. Embedded data, temporary browser URLs and unresolved file paths may leave missing or broken images. Assign the original assets through WordPress’s Media Library or Joomla’s Media Manager. A public image URL can carry over without the file being copied to your site.
- Colors, fonts and spacing. The result uses YOOtheme settings and your site’s style. Expect to adjust the visual details; the original CSS isn’t copied across as a complete design system.
- Navigation and forms. Set up the site’s navigation in YOOtheme. Replace form placeholders with a working form from your form tool.
- Animations and application behavior. Custom scripts aren’t migrated. Review any interactive elements and configure their YOOtheme equivalents where available.
If an image points at an unrelated domain or a broken path, replace it with the correct asset. Don’t assume that a populated image field means the image transferred successfully.
How to prepare a Claude Design page for a cleaner conversion
- Work on one page or section at a time. Matching HTML and screenshots make the result easier to review. A multi-page project may need several separate conversions.
- Check that the content is present. If the exported source lacks the text you see in the browser, use rendered HTML or a screenshot. A dashboard can yield a visual layout, but its data connections and application behavior need separate work.
- Use common web patterns. Stacked sections, grids of cards and two-column splits map directly onto YOOtheme elements.
- Use real copy if you have it. Placeholder text converts fine, but real headings give Convert better clues about each section’s job.
- Allow time for decoration. Custom effects may need to be recreated using YOOtheme settings or additional development.
Troubleshooting
Convert reports an empty page or a React export
This can happen with the standalone HTML export itself. A file can display correctly in a browser while containing little usable page content until its scripts run. Repeating the same export may give you the same error.
To copy the rendered page in Chrome:
- Open the exported page and wait for its content to appear.
- Right-click a visible heading and choose Inspect.
- In Elements, locate the enclosing
<html>element for the design. If it’s inside a frame, use the document containing the actual content. - Right-click that element and choose Copy → Copy outerHTML.
- Paste that markup into Convert. Check that it contains a heading or sentence from your design.
Chrome’s DOM guide explains the difference between the original source and the page structure you inspect. If the copied document still triggers the React error, it may retain the original loader scripts. Copy the populated content container, such as <main>, without those scripts, or use the screenshot-only route below.
For screenshot-only conversion, clear the HTML field, keep the screenshot attached, and click Convert. Leaving the rejected HTML in place can trigger the same error even with an image attached.
A very small or mostly visual section can also trigger the empty-page check. Include more surrounding content or convert its screenshot alone. These input checks run before generation and don’t use a credit.
The result has placeholders like {{ title }} or missing text
Check whether those placeholders appear in the rendered design too. If the browser shows the finished text, try its rendered HTML. Also check that your screenshot covers the missing content and that the text is large enough to read. For a long page, try the affected section on its own.
You can use the screenshot-only route above as an alternative. This starts a new generation; a failed attempt after the AI has run may still consume a credit, so change the input before repeating it.
From a screenshot alone, Convert can’t see link targets or image files. Buttons come back linked to # and images come back empty, so relink the buttons and add your images after import.
Convert says the HTML is over the 1MB limit
The complete pasted file is checked before the page inside it is extracted. A short-looking design can still have a large packaged export.
Copy the rendered HTML, work with smaller sections, or clear the HTML field and use a screenshot. Don’t remove arbitrary chunks of encoded data from the export. Oversized input rejected before generation doesn’t use a credit.
Matching the design’s colors and fonts
Start with your site’s existing YOOtheme typography, colors and spacing controls. They may be enough to bring the imported page closer to the mockup.
YOOforged’s Style mode offers another starting point: describe the look you want and optionally attach the same screenshot. A global style can affect other pages using it, so review the wider site before applying it. Check the actual page’s colors and contrast too.
If the design still contains placeholder copy, Copywriter can rewrite the layout’s text for your business. Review names, claims and calls to action before publishing.
Using Claude Code instead
Claude Design supports handoff to Claude Code, and Anthropic’s June 17 update expanded synchronization between the two tools. That gives you a way to continue developing the design in code. In the workflow here, YOOforged’s MCP tool handles the conversion into YOOtheme layout JSON.
To use Convert from Claude Code or another supported client, copy the connector URL from your account page and add it to your client as a custom MCP server. It requires a paid YOOforged plan. Your assistant can submit HTML and optional context, then return layout JSON. For an export that needs scripts, supply rendered HTML. Screenshot input is available through the web app.
Frequently asked questions
Is there a plugin that converts Claude Design to YOOtheme?
This workflow uses the YOOforged web app. You supply HTML and a screenshot, then upload the resulting JSON through YOOtheme’s Layout Library. It doesn’t require an additional plugin on your site or a connection to your Claude account.
Can I get a Claude Design page into WordPress without Elementor?
Yes, if your site uses YOOtheme Pro. Convert produces a native YOOtheme layout you can edit in its builder. Forms, navigation and other interactive features still need the finishing work described above.
Does the import work differently on Joomla?
The Layout Library upload follows the same steps on both platforms. For images you add afterward, use Joomla’s Media Manager or WordPress’s Media Library.
Is converting Claude Design to YOOtheme free?
No. Convert is included in the Pro and Agency plans. See pricing for current prices and allowances.
Which Claude plans include Claude Design?
As of September 14, 2026, Anthropic lists Pro, Max, Team and Enterprise. Claude Design is in beta, and Enterprise organizations must enable it. Design activity shares your Claude usage allowance with chat, Claude Code and Cowork. See the current availability and usage guide.
Get your next Claude Design mockup into YOOtheme
Start with one page whose layout and copy you want to keep. Supply the HTML and a matching screenshot, then compare the imported result in YOOtheme. You’ll see which parts carry over cleanly and where the page still needs your attention.