The workshop prompts

Transform this design brain dump into a structured prototype brief:

[YOUR BRAIN DUMP]

Create a comprehensive brief with:

**Problem Statement**
- What specific problem does this solve?
- Why does this problem matter?
- Who experiences this problem?

**Target Users**
- Who are the 2-3 primary user types?
- What are their key goals?
- What's their context when using this?

**Core User Flow**
- Describe the main happy path from start to finish
- Include only the essential steps
- What's the one thing users need to accomplish?

**Essential Features**
- List 3-7 core features that deliver the value
- One clear sentence per feature
- Describe WHAT users can do, not HOW it's built

**Success Criteria**
- How will you know this prototype works?
- What specific outcomes or behaviors validate the concept?
- What would make you confident to iterate further?

**Scope Boundaries**
- What will you explicitly NOT build in this version?
- What features are "nice-to-have" but not essential?
- What can wait until after validation?

**Deployment Context**
- Where will this be deployed for testing?
- Who needs access to test it?
- Any security or privacy requirements?

Output a brief that is:
- Focused on the problem and solution, not implementation
- Simple and actionable for rapid prototyping
- Clear about what's in scope and what's not
- Oriented toward validation, not perfection

Using this brief, create step-by-step v0.dev prompts to build a working prototype:

[PASTE YOUR BRIEF HERE]

**About v0.dev**: Browser-based component generator by Vercel. Creates Next.js + React + Tailwind code with instant preview. Auto-deploys to Vercel with one click.

**KISS Requirements (Keep It Simple, Stupid)**:
- Use the SIMPLEST MODERN tech stack that works (Next.js + React + Tailwind sweet spot)
- Build incrementally - each step must WORK before moving to next
- Focus ONLY on core functionality first (no bells and whistles)
- Choose proven solutions over exciting new ones
- If there are 3 ways to do something, pick the simplest
- Hardcode values initially rather than building complex systems, then we will replace it with real endpoints when/if necessary
- Basic styling (CSS/Tailwind) - make it work first, then beautiful

**AI Integration Requirements (if needed)**:
- Use OpenAI SDK for AI features
- Preview uses mock/hardcoded responses (real API testing after deployment)
- Deploy to Vercel then add environment variables in Vercel dashboard
- Include fallback states when API is unavailable
- Add basic error handling for API failures

**Structure your prompts:**

1. **First prompt: Setup project, tech stack, basic design system, and documentation**
   
   "Create main app layout with Next.js App Router, Tailwind CSS, and shadcn/ui. Include navigation, basic structure, and design system constants from the brief (colors, fonts). Add empty states for features I'll build next."
   
   Preview → verify structure works → iterate if needed

2. **Each following prompt: Try to build one testable feature at a time whenever possible (preview in browser)**
   
   One prompt per feature:
   
   "Build [Feature 1] component that handles [specific behavior], use hardcoded data: [provide data], include basic Tailwind styling."
   
   Preview → verify feature works → iterate if broken
   
   Continue for each feature - don't move forward until current preview works

3. **Include basic tests for each feature as you build**
   
   In each feature prompt, add: "Include error handling and edge case coverage for [feature behavior]"
   
   Preview → test interactions → verify edge cases

4. **Polish prompts: Improve UI/UX and styling after functionality is good**
   
   After all core features preview correctly:
   - "Polish visual design: spacing, typography, visual hierarchy, smooth transitions"
   - "Add micro-interactions: loading skeletons, empty states, error messages with recovery"
   - "Make responsive: mobile-first (375px), tablet (768px), desktop (1024px+)"
   
   Preview → verify at all breakpoints

5. **Final prompt: Deployment setup with SEO protection (noindex, password protection, etc.)**
   
   "Prepare for production: add noindex meta tag to prevent search indexing, optimize performance, document environment variables needed for API integrations."
   
   Then: Click "Deploy to Vercel" → Add environment variables in Vercel dashboard → Add password protection in Vercel settings → Test live URL

**Deploy to: Vercel** (one-click from v0)

