Chapter 17 — Capstone: Build & Ship Your Product

This is the moment

You started this course as a designer. You're finishing it as someone who can design a product, build it, ship it to the internet with auth and a database, and wire in AI features. Solo. In one day. Without needing a backend developer.

That's not a small thing. Most people who call themselves "technical" can't do all of that. This capstone is your proof of work.

💡 Pick a small idea

Scope aggressively — ship it today

The number one mistake in capstone projects is picking something too big. A great capstone idea has: one clear user, one core action, a way to see results immediately. Not a platform, not a marketplace, not an "app like Notion but better." Pick something you can ship in 3 hours.

Product ideas that work well

AI critique tool — paste a design description, get structured UX feedback from Claude. Simple form + API + display results.

Team mood board — team members sign in with Google, post what's on their mind (mood + text). Everyone sees real-time updates. Firebase.

Micro-learning cards — enter a topic, Claude generates 5 flashcard Q&As. Users can save their favorites to Firestore.

Job title generator — describe what you do, Claude generates 10 creative job titles. Share button copies to clipboard.

Sprint retro board — team members post what went well / what didn't / what to try. Real-time with Firebase Auth.

The 5-milestone structure

Follow these milestones in order. Each builds on the previous. Don't skip ahead — a half-built product is worse than a simple complete one.

1

Write 3 sentences: Who is this for? What is the one thing they do? What do they see when it works?
2

List the screens (max 2): a landing/sign-in screen and the main app screen. That's it. No dashboard, no settings, no profile page.
3

Decide: does this need auth (Firebase)? Does it need AI (Claude API)? Does it need persistent data (Firestore)? Only add what's essential.

1

Open Figma. Create a frame at 1440px wide (desktop) and 390px (mobile). Draw the layout with rectangles and text — no colors, no final fonts.
2

Define the components you'll need: a card, a form, a button, a header. Sketch each one.
3

Screenshot the wireframes. You'll use these to brief Claude.

1

Paste your wireframe screenshot into Claude with a prompt describing the product, design style (dark/light, colors, fonts), and what each part does. Ask for HTML + CSS as a starting point.
2

Iterate at least 3 times. Each round: describe one specific thing that needs to change (not "make it better" — "the input should have more padding and the button should be yellow").
3

Get the UI to a state where it looks right before adding backend. A good-looking static version is a better foundation than a half-connected mess.

1

Set up a new Firebase project (or reuse your one from Chapter 14). Enable Google auth. Create a Firestore collection for your product's data.
2

Ask Claude: "Here's my HTML. Add Firebase using CDN imports. Add Google sign-in. On auth, show the app and hide the sign-in screen. Add [describe your data write operation]. Add [describe your data read/display operation]."
3

Test it locally: sign in, post data, confirm it appears in the Firebase console. Fix any issues before deploying.

1

Push your code to a GitHub repo. Import it to Vercel. Deploy. Add your Vercel URL to Firebase's authorized domains list.
2

Share the live link with at least one real person who isn't a developer. Watch them use it without explaining anything. What confuses them? Note it for v2.
3

When you're done — click the button below.