A written version of the interactive roadmap above — every station, what you'll learn, and a small thing to build — laid out for reading, reference and search.
Design Foundations Start here
F1. What a Design Engineer Is
Beginner · 35 min
A design engineer sits at "the front of the frontend" — the hybrid who both designs interfaces and builds them in real code, closing the gap between a static mockup and a living product. Learn what the role actually covers (design systems, prototyping, UI implementation, interaction craft), how it differs from both a pure designer and a pure frontend engineer, and why it’s one of the highest-momentum roles in the AI era.
Skills: Front of the frontend · Design vs frontend vs design engineer · What the role owns · Why it’s rising
Build it: A mockup looks perfect but feels wrong once built. Explain what a design engineer catches that a handoff between designer and dev misses.
F2. Visual & Interaction Design
Beginner · 55 min
You can’t build great interfaces without understanding what makes them good. Learn the visual fundamentals — hierarchy, spacing, alignment, contrast — and the interaction fundamentals: affordance, feedback, and states. This is the taste layer, and it’s exactly what AI can’t supply: a model can generate a UI, but judging whether it’s clear, usable, and good is human work.
Skills: Hierarchy and spacing · Alignment and contrast · Affordance and feedback · Interaction states
Build it: AI generates a form that’s technically complete but visually cluttered. List the hierarchy and spacing fixes that make it usable.
F3. Typography, Layout & Color
Beginner · 50 min
The three tools you shape every interface with. Learn typographic scale and rhythm, layout systems (grids, spacing scales), and color — palettes, contrast, and building a system rather than picking hues one at a time. Design engineers encode these as reusable systems, not one-off choices, which is what makes an interface feel coherent and lets it scale.
Skills: Type scale and rhythm · Grids and spacing scales · Color systems and contrast · Systemic not one-off choices
Build it: A product’s screens each use slightly different spacing and type sizes. Describe the scale system you’d define to make them cohere.
F4. Design Systems Thinking
Intermediate · 55 min
A design system is the shared language of components, tokens, and patterns that keeps a product consistent and fast to build. Learn to think in components and variants, to define the tokens (color, spacing, type) that everything derives from, and to document patterns so a whole team builds the same way. Owning the design system is one of the most durable, high-leverage things a design engineer does.
Skills: Components and variants · Design tokens · Patterns and documentation · Consistency at scale
Build it: Five teams built five different buttons. Describe the component + token structure you’d define so there’s one button, themeable everywhere.
F5. Prototyping
Beginner · 45 min
The design engineer’s superpower is prototyping in real code, not just in a design tool — testing an idea as something you can actually click and feel. Learn to move fast from concept to interactive prototype, to prototype the risky interaction rather than the obvious screen, and to use prototypes to answer "does this feel right?" before committing. AI makes this faster than ever, which raises the value of knowing what to prototype.
Skills: Prototyping in real code · Fast concept → interactive · Prototyping the risky part · Testing feel early
Build it: A novel drag-and-drop interaction is core to the product. Explain why you’d prototype it first, and what you’d be testing for.
F6. Accessibility First
Intermediate · 50 min
Accessible design isn’t a compliance afterthought — it’s part of the craft, and it makes interfaces better for everyone. Learn the essentials: semantic structure, keyboard navigation, focus management, sufficient contrast, and ARIA where needed. Crucially, AI-generated UI is frequently inaccessible by default, so the design engineer who bakes accessibility in is doing exactly the judgment work a generator skips.
Skills: Semantic structure · Keyboard and focus · Contrast (WCAG) · Fixing inaccessible AI output
Build it: AI generates a slick custom dropdown with divs and no keyboard support. List what makes it inaccessible and how you’d rebuild it.
Code & Craft Build it real
T1. HTML & CSS, Deeply
Beginner · 55 min
The design engineer’s core material is CSS, and knowing it deeply is what turns a design into a pixel-perfect, resilient interface. Learn modern layout (flexbox, grid), the cascade and specificity, custom properties for theming, and how to build layouts that hold up across content and screens. AI writes CSS, but the engineer who truly understands it fixes the subtle rendering bug the generator can’t.
Skills: Flexbox and grid · Cascade and specificity · Custom properties · Resilient layouts
Build it: An AI-generated layout collapses when the text is longer than the demo content. Explain the likely cause and the robust fix.
T2. Component-Driven UI
Intermediate · 55 min
Modern interfaces are built from components — reusable, composable pieces with clear props and states. Learn to think in components, design good component APIs (what’s configurable, what isn’t), handle all the states (loading, empty, error, edge cases), and compose small pieces into full screens. This is where design systems become real code.
Skills: Thinking in components · Component API design · All the states (loading/empty/error) · Composition
Build it: A "card" component is copy-pasted with tweaks 30 times. Describe the single flexible component API that would replace them.
T3. A UI Framework
Intermediate · 55 min
To build real products you need a UI framework — React or a peer. Learn the core model: components, state, effects, and rendering, plus how data flows and how to keep components predictable. You don’t need to be a systems engineer, but you need enough fluency to build production interfaces and to read and fix the framework code AI generates.
Skills: Components, state, effects · Data flow · Predictable rendering · Reading AI-written framework code
Build it: An AI-generated component re-renders on every keystroke and lags. Explain a likely cause and how you’d confirm it.
T4. Design Tokens & Theming
Intermediate · 45 min
Design tokens are the bridge between design and code — named values (color, spacing, type) that both sides share, so a change in one place updates everywhere. Learn to structure tokens, drive theming (light/dark, brands) from them, and connect the design tool to the codebase so design and implementation never drift. This is the design engineer’s signature craft: making the system real and single-sourced.
Skills: Structuring tokens · Theming (light/dark, brands) · Design-to-code sync · Preventing drift
Build it: Design ships a new brand color and 40 components need updating. Describe the token setup that makes it a one-line change.
T5. Motion & Micro-interactions
Advanced · 50 min
Motion is where interfaces come alive — and where craft separates good from great. Learn the principles of purposeful animation (feedback, continuity, delight without distraction), easing and timing, and how to build performant transitions and micro-interactions that feel right. This is deeply human taste work: AI can add motion, but knowing which movement enhances versus annoys is judgment.
Skills: Purposeful animation · Easing and timing · Micro-interactions · Performance of motion
Build it: An interface animates everything, and it feels chaotic. Explain which motions you’d cut and which you’d keep, and why.
T6. Responsive & Performant
Advanced · 50 min
A great interface works on every screen and loads fast, and both are part of the craft. Learn responsive design beyond breakpoints (fluid type, container queries), and the performance fundamentals that matter for UI: image and font loading, avoiding layout shift, and keeping interactions smooth. AI-generated UI often ignores these; the design engineer who owns them ships interfaces that feel good in the real world, not just the demo.
Skills: Responsive beyond breakpoints · Fluid type and container queries · Loading and layout shift · Smooth interactions
Build it: A page looks great but jumps around as it loads and feels janky on mobile. List the causes you’d investigate first.
Design Engineer & AI Era Own the future
P1. Own the Design System
Advanced · 50 min
The highest-leverage design-engineer role is owning the design system — the components, tokens, and patterns the whole product is built from. Learn to build and maintain one as a real, versioned product with its own users (the other builders), to balance flexibility against consistency, and to drive adoption. Owning the system multiplies your impact across every team and is durable, senior work.
Skills: System as a product · Versioning and adoption · Flexibility vs consistency · Multiplying team impact
Build it: Teams keep working around the design system instead of using it. Diagnose why that happens and how you’d fix adoption.
P2. AI-Assisted Prototyping
Advanced · 50 min
AI can now generate UI from a prompt or a screenshot, which turbo-charges the design engineer’s prototyping loop — if you drive it well. Learn to use AI to go from idea to working prototype in minutes, then apply your craft: fix the accessibility, tune the spacing and motion, enforce the design system, and cut what doesn’t serve the interaction. AI produces the draft; your taste and systems judgment make it good.
Skills: Prompt/screenshot → UI · Refining AI-generated interfaces · Enforcing the system on AI output · Draft fast, judge hard
Build it: AI generates a whole screen from your sketch in seconds. List the first five things you’d check and fix before anyone sees it.
P3. Bridging Design & Engineering
Advanced · 45 min
The design engineer’s rare value is being fluent in both worlds — translating design intent into technical reality and technical constraints back into design. Learn to collaborate deeply with both designers and engineers, to make the trade-off calls at the boundary (this animation is beautiful but costs performance), and to be the person who ensures the built product actually matches the design vision. That bridge is exactly what AI can’t be.
Skills: Design ↔ engineering translation · Trade-off calls at the boundary · Collaboration with both sides · Vision → shipped reality
Build it: A designer wants a effect that would tank performance. Describe how you’d find the version that keeps the intent and the frame rate.
P4. Design & Developer Experience
Advanced · 40 min
Great design engineers improve how design and development happen, not just the output. Learn to build the tooling and workflows that make the whole team faster: component playgrounds, visual testing, design-to-code pipelines, and documentation people actually use. As AI accelerates production, the leverage moves to the systems and workflows that keep quality high at speed — and that’s design-engineer territory.
Skills: Component playgrounds · Visual and interaction testing · Design-to-code pipelines · Docs people use
Build it: UI regressions keep slipping into production. Describe the testing and workflow you’d add to catch them before release.
P5. The AI-Era Design Engineer
Advanced · 50 min
AI can generate UI code and mockups, so the craft that stays valuable is everything it can’t judge: taste, interaction quality, accessibility, systems thinking, and whether the result actually feels right. Learn to lean into that — use AI to produce drafts at speed, and own the judgment, polish, and coherence that separate a generated interface from a great product. The design engineer whose value is taste and systems thrives; the one who only wrote boilerplate UI is exposed.
Skills: Taste as the moat · Judging AI-generated UI · Polish and coherence · Systems over boilerplate
Build it: Two teams ship the same feature; one used AI raw, one used AI plus a design engineer. Describe the differences a user would feel.
P6. The Design Engineer Career
Advanced · 40 min
The role branches into several futures: the design systems lead who owns the shared foundation, the product-focused design engineer who ships end-to-end, the prototyping specialist who explores the frontier, and the design-eng manager. Learn where the role is going as AI reshapes UI production, how to build a portfolio that shows both taste and code, and how to grow from implementing designs to owning the craft and the system.
Skills: Systems lead / product / prototyping paths · Portfolio of taste + code · From implementing to owning craft · Growing scope
Build it: Write the six-month plan that moves you from "builds the designs handed to you" to "owns the design system and the interaction craft".