1
Discovery
I ask, you answer. No design work begins until this is complete.
0%
▾
Q1 Who is this for?
▾Q2 Business Identity
▾Q3 Contact Information
▾Phone Numbers
Email Addresses
Physical Address
Q4 Business Hours
▾Q5 Online Presence
▾Social Media Accounts
Analytics & Listings
Q6 What's the goal?
▾Q7 What exists already?
▾Q8 Competitors or sites you admire?
▾Q9 Technical Requirements
▾Q9b Commerce Requirements (if e-commerce)
▾Search / Shopping Engines
Social Commerce
Marketplaces
Affiliate Networks
Q10 Content & Copy
▾Q11 Assets
▾Q12 Legal & Compliance
▾Q13 Warranty Structure
▾Warranty Tier 1
Deliverable: A completed Discovery Brief summarizing all answers. Saved as
[project]/docs/DISCOVERY-BRIEF.md.
2
Aesthetic Alignment
Get what's in your head onto the screen. No code yet — just direction.
0%
▾
This is where we get what's in your head onto the screen. No code yet — just direction.
1 Mood / Art Direction
▾2 Color Direction
▾3 Typography Feel
▾4 Layout Density
▾5 Imagery Style
▾6 Hero / Landing Approach
▾
Deliverable: A Style Direction document with confirmed choices. Saved as
[project]/docs/STYLE-DIRECTION.md.
2.5
Design Tokens
Lock in exact values. The contract between design and code.
0%
▾
Lock in the exact values before any building starts. This is the contract between design and code.
Colors — exact hex values for every use
Typography — exact fonts and sizes
Spacing — exact values
Components — exact styles
Imagery — exact specs
Deliverable: A Design Tokens CSS file with all values as CSS custom properties. Saved as
[project]/css/tokens.css.
3
Architecture
What pages exist, how they connect, what goes on each one.
0%
▾
Define what pages exist, how they connect, and what goes on each one.
Sitemap & Navigation
Content Hierarchy (per page)
Wireframes (optional but recommended)
Commerce Architecture (if e-commerce)
Deliverable: A Site Architecture document. Saved as
[project]/docs/SITE-ARCHITECTURE.md.
4
Build
One page at a time. Each page reviewed before the next starts.
0%
▾
One page at a time. Each page is reviewed before the next one starts.
Build Order
Rules
Feedback Template
How to Give Good Feedback
- Be specific. "The header feels too heavy" or "the red is too bright" — not "I don't like it."
- Point to examples. A screenshot or URL is worth 1000 words.
- Reference sections. "The hero section" or "the product cards" — not "the middle part."
- Say what you like too. Knowing what works is just as important.
- One round at a time. Give all feedback at once rather than piece by piece.
5
Polish & Launch Prep
Final quality checks across the entire site.
0%
▾
Final quality checks across the entire site.
Responsive / Mobile
Performance
SEO
Accessibility
Commerce (if e-commerce)
Content
Final Review
Quick Reference
| Phase | What Happens | Deliverable | Gate |
|---|---|---|---|
| 1. Discovery | I ask questions, you answer | Discovery Brief | Approve before Phase 2 |
| 2. Aesthetic | Mood, color, type, layout direction | Style Direction | Approve before Phase 2.5 |
| 2.5 Tokens | Lock exact CSS values | tokens.css | Approve before Phase 3 |
| 3. Architecture | Pages, nav, content hierarchy | Site Architecture | Approve before Phase 4 |
| 4. Build | One page at a time with reviews | Completed pages | All pages approved |
| 5. Polish | Performance, SEO, accessibility | Launch-ready site | Final approval |
Notes
- This process can be used for a full new site or a major redesign
- For smaller changes (single page updates, bug fixes), skip to the relevant phase
- All deliverable documents are saved in the project's
docs/folder - Backups are created before every major file change
- Say "Start the process", "New site build", or "Run the design process" to begin