Design × AI Learning Series
Learn to design in the AI era
Practical learning themes covering the code fluency, taste, systems, agentic UX, and leadership you need next.
Featured Themes
Featured Module
Design to Ship (macOS): Zero-to-Deployed Starter
A practical onboarding module for designers moving from canvas to shipping. Set up GitHub, CLI tooling, Supabase, and Vercel on macOS, then deploy your first project with guardrails for safe AI-assisted coding.
What you set up
- GitHub account + private sandbox repo + PAT/CLI auth
- Homebrew, Node/npm, Git, Supabase CLI via Terminal
- Supabase project + CLI login/link for local workflows
- Vercel project from GitHub + env vars + deploy flow
- Custom domain wiring with DNS record walkthrough
Safety notes
- Use private repos for experiments and credentials.
- Never paste secrets into prompts or public chats.
- Review every AI-generated terminal command before running.
- Prefer least-privilege tokens and rotate if exposed.
- Treat AI copilots as assistants, not autonomous admins.
10 starter terminal commands
pwdcd ~/Desktop/your-projectls -lamkdir your-project && cd your-projectgit initgit checkout -b feature/first-setupgit add . && git commit -m "initial setup"git push -u origin maingit pull origin mainnpm install && npm run devLearning Index
All Learning Themes
Design to Ship (macOS): Zero-to-Deployed Starter
A practical onboarding module for designers moving from canvas to shipping. Set up GitHub, CLI tooling, Supabase, and Vercel on macOS, then deploy your first project with guardrails for safe AI-assisted coding.
Open full lesson →
Claude Code for UI Components
Use Claude Code to scaffold components with sensible defaults and readable props. Learn to iterate on structure first, polish second, and keep diffs reviewable.
Open full lesson →
Cursor for Designers: Fast but Governed
Set up Cursor workflows that preserve intent: scoped edits, context discipline, and prompt templates. Learn how to keep quality high while speed increases.
Open full lesson →
React Fundamentals for Design Output
Review component structure, state, and data flow with a designer’s lens. You’ll translate visual requirements into predictable UI behavior.
Open full lesson →
Tailwind for Designers: Tokens in Practice
Build premium UI using semantic classes and token-aware spacing. Learn how to avoid arbitrary styles and keep the system coherent across screens.
Open full lesson →
Figma-to-Code: From Layout to Interface
Map Figma structures into component hierarchies and state models. Practice carrying constraints forward so the implementation matches the design intent.
Open full lesson →
v0/Bolt Prototyping: Ship the First Truth
Use AI prototyping tools to create a usable first build, not a pretty screenshot. Learn how to validate flows and remove wireframing-by-habit.
Open full lesson →
From Local Build to Vercel Deploy
Turn a feature branch into a production-ready deployment. Learn the checks that matter: environment assumptions, build outputs, and regression sanity.
Open full lesson →
Git for Design Iterations
Use branches and commit messages to keep your design work auditable. Learn a practical review style that makes AI-generated diffs easier to trust.
Open full lesson →
Debugging AI Output Systematically
Break failures into intent issues, logic gaps, and integration mismatches. Learn to regenerate with constraints rather than guessing.
Open full lesson →
Component → API Design Thinking
Design components as contracts: inputs, outputs, data shapes, and edge behavior. Practice building interfaces that AI can use reliably in downstream code.
Open full lesson →
MCP Integrations: Build Toolchains
Learn how to connect design intent to tool execution via MCP. Practice designing functions with predictable inputs so the system behaves consistently.
Open full lesson →
Database Basics for Product UI
Model entities your UI depends on and keep data shapes explicit. Learn enough fundamentals to avoid mismatches between design, API, and UI state.
Open full lesson →
API Consumption: Shape Data for UX
Turn raw responses into UI-ready models and loading/error states. Learn to treat error handling as a first-class part of the design.
Open full lesson →
Testing UI with Realistic Cases
Write tests that reflect how humans and agents use the interface. Learn to cover states AI tends to break: edge inputs, async timing, and accessibility checks.
Open full lesson →
Accessibility Automation Loops
Build checks into your workflow so accessibility improves continuously. Learn to encode accessibility constraints that remain stable as the UI evolves.
Open full lesson →
Performance Basics for Premium UIs
Practice the fundamentals that keep the experience fast: rendering discipline, network boundaries, and asset strategies. Learn to treat performance as part of taste.
Open full lesson →
CI/CD for Designer Shipping
Design a pipeline that catches regressions early and rewards confidence. Learn the minimal set of checks to keep AI-assisted changes stable.
Open full lesson →
Building Figma Plugins that Matter
Create lightweight plugins that turn design intent into repeatable actions. Learn to keep UI small, tool logic clear, and outputs machine-consumable.
Open full lesson →
Portfolio Projects that Ship
Build a capstone where your design intention becomes a deployed artifact. Learn to explain your constraints, trace decisions, and show measurable outcomes.
Open full lesson →
Suggested Path
Where to start
Take the Genome Assessment
Discover your dominant archetype and understand which skills matter most for your profile.
Start assessmentBegin with Prompt Engineering
The foundational skill. Learn to communicate with AI tools effectively — every other theme builds on this.
Start modulePick Your Archetype Track
Based on your genome results, choose the theme track that accelerates your natural strengths.
Browse unitsNew themes every week
Subscribe to get notified when learning themes drop — plus weekly research signals and archetype deep-dives.
Subscribe — Free