The recommended AI workflow

Follow the same order every time: brief first, audit last. Claude works on a draft, you approve, then you publish.

The steps

1. Brief. Ask Claude for a design brief (slb_design_brief): what you sell, to whom, the mood, the colours. Read and correct it.
2. Create the draft. slb_create_draft. Nothing live is touched.
3. Look around. Claude lists the sections and global regions and reads any design you gave it.
4. Theme Settings first. Colours and fonts go in before pages.
5. Assets. Upload logo and images.
6. Sections and pages. Claude writes needed sections, then creates and fills pages.
7. Header, footer and menus. Set on the draft.
8. Build CSS. slb_build_css so new sections are styled.
9. Audit. slb_audit_site. Claude fixes every blocker until the count is zero, then does one more read-through for quality.
10. Preview. Claude gives you a preview link. You review on phone and desktop.
11. Publish. You click Publish Draft Theme on SLB Editor > Developer Mode > Preview / Publish.

Build a site for my bakery. First write a design brief and show it to me. Then create a draft theme and build pages for Home, Menu, About and Contact. Run the audit, fix all blockers, and give me a preview link. Do not publish.

Understanding the audit

The audit visits the site at 390px (phone), 768px (tablet) and 1440px (desktop) in a real browser and checks it against the SLB Theme Acceptance Standard. It needs Chrome or Edge on your computer (see SLB_BROWSER_PATH in Troubleshooting).

The score

Score = (rules checked minus rules failed) / rules checked, as a percentage. A score alone is not a pass.

• Blockers are serious problems. The audit passes only with zero blockers (and no blocker rule left unchecked). Publishing is blocked until then.
• Warnings should be fixed but do not stop publishing.

What it checks

• Layout. No sideways scrolling, proper mobile setting, buttons large enough to tap, readable text.
• Content. One main heading per page, image descriptions, form labels, page language, no placeholder text ("lorem ipsum"), no em dashes.
• Access and comfort. Text contrast, visible focus, skip link, reduced motion.
• Speed. Layout shift, load time, image sizes, stylesheet under 200 KB.
• Errors. No JavaScript errors, no broken requests.
• Shop function. Add to cart, cart, checkout, filters, menus (dropdown and mobile), search, internal links, a styled 404 page.

Draft versus live recap

• Claude can only write to the draft theme and draft pages.
• Nothing is public until you publish.
• If something looks wrong after publishing, use Rollback to Previous Theme (details).

Redesigning an existing site

Use the same steps. Because the draft is a copy of the live theme, Claude starts from your current site. Ask it to keep the existing page content and change only the look.