WP Manifestindependent plugin directory
manifest / ai / jamies-ai-store-designer

Jamie's AI Store Designer

Design your store with AI. Describe a page (or upload a mockup) and the AI builds it, filled with your live WooCommerce product data, with working add to cart — a whole-store product and shop template, no code. Design with AI, sell with WooCommerce.

by Jamie Marsland · github.com/jamiemarsland/jamies-ai-store-designer

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/jamiemarsland/jamies-ai-store-designer/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/jamiemarsland/jamies-ai-store-designer ↗

Design a whole WooCommerce store by describing it. The AI generates your product and shop pages as plain HTML, and a small binding layer maps that HTML to your live WooCommerce data, so titles, prices, stock, sale badges and a working add-to-cart all fill in for real.

Experimental. Built as a research project into "AI is great at HTML, so how do we make that HTML play nicely with WooCommerce?"

The idea

AI is astonishingly good at writing HTML. But raw AI HTML is "dumb" to WordPress and WooCommerce: nothing knows that a heading is the product title or that a price should be the live, sale-aware price.

So we add a thin layer of meaning with one attribute, data-woo, and the plugin fills each marked element with real product data on render. It's the same idea as WordPress core Block Bindings, aimed at the thing AI writes best: plain HTML.

<h1 data-woo="title">Product name</h1>
<div data-woo="price">$0.00</div>
<img data-woo="image" src="" alt="" />
<div data-woo="add-to-cart"></div>

For the shop/archive page, wrap one product card in an element with data-woo-loop and the plugin repeats it for every product.

The data-woo vocabulary

title, price, description, image, stock, sku, sale-badge, add-to-cart, link — plus data-woo-loop on shop pages.

Features

  • Describe your page and the AI generates a bound template (bring your own OpenAI or Anthropic key).
  • Upload a mockup and it recreates the layout (vision).
  • Bring your own AI — copy a ready-made prompt, design in Claude/ChatGPT, paste the HTML back.
  • Starter templates (Editorial, Minimal, Bold, Organic) for product + shop, no key needed.
  • Preview → refine → apply loop, with click-to-target refining and one-click refine suggestions.
  • Undo / redo history, and in-place (no reload) refining.
  • CSS scoping so an AI design can never leak out and break your theme header/footer.
  • Renders inside your theme's real header and footer, with a working cart.
  • One-click demo (3 products + templates) to try it instantly.

Requirements

  • WordPress 6.5+
  • WooCommerce
  • PHP 8.0+
  • (Optional) an OpenAI or Anthropic API key for AI generation. Starters and paste-in work without one.

Install

  1. Download / clone this repo into wp-content/plugins/, or zip it and upload via Plugins → Add New → Upload.
  2. Activate. Make sure WooCommerce is active.
  3. Go to Settings → AI Store Designer. Use "Create the demo" for an instant example, or connect an AI and describe a page.

How it renders

On a product or shop view, the plugin intercepts the request, scopes the template's CSS under a container, binds the data-woo markers to the queried product(s), and renders the result inside the theme's header/footer template parts (block themes) so it looks like a native page.

Status

Experimental research preview. The core loop works end to end. Not yet on the WordPress.org plugin directory.

License

GPL-2.0-or-later