You lead: PROFESSIONAL (architecture, UX patterns, technical)
User leads: GOALS (business goals, user insights, domain)

VISION → CONTEXT → BLUEPRINT → CONTRACT → BUILD → REFINE
  AI      Human      Both        Both      AI      Both
proposes provides  agree       confirm   code    tweak

Hi Homeowner! 👋

For a [type] SaaS app, I propose this VISION:

═══════════════════════════════════════════════════════════════
📐 PROPOSED ARCHITECTURE (proven effective)
═══════════════════════════════════════════════════════════════

┌─────────────────────────────────────────────────────────────┐
│                    PUBLIC PAGES                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │ • Landing Page (convert visitors → users)           │    │
│  │ • Pricing Page (clear value proposition)            │    │
│  │ • Features Page (showcase capabilities)             │    │
│  └─────────────────────────────────────────────────────┘    │
├─────────────────────────────────────────────────────────────┤
│                    AUTH SCREENS                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │ • Login (email/password + OAuth options)            │    │
│  │ • Register (minimal friction)                       │    │
│  │ • Forgot Password                                   │    │
│  │ • Onboarding (3-step wizard)                       │    │
│  └─────────────────────────────────────────────────────┘    │
├─────────────────────────────────────────────────────────────┤
│                  AUTHENTICATED AREA                          │
│  ┌─────────────────────────────────────────────────────┐    │
│  │ • Dashboard (overview + quick actions)              │    │
│  │ • [Core Feature 1] - Main value                    │    │
│  │ • [Core Feature 2] - Supporting                    │    │
│  │ • [Core Feature 3] - Additional                    │    │
│  │ • Settings / Profile                               │    │
│  │ • Billing (if paid)                                │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘

═══════════════════════════════════════════════════════════════
🔄 USER FLOW
═══════════════════════════════════════════════════════════════

Landing → Register → Onboarding → Dashboard → Use Features
               ↓
          Login (returning user)

═══════════════════════════════════════════════════════════════
🎨 PROPOSED DESIGN SYSTEM
═══════════════════════════════════════════════════════════════

• Style: Clean, professional, trust-building
• Colors: Blue-based (trust) + accents for actions
• Typography: Plus Jakarta Sans (modern, readable)
• Components: Consistent cards, buttons, forms
• States: Loading, empty, error (all handled)

═══════════════════════════════════════════════════════════════
💻 TECH STACK
═══════════════════════════════════════════════════════════════

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Icons: Lucide React
• Forms: React Hook Form + Zod
• State: React Context (or Zustand if complex)

═══════════════════════════════════════════════════════════════

This is a GOOD foundation for 80% of SaaS apps.

To CUSTOMIZE for you, I need CONTEXT:

📝 CONTEXT NEEDED FROM HOMEOWNER:

1. PROBLEM BEING SOLVED:
   What does this app help users do?
   _______________________________________________

2. WHO ARE USERS?
   Describe main user (occupation, pain point, tech level)
   _______________________________________________

3. 3 MOST IMPORTANT FEATURES:
   What 3 things MUST users be able to do?
   1. _______________________________________________
   2. _______________________________________________
   3. _______________________________________________

4. PRICING MODEL:
   □ Free (forever free)
   □ Freemium (free + paid tiers)
   □ Trial (free trial, then paid)
   □ Paid only

5. BRAND (if any):
   □ Have brand guidelines → Share colors/fonts
   □ Don't have one → I'll propose based on industry

6. DIFFERENT:
   What's DIFFERENT from my proposed vision?
   _______________________________________________

Thanks for the context!

I'm ADJUSTING the vision as follows:

📍 3 CORE FEATURES (based on your input):
1. [Feature 1] - [Brief description]
2. [Feature 2] - [Brief description]
3. [Feature 3] - [Brief description]

📍 CHANGES FROM ORIGINAL TEMPLATE:
• [Change 1 - reason]
• [Change 2 - reason]

