Career Path & Skills

How designers and engineers transition into the role — a staged roadmap, the recurring learning advice, and what a portfolio must prove.

A staged roadmap

The deep-research roadmap proposes four phases for reaching the role.²

1. Foundations — "materials of the web" (months 1–6). Semantic HTML, CSS Grid/Flexbox, basic JavaScript; study design fundamentals from an engineering perspective; build one small tactile item per week.
2. React, Next.js & interactivity (months 6–12). Component-based UI, state management, custom hooks, basic API integration; rebuild a complex interaction from a high-quality product.
3. Systems & governance (months 12–24). Atomic design, design tokens, Git, Storybook, WCAG; contribute to an open-source design system (Radix, shadcn/ui).
4. AI mastery (ongoing). Prompt engineering for UI, AI-native IDEs, integrating AI SDKs; ship a full-stack AI-native app with auth and real-time data.

Recurring advice from practitioners

• Build first, learn what you need. Mariana Castilho's coding attempts failed in "tutorial hell"; progress came from building projects and learning only what each required.⁴
• Master fundamentals over trends. Typography, spacing, and layout improve quality more than chasing tools — echoed across sources.⁴⁵
• Don't chase frameworks first. Karl Koch: start with the terminal, HTML, and CSS before React; curate a personal "toolkit" of patterns rather than learning everything.⁵
• Taste is learnable: Study, Note, Build. Raphael Salaja's method — inspect great work, train your eye to notice micro-interactions, then copy the best to learn how they work.⁶
• Learn by collaboration. Vercel's team: developers should pair with designers to learn intent; designers should learn the language of the web.⁷
• Share work in public. Castilho attributes her trajectory to publishing experiments (Twitter, her UI Labs project), which made her visible to leading teams.⁴

Two on-ramps

• If you're a designer: you have the "eye" — focus on turning designs into real code, using AI to speed the translation.⁶
• If you're an engineer: train your eye — analyze favorite apps and replicate their UI patterns and systems.⁶

The portfolio

A design engineer's portfolio is their primary credential and must show the "trifecta" of design sense, technical implementation, and thoughtful decision-making.² Effective case studies frame the problem, show the process, explain technical decisions, and document outcomes; direct artifacts include deployed prototypes, clean GitHub repos, and a published Storybook.² People respond to visible "care."⁶