This video demonstrates how to use Claude's new design feature to create a design system and generate a full website. It then shows how to export that AI-generated site as a zip, import it into WordPress using the Novamira plugin (via Claude desktop), and customize it with Elementor. The process covers design resources, prompt techniques, plugin installation, and common troubleshooting.
A short editorial from the SEONIB team on why this content matters.
SEONIB sees this as a practical workflow combining AI generation with real-world WordPress deployment, saving hours of manual design.
The use of a free plugin (Novamira) to bridge Claude and WordPress is a standout differentiator, eliminating the need for costly premium page builder licenses.
Web designers and freelancers should adopt this method to rapidly prototype and deliver custom client websites with full editing control.
AI-powered design tool by Anthropic for creating website design systems and generating site layouts.
A drag-and-drop page builder for WordPress that allows custom editing of AI-imported websites.
A free WordPress plugin that bridges Claude and WordPress, enabling seamless import of AI-generated sites.
A collection of colors, fonts, buttons, and UI components that ensure consistent branding across a website.
A lightweight, fast WordPress theme recommended for use with page builders like Elementor.
A free Elementor addon for creating custom headers and footers without needing Elementor Pro.
A web hosting provider used to set up a domain and WordPress installation for the imported site.
What is Claude Design?
Claude Design is a feature in Anthropic's Claude AI that lets you create a design system (colors, fonts, components) and generate complete websites.
Do I need a paid plan for Claude Design?
Yes, you need at least the Claude Pro plan to access the Design feature.
Can I import Claude designs directly to WordPress?
Yes, using the free Novamira plugin and the Claude desktop application.
What plugins are required for the import process?
Astra theme, Elementor, X Pro Theme Builder for Elementor, WP Forms, and Novamira.
Why do I need Node.js installed?
Claude sometimes generates parts of the site in React; Node.js ensures a smooth export process.
How do I fix element alignment issues after import?
Check advanced CSS classes in Elementor editor; remove any extra CSS applied by the AI.
Can I edit the header and footer of the imported site?
Yes, use the X Pro plugin to create custom headers/footers with Elementor.
How do I change the global colors after import?
Go to Elementor > Site Settings > Global Colors and adjust primary, secondary, text, and accent colors.
Is the Novamira plugin free?
Yes, it is a free plugin with no cost, though optional upgrades are available.
What is the advantage of using a screenshot with a prompt?
It gives Claude design inspiration from existing sites, resulting in a more tailored layout without copying.
SEONIB automatically generates AEO-optimized pages, embeds schema, and submits them to IndexNow — so your content gets discovered faster by Google and AI answer engines.