Design engineering roadmap
What design engineers do, and your path from designer to design engineer.
Become a Design Engineer
Increase your value as a designer with the most valued skill in the age of AI.
Start the Course Today$149/month · Cancel anytime
Our resources have been trusted by designers from
“I've gone from not knowing how to code to building my own AI agent. Every session has been engaging, interactive, and deeply impactful.”
IniOluwaSenior Product Designer, Intercom“I'm leaving this course feeling truly confident in my AI fluency. I'm now ready to build a new portfolio quickly and effectively.”
DanaLead Product Designer, ex Rite Aid“John equipped me with understanding the AI possibility space to take my initial ideas and turn them into working POCs.”
BrettProduct Designer“John emphasizes practical application over lectures, which made the material immediately useful.”
SonaliSr. Product Designer, JPMorgan Chase“His strategic frameworks and live sessions helped me think like both a strategist and a solutionist.”
SnehUX Designer“This cohort gave me the foundation to understand AI at a high level, and how to design human-centered AI experiences.”
Kenneth HargroveProduct Designer, CoStar“I've gone from not knowing how to code to building my own AI agent. Every session has been engaging, interactive, and deeply impactful.”
IniOluwaSenior Product Designer, Intercom“I'm leaving this course feeling truly confident in my AI fluency. I'm now ready to build a new portfolio quickly and effectively.”
DanaLead Product Designer, ex Rite Aid“John equipped me with understanding the AI possibility space to take my initial ideas and turn them into working POCs.”
BrettProduct Designer“John emphasizes practical application over lectures, which made the material immediately useful.”
SonaliSr. Product Designer, JPMorgan Chase“His strategic frameworks and live sessions helped me think like both a strategist and a solutionist.”
SnehUX Designer“This cohort gave me the foundation to understand AI at a high level, and how to design human-centered AI experiences.”
Kenneth HargroveProduct Designer, CoStar“John's course is practical, with demos and real encouragement to explore AI tools specifically for designers.”
LindaPrincipal PD, JPMorgan Chase“Always accessible. He creates additional tutorials on demand and is ready to help with patience and care.”
AviadProduct Designer“Crash course in AI tools: Relume, Lovable, Figma Make, n8n, and more. John was extremely knowledgeable.”
DanUX Designer, RTI International“He packed in a lot of valuable insight on building industry-standard AI-ready design systems, how to structure them, maintain them, and test them so agents produce reliable, on-brand output.”
“John is very knowledgeable and enthusiastic about building quality design systems that allow us to get the most from AI. The course was informative, and there were many opportunities to ask questions.”
“John's course is practical, with demos and real encouragement to explore AI tools specifically for designers.”
LindaPrincipal PD, JPMorgan Chase“Always accessible. He creates additional tutorials on demand and is ready to help with patience and care.”
AviadProduct Designer“Crash course in AI tools: Relume, Lovable, Figma Make, n8n, and more. John was extremely knowledgeable.”
DanUX Designer, RTI International“He packed in a lot of valuable insight on building industry-standard AI-ready design systems, how to structure them, maintain them, and test them so agents produce reliable, on-brand output.”
“John is very knowledgeable and enthusiastic about building quality design systems that allow us to get the most from AI. The course was informative, and there were many opportunities to ask questions.”
What's Included.
UI craft
Spacing, type, color, and states that make UI feel designed.
Agentic coding
HTML, CSS, JS, and React, built with coding agents.
Motion in code
Transitions and micro-interactions, built in code.
AI-ready design systems
Tokens and components coding agents can build on.
Cursor
Build real projects in Cursor, from prompt to feature.
Claude Code
Ship real products with Claude Code.
Figma
Components, variables, and Figma Make, ready for code.
AI agents
Build AI agents and automations that do real work.
Plus community access. Join the async chat with designers building with AI. Each month, the top learner on the leaderboard gets a free 30-minute 1:1 mentorship call with John.
Design It. Build It. Ship It.
Designers are already shipping code with AI, and most of the rest say they should be. Meanwhile, most designs still lose something in the handoff.
Designers who have pushed AI-generated code to production
Designer Fund, 2026Designers who say designers should know how to code
CollabSoft, 2025Designers who say their work gets built pixel-perfect after handoff
CollabSoft, 2025Developers who use or plan to use AI tools
Stack Overflow, 2025From Designer Who Designs to Designer Who Ships.
AI coding tools changed who can build. The designers teams value most now take an idea all the way to a working product, and own what ships.
0%faster to a working prototype when designers build with AI
Source: Figma AI Report, 2026Learn Directly From an Industry Professional With 10+ Years of Experience.
Training
Become a Design Engineer, Starting Today.
This course plus every AI Mastery course, for one monthly price.
“I've gone from not knowing how to code to building my own AI agent. Every session has been engaging, interactive, and deeply impactful.”
IniOluwaSenior Product Designer, IntercomDesign Engineering Course
Going up to $249 soon$149/ month
Instant access · Cancel anytime
- All 9 design engineering modules, self-paced
- Every other AI Mastery course: Claude Code, Cursor, Codex, and more
- Recordings from John’s paid live workshops
- Community of designers building with AI
You get instant access, so this month isn’t refundable.Cancel anytime to stop the next month.
John Rodrigues
John is a design engineer with 10+ years of product and design experience at teams including JPMorgan, Citi, and TOCA. He designs interfaces and builds them in code, the exact workflow this course teaches.
He founded Human AI Studio and Orbi AI, and builds both with Claude Code and Cursor. He has taught more than 10 cohorts on Maven, rated 4.6/5, and his masterclasses have reached 3,195 designers.
- Years in product and design
- 10+
- Cohorts taught on Maven
- 10+
- Maven rating
- 4.6/5
- Masterclass attendees
- 3,195
Who This Course Is For.
This is for you if
- You're a product or UX designer who wants to build what you design
- You want to grow your value as a designer, in the role you have or the next one
- You're tired of your designs changing in the handoff
- You want to ship real products, not just mockups
This isn't for you if
- You don't want to adapt as the industry moves toward designers who build
- You don't believe designers need to be technical, or able to talk to engineers in their language
- You don't want to build what you design
- You want AI to build for you without learning the craft
Before You Enroll.
What is design engineering?
Design engineering sits between design and front-end development. Design engineers design an interface and build it in code, so the product ships the way it was designed.
Do I need to know how to code?
No. The course starts with the fundamentals and uses AI coding tools like Claude Code and Cursor, so you can build real interfaces while you learn how the code works.
What tools do I need?
Figma, a code editor, and Claude Code or Cursor. A paid plan for one AI coding tool is enough to follow along.
Is this course part of AI Mastery for Designers?
Yes. Design Engineering is one of the courses in AI Mastery for Designers. One membership, $149 a month, includes this course, every other course, and the community. It's self-paced.
Can I get a refund?
You get instant access to the content, so this month isn’t refundable. Cancel anytime to stop billing for the next month.