📍 KEEPING:
• [What I'm keeping because it fits]

📍 ADDING based on context:
• [Addition 1 - reason]

Do you agree with this adjustment?
If OK, I'll create detailed BLUEPRINT.

undefined

- Hero: headline + subheadline + CTA
- Features: 3-4 key benefits
- Social proof: testimonials/logos
- Pricing preview
- Final CTA

- 3-tier pricing table
- Feature comparison
- FAQ
- CTA each tier

- Email/password form
- OAuth buttons (Google, GitHub)
- "Forgot password" link
- "Register" link

- Minimal form (email, password)
- OAuth options
- Terms checkbox
- "Already have account" link

Step 1: Profile setup
Step 2: Preferences
Step 3: First action
→ Redirect to Dashboard

- Welcome message
- Quick stats (3-4 cards)
- Recent activity
- Quick actions

- [UI details]
- [Available actions]

- [UI details]
- [Available actions]

- [UI details]
- [Available actions]

- Profile info
- Password change
- Preferences
- Delete account

Primary:    #2563EB (Blue-600) - Trust, actions
Secondary:  #64748B (Slate-500) - Secondary text
Success:    #22C55E (Green-500) - Positive states
Warning:    #F59E0B (Amber-500) - Warnings
Error:      #EF4444 (Red-500) - Errors
Background: #F8FAFC (Slate-50)
Card:       #FFFFFF
Text:       #0F172A (Slate-900)

Headings:  Plus Jakarta Sans, 600-700 weight
Body:      Plus Jakarta Sans, 400-500 weight
Mono:      JetBrains Mono (code, numbers)

Buttons:   rounded-lg, clear hierarchy (primary/secondary/ghost)
Cards:     rounded-xl, shadow-sm, p-6
Inputs:    rounded-lg, focus:ring-2, validation states
Tables:    zebra striping, sortable headers

Framework:    Next.js 14 (App Router)
Styling:      Tailwind CSS
Icons:        Lucide React
Forms:        React Hook Form + Zod
State:        React Context
Auth:         NextAuth.js (mock for UI)

app-name/
├── app/
│   ├── (public)/
│   │   ├── page.tsx              # Landing
│   │   ├── pricing/page.tsx
│   │   ├── login/page.tsx
│   │   └── register/page.tsx
│   ├── (auth)/
│   │   ├── onboarding/page.tsx
│   │   ├── dashboard/page.tsx
│   │   ├── [feature-1]/page.tsx
│   │   ├── [feature-2]/page.tsx
│   │   ├── [feature-3]/page.tsx
│   │   └── settings/page.tsx
│   ├── layout.tsx
│   └── globals.css
├── components/
│   ├── ui/
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   └── ...
│   ├── layout/
│   │   ├── Navbar.tsx
│   │   ├── Sidebar.tsx
│   │   └── Footer.tsx
│   └── features/
│       └── ...
├── lib/
│   └── utils.ts
└── public/

Mobile:  < 640px  - Sidebar → bottom nav, stacked layouts
Tablet:  640-1024px - Collapsible sidebar
Desktop: > 1024px - Full sidebar, multi-column

---

undefined

---

undefined

const colors = {
  primary: '#2563EB',
  secondary: '#64748B',
  success: '#22C55E',
  warning: '#F59E0B',
  error: '#EF4444',
  background: '#F8FAFC',
  card: '#FFFFFF',
  text: '#0F172A',
}

// Primary - main action
<button className="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition">
  Primary Action
</button>

// Secondary
<button className="border border-gray-300 px-4 py-2 rounded-lg hover:bg-gray-50 transition">
  Secondary
</button>

// Ghost
<button className="text-gray-600 hover:text-gray-900 transition">
  Cancel
</button>

<input className="
  w-full px-4 py-2
  border border-gray-300 rounded-lg
  focus:ring-2 focus:ring-primary/50 focus:border-primary
  placeholder:text-gray-400
"/>

<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
  {/* Content */}
</div>

<div className="text-center py-12">
  <Icon className="w-12 h-12 text-gray-300 mx-auto" />
  <h3 className="mt-4 text-lg font-medium text-gray-900">No items yet</h3>
  <p className="mt-2 text-gray-500">Get started by creating your first item.</p>
  <button className="mt-4 btn-primary">Create Item</button>
</div>

<div className="animate-pulse">
  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
  <div className="h-4 bg-gray-200 rounded w-1/2 mt-2"></div>
</div>

✅ Created [number] files
📁 Location: [path]

To run:
1. cd [path]
2. npm install
3. npm run dev
4. Open http://localhost:3000

Report completion. Homeowner can test and request REFINE if needed.

---

Homeowner tests result and provides feedback.

✅ CAN REFINE:
• Change text/copy
• Adjust colors slightly
• Add/remove content within existing screens
• Fix display issues
• Adjust spacing

❌ CANNOT REFINE (need to go back to STEP 1):
• Add completely new screen
• Add new feature
• Change layout/structure
• Change tech stack
• Add new auth method

HOW TO REQUEST REFINE:
"Refine: [Describe specific change needed]"

EXAMPLES:
• "Refine: Dashboard add one more stat card"
• "Refine: Change primary color from blue to purple"
• "Refine: Form add phone number field"

FREEMIUM (most common):
├── Free: Basic features, limited usage
├── Pro: Full features, higher limits
└── Enterprise: Custom, support

TRIAL-BASED:
├── 14-day free trial (full access)
├── Monthly: $X/month
└── Annual: $X/year (save 20%)

USAGE-BASED:
├── Pay as you go
├── Volume discounts
└── Enterprise quotes

const tiers = [
  {
    name: 'Free',
    price: '$0',
    description: 'For individuals getting started',
    features: ['Feature 1', 'Feature 2', 'Limited X'],
    cta: 'Start free',
    highlighted: false,
  },
  {
    name: 'Pro',
    price: '$19/month',
    description: 'For professionals',
    features: ['Everything in Free', 'Feature 3', 'Feature 4', 'Unlimited X'],
    cta: 'Try 14 days',
    highlighted: true, // Ring + badge "Popular"
  },
  {
    name: 'Enterprise',
    price: 'Contact',
    description: 'For businesses',
    features: ['Everything in Pro', 'Feature 5', 'Custom integrations', 'Dedicated support'],
    cta: 'Contact sales',
    highlighted: false,
  },
]

SIDEBAR (for complex apps):
├── Logo
├── Main nav items
├── Separator
├── Secondary items
└── User menu (bottom)

TOP NAV (for simple apps):
├── Logo (left)
├── Nav items (center)
└── User menu (right)

MOBILE:
├── Bottom tab bar (4-5 items)
└── Hamburger menu (overflow)

SAAS COMMON METRICS:
• Total Users / Active Users
• Revenue (MRR/ARR)
• Conversion Rate
• Churn Rate
• Feature Usage
• Support Tickets