Course Curriculum
The full curriculum for the Designer to Design Engineer course. By the end of Module 03 you've shipped a React Native mobile app called Bunkd. By the end of Module 04 you've shipped a native macOS notch reminder app. Module 05 takes them live.
Module 01
Foundational mindset module. The shift in product design isn't coming — it's already here. Cursor, Claude, Supabase, Kiro aren't future tools; they're how every team is shipping right now. This module sets the mental model so the technical modules land.
Design is no longer just about screens. We unpack how the role of a product designer is fundamentally changing in AI-native companies — and why that change is an opportunity, not a threat. The old playbook of research → wireframes → handoff is collapsing in real time.
Notion, Vercel, Perplexity — what do these companies have in common? Tiny, powerful teams where designers write code. We break down what makes these workflows tick, where designers fit alongside engineers in AI-native teams, and why builders win the next decade.
The gap between design and engineering is closing. Your competitive edge is learning to close it faster than anyone else in the room. The two paths this course will train you for: leaning into design engineering (terminals, code, shipping yourself) or doubling down on product taste with AI as your accelerator.
Module 02
The technical foundation. Cursor + Claude setup, the 6 git commands you actually use every day, and a full Next.js scaffold so you understand every file before writing code in it.
Your new IDE. We install Cursor, connect Claude (the strongest model for serious coding work right now), and set up your project from scratch — the way design engineers at top companies actually work.
No jargon. Just the 6 git commands you'll use every day — commit, push, pull, branch, merge, and the one that saves your life when you mess up.
We scaffold a Next.js project from zero — pages, routing, components, styles. By the end of this lesson you'll understand every file in your project and why it's there.
Module 03 · Practical build
The flagship practical module. You build Bunkd, a React Native document-storage app, end-to-end — Figma frame → working app → Supabase backend → distributable APK → GitHub repo. 6 lessons, ~109 minutes total.
Before we write a single line of code, I'm walking you through the full setup so nothing breaks mid-build. Five things to install: Cursor (the AI-native editor every vibe coder uses), Node.js (lets your computer run any JavaScript-based app), Expo Go (preview your code on real devices), Xcode (Apple's IDE, for the iOS simulator), and the iOS 26.1 simulator inside Xcode.
The actual building starts. The app I'm building is Bunkd — a document storage app. Open Cursor on a desktop folder called bunkd, drop into the terminal, run npx create-expo-app . — that scaffolds a full React Native project. The lesson teaches a counterintuitive thing: messy prompts work fine. You don't need to write perfect prompts; Cursor is smart enough to understand broken English. Just dump your thoughts.
To pull the design straight in, I use the Figma Dev Mode MCP — Cursor reads the Figma file directly without screenshots. Switch to Opus 4.6 in Cursor's model picker for serious coding work. By end of lesson: dependencies installed, design matched, Expo dev server live. Press i in the terminal — Bunkd runs in the iOS simulator.
The longest and most important lesson in the module. You'll watch me prompt, review, refine, and re-prompt — over and over — building out every screen and feature in Bunkd: the doc-add flow with file picker, the document list with tags and dates, search behavior, navigation between screens, polish on the home screen, edge cases, empty states, and visual fidelity to the Figma source.
The pattern to internalize: screenshot → paste → describe what's wrong → let Cursor fix → retry. AI doesn't get it right on the first try. The skill is identifying gaps fast and feeding them back into the prompt with enough context for the model to act.
Add a real backend to Bunkd. Sign up at Supabase — auth, Postgres database, file storage, APIs, all in one. New project, name it bunkd, strong password, region close to you, project spins up in a minute.
The real upgrade — connect the Supabase MCP to Cursor. Now Cursor can run SQL, manage tables, configure storage buckets, verify rows directly from the prompt — without you ever leaving the editor.
I hit two real-world snags during the recording, and these are the most valuable parts. Snag 1: signup does nothing. Supabase's default email confirmation is on. Screenshot the broken behavior, paste into Cursor, let it disable. Snag 2: zero-byte upload. File blob isn't being read correctly. Same loop — screenshot, paste, debug. That iterative loop — error → screenshot → paste → fix → retry — is the actual pattern of building with AI.
Two paths to get the app onto someone else's phone: iPhone friends → Apple TestFlight ($99/yr Apple Developer account, real submission flow). Android friends → ship a single APK file directly. We're going Android — way cheaper, way faster.
Cursor uses EAS (Expo Application Services) to build the APK in the cloud — no Android Studio needed locally. EAS free-tier builds take 20–40 min depending on queue. Once done, drop the APK in any chat with an Android friend, they install by tapping the file. Cheapest, fastest distribution loop possible.
Real next steps: get feedback, iterate, then publish on the Google Play Store ($25 one-time dev fee), or sell premium copies via Lemon Squeezy or Stripe Payment Links.
Last piece. Sign up at GitHub, create a new repository named bunkd, public or private — your call. Copy the repo URL, jump back to Cursor, prompt: "Push this codebase to this repo." Cursor writes a commit message, runs git init, git remote add, git push — done. Reload GitHub, your full codebase is live.
Why this matters beyond backup: collaboration. Invite teammates by username; they can clone, branch, push, submit pull requests. Once on GitHub, you can hook to Vercel for instant web deploys, or to EAS for cleaner mobile build pipelines. GitHub is the hub everything else plugs into.
Module 04 · Practical build
The macOS counterpart to Module 03. You build a wellbeing notch reminder app — a utility that lives in the macOS notch and surfaces drink-water / stretch / break reminders that animate out of it. Built with Kiro (AI IDE), SwiftUI, and Xcode.
Time to actually build something. The macOS counterpart to what we did with Bunkd in Module 03 — but instead of Cursor for React Native, we're using Kiro for native Swift. Two important toggles in Kiro's prompt area: Vibe mode (casual chat-and-build) and Spec mode (AI plans the full feature with a PRD-style breakdown first, then executes).
The app: a notch app — that black bar at the top of newer MacBooks where the camera lives. Most of that space is dead pixels; the trend is to build little utility apps that turn the notch into something useful. Mine is a wellbeing reminder. Kiro builds it as a SwiftUI macOS app — Apple's modern UI framework, the standard for native Mac apps.
Build via Xcode: click the build (▶) button. Heart icon appears in menu bar → click → popover with three reminders. Toggles work. Settings panel works. Two structural problems flagged for next lesson: reminders aren't popping out of the notch, settings are stuck in the menu bar.
Architecture shift in the first 10 minutes: prompt Kiro to move reminders into the notch (animating out of it) and move settings into a standalone main window. About a minute later it's done. Click "Test reminder" → drink water → notification expands smoothly out of the notch. That's the moment it starts feeling like a real product.
Polish loop: rounded top corners (looks disconnected from the notch edge → remove), unnecessary close icon (auto-dismisses → remove), off-center layout (clarify: "icon stays on the left, text on the right, but the overall block is centered"). Each fix is one prompt → rebuild → test cycle.
Custom sound: head to Pixabay (free royalty-free sounds) and download a notification sound. Drop the MP3 into the Xcode project file tree manually (Kiro can't drag-and-drop files into Xcode for you), tell Kiro to use it. Rebuild — custom sound plays. Other free sound libraries you can pull from: Freesound, Mixkit, Zapsplat.
The longest lesson in the module — and where most of the real product work happens. Iterate on what separates a hobby project from a real app: granular reminder customization (per-day schedules, active hours, snooze), polish on the standalone settings window (typography, spacing, controls grouping, dark mode), state persistence so settings survive app restarts, edge cases in the notch pop-out (multi-monitor, external displays, fullscreen apps), and animation timing on the expand/collapse.
Most prompts in this lesson are corrective, not generative — tuning existing features until they feel right. The skill being built here is the iteration loop itself, not any single fix.
Two final things: real app icon and distributable installer. App icon: Xcode → Assets.xcassets → AppIcon → drag a 1024×1024 PNG. Apple generates every required size automatically. Source it from Figma, Iconfinder, Midjourney, or design it yourself.
Two distribution paths: Apple's official route ($99/yr Apple Developer Program, notarize, distribute via TestFlight or Mac App Store) — required for proper public distribution. The hacky indie route — DMG file (Mac disk image with the .app bundle and Applications folder shortcut). Free, no Apple account, 30 seconds. We're going DMG.
Output: wellbeing-notch.dmg on desktop, app bundle inside, drag-to-Applications shortcut, README covering install steps including the gatekeeper bypass (macOS blocks unsigned DMGs by default — friends right-click → Open the first time).
Module 05
Make it real. Custom domain DNS, Vercel deploys, Supabase backend in production, privacy-friendly analytics.
From localhost to live URL in under 5 minutes. We deploy to Vercel, set up preview deployments, configure environment variables, and walk through the build logs.
Supabase is your backend in a box. We set up auth, a database, and Row Level Security — everything you need to build real, data-driven products in production.
The finishing touches that make your project feel real: custom domain DNS setup, adding privacy-friendly analytics with Plausible or PostHog, and basic performance monitoring.