Becoming a Design Engineer.
Ask ten people what a design engineer is and you get ten answers. A front-end developer who likes Figma. A designer who once wrote CSS. Anyone who has opened Cursor.
Meanwhile half of product designers have already shipped AI-generated code, and one in five uses the title.
This is the version that ships.
One sentence, and most of it is about the deliverable.
This is the definition, and everything in this guide is built on it.
A design engineer is a product designer who designs in code and ships their work to production through pull requests, instead of handing off mockups for engineers to rebuild.
Strip everything else away and it is a designer with a bias to shipping. Give them a screen and their brain does not stop at “how should this look”. It carries on to “how does this get into production, and what is in my way”. The handoff exists so designers do not have to ask that question. Design engineers never quite accepted the handoff.
It is not a developer, not a UX engineer, not a design technologist, not someone who does DevOps, and not a seniority level. Every design decision stays with the designer. What the agent gets is the job of writing those decisions down in code, in the right components, so the designer can see them for real instead of in a picture of them.
Source: Designer Fund and Foundation Capital, AI in Design Report 2026.
Where are you on the ladder?
Take an honest look at the last five things you designed. Only one rung reaches production. The distance between the second and the third is measured in weeks of curiosity, not years of study. The three profiles come from the new design ladder.
Lives in Figma
A picture of the product.
This is you if: The last five things you designed are all still in Figma.
AI-native
A prototype an engineer rebuilds.
This is you if: Some became Lovable or v0 prototypes that were rebuilt before they shipped.
Design engineer
A pull request that gets merged.
This is you if: At least one shipped as a pull request you opened yourself.
How to become a design engineer, chapter by chapter.
From what the job is to your first merged pull request, in the order you will need it. Start at chapter 01, or jump straight to the question that has kept you in Figma.
Six skills for your coding agent.
The repetitive parts of chapters 6 and 7, written down once for Claude Code, Cursor and Codex. Open source, and they run on your own repository.
npx skills add modeinspect/design-engineer-skillsrepo-orientation, component-impact, visual-qa-branch, reviewable-ui-pr, review-as-designer and ai-ready-design-system. From a fresh clone to a pull request an engineer can review, with every check backed by a screenshot or a command that ran.
The short answers.
The questions designers ask before they open the repo. Each one has a longer answer in a chapter.
Written from the inside.
Modeinspect builds the tool design engineers work in, and this guide is written by the team, from our own design workflow and from the designers we talk to every week. Where we say “we have seen”, it is our observation and we say from what. Where it is someone else's number, it carries their name and date. Where a tool is compared, Modeinspect appears where it belongs and is absent where it does not.
The belief behind it is in the manifesto: design engineering is not new, it is how great products were always made. The handoff is the ancient part.
Peter Bokor
Founding Design Engineer, Modeinspect
Design in code. Zero handoff.
When you are ready for the third rung, Modeinspect is a canvas on your real codebase that turns the change into a pull request, without the local setup that Cursor asks of a designer.