mouseover

← 所有挑戰

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.

每週時間
~8 hrs/week
對象
Senior, lead, and design-leadership ICs ready to ship real interfaces, not just static frames.
前置
Product design fundamentals. No coding experience required, curiosity helps.
結構
30 天 · 4 個里程碑 · 11 個檢查點 · 45 步
在 mouseover 開始挑戰 →

在 mouseover 中啟動挑戰；如果還沒安裝，請先 下載。

第 1 週

Foundations & Setup

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

本週成果: A live URL with a working tiny prototype, version-controlled and auto-deploying.

檢查點 1 · ~2 hrs

Tools setup

完成後你會有: A working setup of Cursor, Claude Code, Node, and a deploy target.

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

First prompt-to-prototype run

完成後你會有: A deployed tiny prototype born from a single kickoff prompt, iterated twice.

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

Version control without fear

完成後你會有: Your prototype lives on GitHub and auto-deploys on every push.

顯示 4 步
  1. 步驟 1 Create a GitHub account if needed. Make a new repo for the prototype.
  2. 步驟 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. 步驟 3 Connect Vercel or Netlify to your repo for auto-deploy on push.
  4. 步驟 4 Change a heading, commit, push, refresh the live URL. Confirm the loop works.
第 2 週

Frontend Fundamentals & Design Systems

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

本週成果: A reusable prototype kit with your design tokens and a customised component library.

檢查點 1 · ~3 hrs

Tailwind through your design system

完成後你會有: A Tailwind config that mirrors your brand tokens plus a component playground.

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

shadcn/ui as your component library

完成後你會有: 5 shadcn components restyled with your tokens and used in a real screen.

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

Reusable prototype kit

完成後你會有: A starter template repo you can fork for every future prototype.

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

Data, APIs, Real Content

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

本週成果: A prototype that reads and writes real data and calls one external API.

檢查點 1 · ~3 hrs

Hook up a real database

完成後你會有: One table in Supabase or Neon, read and written from your prototype UI.

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

Call an external API

完成後你會有: Your prototype calls one third-party API server-side and renders the result with proper loading and error states.

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

AI Features & Ship

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

本週成果: A shipped agentic prototype demoed in a Loom and shared with your team.

檢查點 1 · ~3 hrs

Add an LLM-powered feature

完成後你會有: A streaming LLM-powered feature that works on 5 real inputs.

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

Figma MCP design-to-code

完成後你會有: A real Figma frame turned into a working component in your prototype.

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

Ship and demo

完成後你會有: Your prototype is live with a one-line pitch and a demo Loom shared with your team.

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

準備好開始了嗎？

計畫已經攤開，剩下的就是把第一步點開。

在 mouseover 開始挑戰 →

在 mouseover 中啟動挑戰；如果還沒安裝，請先 下載。

看看其他 30 天挑戰 ← 回到所有挑戰