Practice - Prototype with AI a personal task management app

Download the WORKSHEET HERE 

‍

We'll create "Daily Wins," a personal task management app, progressing through three tools:

1. Figma - Design the interface and user experience
2. v0 - Generate a working React prototype from our designs
3. Claude Code - Enhance with advanced features and deploy

You'll learn the complete flow from design concept to deployed application in 90 minutes.

Required Accounts

• Figma - figma.com
• v0 - v0.dev
• GitHub - github.com
• Claude - claude.ai
• Cursor - cursor.com/
• Lummi
  • API Reference Docs (You can download this)
  • Public Lummi API Keylummi-8e32ffd98ba7779a7735df10ff5b69de8c9d08fbf2005a907be788c7214824b8
  • Specific collection to pull from: _C0OOJa

Links

• Figma Design File
  • Duplicate
  • Make available to “Anyone” who has the link
• PRD Prompt
• Preview
  • v0
  • Deployed

Workshop Flow

1. Design Review (5 min) - Explore the Figma file structure
2. v0 Generation (35 min) - Convert design to working prototype
3. Claude Code Enhancement (40 min) - Add interactions, persistence, and polish
4. Deployment (10 min) - Push to GitHub and deploy
5. Q&A (10 min)

Good to know

• TailwindCSS, since that’s what we’ll use for inline styling
• ShadCN, since their components are easy to use

‍