Skip to content

Conversation

@quang-design
Copy link

New Roadmap: Design Engineer

A comprehensive roadmap for the hybrid discipline bridging design and frontend development.

What This Roadmap Covers

Core Fundamentals

  • HTML, CSS, JavaScript, TypeScript, React, Next.js

Design Systems & Tokens

  • Design tokens (color, typography, spacing)
  • Component architecture and API design
  • Tools: Figma Dev Mode, Style Dictionary, Tokens Studio

Animation & Motion

  • Framer Motion (variants, gestures, layout animations)
  • CSS transitions/animations, spring physics, micro-interactions

UI Patterns & Components

  • Modals, dropdowns, forms, toasts, loading/error/empty states
  • Radix UI, shadcn/ui, Storybook, CVA, Tailwind CSS

Accessibility

  • ARIA patterns, focus management, reduced motion

AI-Assisted Development

  • GitHub Copilot, Cursor IDE, v0 by Vercel

Career Development

  • Portfolio strategy, case studies, technical interviews

Implementation

  • 80 topic content files with curated resources
  • Complete roadmap JSON structure
  • All metadata and SEO configured
  • Related roadmaps: Frontend, Design System, UX Design, React, TypeScript

Why This Roadmap?

Design Engineering is an emerging role increasingly in demand at companies like Vercel, Linear, and Stripe. This helps developers and designers understand the skills needed to bridge both disciplines.


🤖 Generated with Claude Code

A comprehensive roadmap for aspiring Design Engineers covering:
- Core fundamentals (HTML, CSS, JavaScript, React, TypeScript)
- Design systems and tokens
- Animation and motion (Framer Motion, CSS animations)
- Component patterns and architecture
- Accessibility fundamentals
- AI-assisted development tools
- Career development guidance

Includes 80 topic content files with curated resources.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@jcanalesluna
Copy link
Collaborator

Thanks for the PR, but this is not the way to add new roadmaps. Check out the contribution guidelines!
https://github.com/iPoetDev/roadmap-sh--developer-roadmap/blob/master/contributing.md#adding-projects

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants