Project 1 - Landing Page
Build a full, dark-themed landing page from scratch using AI as your CSS co-pilot. Then port it to WordPress with Bricks Builder.
Project 2 - Blog with GeneratePress
Design a minimal, typography-first blog in HTML/CSS, then implement it in a GeneratePress + GenerateBlocks setup.
Project 3 - Portfolio in Bricks
Design a bold, creative portfolio site using AI + CSS, then build it end-to-end in Bricks Builder.
Project 4 - WooCommerce Product Page
Style a WooCommerce single product page using custom CSS that works with GeneratePress or Bricks.
The Master CSS Cheatsheet
A single-page, quick-reference for everything you need during vibe coding sessions and WordPress buildouts.
Project 5 - Pricing and Services Page
Build a complete services + pricing section — one of the most common client requests — using AI and then porting to WordPress.
Project 6 - Full Site Starter Kit
A complete, production-ready CSS starter kit you can drop into any new WordPress project. Prompts + code included.
AI Prompt Templates
Copy-paste prompts organized by task. Each prompt follows the Element + Layout + Style + Constraints formula for consistent, production-ready AI output.
Project Delivery Workflow
This guide documents the complete client project lifecycle — from initial inquiry to handoff and maintenance — specifically for code-first web designers using CSS + AI + WordPress. Use this as your operating procedure for every client engagement.