**Create as many prompts as needed** (usually 8-15+ for core + 2-3 polish + 1 deployment)

**End with**: WORKING browser preview + POLISHED version + PROTECTED deployment

**Remember**: BROWSER PREVIEW FIRST, then polish, then protected deployment.

**Note**: Leave the coding part to v0, do not give code unless absolutely necessary or I deliberately ask

**v0 workflow**:
- Type prompt → Preview appears instantly
- Iterate with follow-up prompts
- One-click deploy to Vercel when ready
- Add API keys in Vercel dashboard (not in preview)

Using this brief, create step-by-step Cursor AI prompts to build a working prototype:

[PASTE YOUR BRIEF HERE]

**About Cursor AI**: AI-powered VS Code fork where you code locally, test with localhost, and deploy manually. You're the driver, AI is the copilot.

**KISS Requirements (Keep It Simple, Stupid)**:
- Use the SIMPLEST MODERN tech stack that works (Next.js + React + Tailwind sweet spot)
- Build incrementally - each step must WORK before moving to next
- Focus ONLY on core functionality first (no bells and whistles)
- Choose proven solutions over exciting new ones
- If there are 3 ways to do something, pick the simplest
- Hardcode values initially rather than building complex systems, then we will replace it with real endpoints when/if necessary
- Basic styling (CSS/Tailwind) - make it work first, then beautiful

**AI Integration Requirements (if needed)**:
- Use OpenAI SDK for AI features
- Set up local environment variables for API keys
- Everything must work locally first (manual credential entry)
- Include fallback states when API is unavailable
- Add basic error handling for API failures

**Structure your prompts:**

1. **First prompt: Setup project, tech stack, basic design system, local env, and documentation**
   
   Use Composer mode (Cmd/Ctrl+I):
   "Create a new Next.js 14 project with App Router, TypeScript, Tailwind CSS. Set up folder structure (/app, /components, /lib), create .env.local.example, add .gitignore, create README with setup instructions, and add basic design system constants from the brief."
   
   Test: `npm install` → `npm run dev` → verify localhost:3000 loads

2. **Each following prompt: Try to build one testable feature at a time whenever possible (test locally)**
   
   Use fresh Composer (Cmd/Ctrl+I) for each feature:
   
   "Build [Feature 1] component with [specific behavior], use hardcoded data: [provide data], include basic tests, add TypeScript types."
   
   Test: `npm run dev` → verify feature works → run tests
   
   Continue for each feature - don't move forward until current one works

3. **Include basic tests for each feature as you build**
   
   In each feature prompt, add: "Include basic test coverage for [feature behavior]"
   
   Test: Run test suite after each feature

4. **Polish prompts: Improve UI/UX and styling after functionality is good**
   
   After all core features work:
   - "Polish visual design: spacing, typography, visual hierarchy, transitions"
   - "Add micro-interactions: loading states, empty states, error states"
   - "Make responsive: mobile-first, tablet breakpoints, desktop optimizations"
   
   Test: Verify improvements at all breakpoints

5. **Final prompt: Deployment setup with SEO protection (noindex, password protection, etc.)**
   
   "Prepare for Vercel deployment: add noindex meta tag, create vercel.json if needed, document environment variables in README, ensure .env.local is gitignored."
   
   Then manually: Push to GitHub → Connect to Vercel → Add env vars → Deploy → Add password protection in Vercel settings

**Deploy to: Vercel** for testing

**Create as many prompts as needed** (usually 8-15+ for core + 2-3 polish + 1 deployment)

**End with**: WORKING local prototype + POLISHED version + PROTECTED deployment

**Remember**: LOCAL TESTING FIRST, then polish, then protected deployment.

**Note**: Leave the coding part to Cursor, do not give code unless absolutely necessary or I deliberately ask

**Cursor keyboard shortcuts**:
- Composer (Cmd/Ctrl+I) = New features, multi-file changes
- Inline edit (Cmd/Ctrl+K) = Quick fixes
- Chat (Cmd/Ctrl+L) = Questions