mouseover

← All challenges

AI Prototyping for Designers

Go from zero to a shipped agentic prototype using Cursor, Claude Code, and shadcn — without learning to "code" in the traditional sense.

Weekly time
~8 hrs/week
For
Senior, lead, and design-leadership ICs ready to ship real interfaces, not just static frames.
Prerequisites
Product design fundamentals. No coding experience required, curiosity helps.
Structure
30 days · 4 milestones · 11 checkpoints · 45 steps
Start in mouseover →

Opens the challenge in mouseover. Download mouseover first if you have not yet.

Week 1

Foundations & Setup

AI prototyping ecosystem, tools, prompting strategy, first artifact deployed.

End-of-week outcome: A live URL with a working tiny prototype, version-controlled and auto-deploying.

Checkpoint 1 · ~2 hrs

Tools setup

You will have: A working setup of Cursor, Claude Code, Node, and a deploy target.

Show 4 steps
  1. Step 1 Install Cursor and sign in. Get comfortable with the file tree and the AI panel.
  2. Step 2 Install Node and verify with `node --version` in a terminal.
  3. Step 3 Create a Vercel or Netlify account. Run their "deploy a starter" flow once so you know it works.
  4. Step 4 Install Claude Code or Codex CLI as your agentic helper alongside Cursor.
Checkpoint 2 · ~3 hrs

First prompt-to-prototype run

You will have: A deployed tiny prototype born from a single kickoff prompt, iterated twice.

Show 4 steps
  1. Step 1 Pick a tiny prototype goal: one screen, one interaction, real-feeling content.
  2. Step 2 Write the kickoff prompt with constraints: stack, design intent, key interactions.
  3. Step 3 Generate, then iterate twice with feedback prompts. Resist the urge to rewrite the prompt from scratch.
  4. Step 4 Deploy it. Send the URL to a designer friend.
Checkpoint 3 · ~2 hrs

Version control without fear

You will have: Your prototype lives on GitHub and auto-deploys on every push.

Show 4 steps
  1. Step 1 Create a GitHub account if needed. Make a new repo for the prototype.
  2. Step 2 Push your code with `git init`, `git add .`, `git commit`, `git push`. Let Cursor or Claude Code do it for you the first time and watch.
  3. Step 3 Connect Vercel or Netlify to your repo for auto-deploy on push.
  4. Step 4 Change a heading, commit, push, refresh the live URL. Confirm the loop works.
Week 2

Frontend Fundamentals & Design Systems

Tailwind, shadcn/ui, modular component thinking. Build a personal design system.

End-of-week outcome: A reusable prototype kit with your design tokens and a customised component library.

Checkpoint 1 · ~3 hrs

Tailwind through your design system

You will have: A Tailwind config that mirrors your brand tokens plus a component playground.

Show 4 steps
  1. Step 1 Extract 8 to 10 design tokens from your brand: colors, font sizes, spacing scale, radii.
  2. Step 2 Configure Tailwind to use them. Replace defaults; do not extend.
  3. Step 3 Build a single playground page that renders a typography ramp, a color palette, and a spacing scale.
  4. Step 4 Commit and deploy. This is now your living style guide.
Checkpoint 2 · ~3 hrs

shadcn/ui as your component library

You will have: 5 shadcn components restyled with your tokens and used in a real screen.

Show 4 steps
  1. Step 1 Install shadcn/ui in your prototype.
  2. Step 2 Generate the 5 components you use most: button, input, card, dialog, table.
  3. Step 3 Restyle each with your tokens. Match what your brand actually looks like, not the shadcn defaults.
  4. Step 4 Compose a real screen out of them. Push live.
Checkpoint 3 · ~2 hrs

Reusable prototype kit

You will have: A starter template repo you can fork for every future prototype.

Show 4 steps
  1. Step 1 Make a fresh repo named something like "design-kit" or "proto-starter".
  2. Step 2 Copy the Tailwind config, your tokens, the customised shadcn components, and the playground page.
  3. Step 3 Add a short README with setup steps and what is opinionated.
  4. Step 4 Use it as the base for your next prototype. Note what was missing and add it back.
Week 3

Data, APIs, Real Content

Database integration, API connections, dynamic content. Move from static screens to a working interactive product.

End-of-week outcome: A prototype that reads and writes real data and calls one external API.

Checkpoint 1 · ~3 hrs

Hook up a real database

You will have: One table in Supabase or Neon, read and written from your prototype UI.

Show 5 steps
  1. Step 1 Create a Supabase or Neon account. Make a new project.
  2. Step 2 Design 1 table that matters for your prototype. Keep columns to 5 or fewer.
  3. Step 3 Generate read and write code with Claude Code or Cursor. Test in isolation first.
  4. Step 4 Wire the UI: render the table on one screen, add a form that writes a new row.
  5. Step 5 Deploy and verify on the live URL with a real new row.
Checkpoint 2 · ~3 hrs

Call an external API

You will have: Your prototype calls one third-party API server-side and renders the result with proper loading and error states.

Show 4 steps
  1. Step 1 Pick the API that fits your prototype: OpenAI, weather, Stripe, Notion, whatever.
  2. Step 2 Add an API route on your server. Call it from the client. Render the result.
  3. Step 3 Add a loading state. The user should never see a frozen UI.
  4. Step 4 Add an error state. Real APIs fail; your prototype should not look broken when they do.
Week 4

AI Features & Ship

LLMs, image generation, voice, vision, Figma MCP. Wire AI capabilities into your prototype and ship it.

End-of-week outcome: A shipped agentic prototype demoed in a Loom and shared with your team.

Checkpoint 1 · ~3 hrs

Add an LLM-powered feature

You will have: A streaming LLM-powered feature that works on 5 real inputs.

Show 4 steps
  1. Step 1 Pick the feature: summarise, generate, recommend, classify, or rewrite.
  2. Step 2 Wire the API call server-side with streaming. The user should see tokens land as they generate.
  3. Step 3 Test on 5 real inputs. Adjust the prompt until the worst output is acceptable.
  4. Step 4 Polish the surrounding UI: where the result lands, what to do next, how to retry.
Checkpoint 2 · ~2 hrs

Figma MCP design-to-code

You will have: A real Figma frame turned into a working component in your prototype.

Show 4 steps
  1. Step 1 Install Figma MCP for Claude Code or Cursor.
  2. Step 2 Point it at one frame from a real Figma file you own.
  3. Step 3 Generate the component. Refine the prompt until the visual matches.
  4. Step 4 Wire it into your prototype as a real, working piece of UI.
Checkpoint 3 · ~3 hrs

Ship and demo

You will have: Your prototype is live with a one-line pitch and a demo Loom shared with your team.

Show 4 steps
  1. Step 1 Write the one-line "what it is" pitch. Save it in your README.
  2. Step 2 Record a 2-minute Loom walking through the loop.
  3. Step 3 Post it in the team Slack or Discord channel. Ask for 3 specific reactions.
  4. Step 4 Decide what to build next. Capture it in a one-sentence commitment.

Ready to start?

You have read the plan. The next thing to do is open the first checkpoint.

Start in mouseover →

Opens the challenge in mouseover. Download mouseover first if you have not yet.

Browse other 30-day challenges ← Back to all challenges