Premium handmade candle shop - built with an AI-first approach
A premium lifestyle and craft brand needed a full WooCommerce store with a custom design system, non-standard Gutenberg blocks and over a dozen views - from the homepage to the customer panel and transactional emails. I designed the visuals myself in Claude Design. The technical layer is based on a starter theme with MVC architecture, which I customise and extend for each project. The entire implementation layer runs in an AI-first model: GitHub Copilot generates block code, Claude Cowork handles multi-file and context-heavy tasks, while I design the architecture, verify output and accumulate project knowledge. The project is currently in the testing phase.
- 10skillsdomain knowledge library for AI (block conventions, SCSS, accessibility, WooCommerce, AJAX and more)
- 2AI toolsCopilot in IDE + Claude Cowork, deliberately assigned to different roles
- 13+pagesbuilt with an AI-first approach (homepage, shop, product pages, categories, my account, 404 and more)
- 0blocks by handwithout design and verification; every block backed by my architectural decision and code review
WordPress + Gutenberg means too much boilerplate for one project
A modern WooCommerce store built on WordPress Full Site Editing requires dozens of Gutenberg blocks - each with its own block.json, a React component for the editor, a PHP template and SCSS files. The classic approach: a developer sits down, scaffolds file by file, codes by hand, makes typos in design tokens, forgets about escaping in PHP and drifts from the design system.
On top of that comes the design system itself - a set of colour, typography and spacing tokens that must stay consistent across the codebase, the editor and the front end. Without automation, discrepancies between the design and the implementation creep in easily.
I needed an approach that would shorten implementation time without lowering quality - one where AI is a first-class code producer, not just autocomplete.
How AI-first changes the way a store gets built
Design system created in Claude Design, transferred to theme.json
I designed the visuals myself in Claude Design - colour palette, typography, spacing, UI components for all views. The result: a complete design system exported as HTML files that serve as the single input for AI in the project. Before implementing each block, AI opens the corresponding HTML file and treats it as the sole source of truth for layout. At the same time, all tokens were added to theme.json as CSS variables - available in both the Gutenberg editor and SCSS.
AI context layer: skills, prompts and agents.md
I work with an AI framework I have built and refined over time (.github/skills/, .github/prompts/), which I co-develop and adapt per project. For this project I extended it with a custom .project-context/ layer containing client-specific rules. I wrote agents.md myself - it is an onboarding document for AI containing design tokens, SCSS/BEM conventions, a list of available skills and the step-by-step block creation workflow. AI receives this file at the start of every session and has full project context without asking for details.
Block generation: the developer describes, AI implements
For each Gutenberg block the workflow looks like this: I describe to AI what the block should do, AI reads theme.json on its own to get the current tokens from the live file (not from training data), asks about missing parameters, scaffolds via CLI and writes edit.js, save.js or the PHP template plus SCSS. I read the diff, verify and either approve or correct. The key rule: AI is forced to read tokens from the file before implementing - this eliminates hallucinated colours, fonts and spacings that do not exist in the project. Example: for a block with a dynamic product list I decided on the React/PHP type (server-side WP_Query), AJAX load more instead of pagination and filtering without page reload. AI wrote block.json, edit.js, the PHP template and SCSS. I reviewed the PHP escaping, checked accessibility and approved.
/review-block as systematic code review
After implementing each block I run /review-block - a prompt that tasks AI with an audit across four areas: security (output escaping in PHP), accessibility (WCAG 2.1 AA), theme conventions (block.json, React/PHP patterns) and SCSS/BEM quality. AI returns a list of issues with severity levels and ready-made fixes. The first safety net before staging.
Two AI tools, two deliberately separated roles
GitHub Copilot operates in the IDE - generates implementations, responds to /make-block and /review-block commands, sees the open file and repo context. Claude Cowork handles context-heavy and multi-file tasks - reads design HTML, analyses project files, processes tasks spanning multiple files at once. These are not interchangeable tools - they were deliberately assigned to different types of work.
What the AI-first model delivered
The project is currently in the testing phase. Below is a summary of the results so far.
- Complete design system created in Claude Design, transferred to theme.json
- 13+ pages and views built with an AI-first approach
- AI context layer: agents.md, 10 skill files, 8+ workflow prompts
- Systematic AI output verification: linting (pre-commit), /review-block, WCAG audit
- .project-context/ with accumulated project knowledge (learned-lessons.md, project-rules.md, business-context.md)
Technologies
- WordPress (FSE / Gutenberg)
- WooCommerce
- React / JavaScript
- PHP 8.1+
- SCSS / BEM
- Webpack
- GitHub Copilot
- Claude AI (Cowork)
- Claude Design