What is design engineering?
beginner·6 min·Markdown for agents
What this lesson teaches
Tell vibe coding from design engineering, and know which on-ramp is yours whether you come from design, from code or from neither.
Two people ask an agent for the same pricing card. Ten minutes later, both have one that works. One of them looks like every other AI-made card on the internet. The other looks like someone cared.
The difference was not the agent. It was what each person did before and after the prompt.
- 1Prompt“Make me a nice pricing card.”
- 2AcceptIt runs, so it ships. Nobody reads the code.
- 3HopeUsers find the gray text, the three loud buttons, the missing focus ring.
- 1DecideOne primary action. Body text at 4.5:1. Price is the biggest thing.
- 2DirectHand the agent those decisions, in exact words, with the skill loaded.
- 3CheckRun a review, read the table, look at the screen, fix what it found.
Vibe coding: prompt, accept, hope
is asking an agent for something, accepting whatever runs, and hoping it is good. It is a fine way to make a throwaway tool on a Saturday. It is a poor way to make something people will use every day.
The trouble is that an agent, left alone, builds the average of everything it has seen. The average pricing card has a purple gradient, three buttons of equal weight and light gray text nobody can read. None of that is a bug, so nothing tells you it is wrong.
Design engineering: decide, direct, check
is the craft of building the details that make a working interface feel right: the motion, the states, the type, the color and the words. A design engineer works in the real material (code, in a real browser) rather than in pictures of it, and is judged by how the thing feels in the hand.
With an agent, that becomes a loop of three moves:
Decide
Make the calls an agent cannot make for you. One primary button. Body text dark enough to read. The price is the biggest thing on the card.Direct
Hand those decisions to the agent in exact words, with the design-engineering loaded so it knows the craft rules too.Check
Look at the result. Run a review. Fix what it found, then look again.
The agent does the typing; you own the judgement. That split is the whole course in one line.
✕ Vibe coding
"Make me a nice pricing card." Accept it. Ship it. Find out from users that the gray text is unreadable on their phone.
✓ Design engineering
"Pricing card: price at 40px, one dark primary button, a quiet text link for the second action, body text at 4.5:1 contrast." Then /design-engineering review and a look at the screen.
What a design engineer actually does
The job sits in the gap between a design and a shipped product. A designer draws what the screen should look like; an engineer makes it work; and somewhere in between, a hundred small things get decided by nobody. How long the menu takes to open. What happens when the list is empty. Whether the button shows it was pressed.
A design engineer decides those things on purpose. Some days that means prototyping an interaction to see if it feels right before anyone writes a spec. Some days it means building the components a whole team uses. Increasingly, it means steering an agent through all of that.
Pick your on-ramp
You do not need to be both a designer and an engineer to start. You need to be curious about the gap. Where you begin depends on where you come from.
You already have the eye: you see when spacing is off or a color is muddy. What is new is the material. Learn to read the code an agent writes well enough to spot a problem, and learn to judge a design in the browser, moving, at real sizes, not in a static mockup.
Start with Set up your agent, then the Motion module: motion is the part a static design tool never shows you.
The prompt that starts the habit
Before you ask for any new screen, ask the agent to slow down and make you decide. It is the single cheapest habit in this course.
Before you build this, ask me up to five questions about what matters most on this screen: the one action people should take, what they need to read first, and what states it can be in (empty, loading, error). Then build it with the design-engineering skill and show me a review table of anything you were unsure about.
Quick check
A friend asks an agent for a sign-up form, it runs, and they ship it without looking closely. What were they doing?
In the skill
The nodes your agent reads when it does this work.
- Directing agentsHow a person steers an agent toward good UI — friction where judgment matters, a named concept instead of an adjective, one or two passes with a look between them, fixing the system rather than the screen, and a papercut pipeline that hands the agent evidence.
meta/directing-agents - Feeling rightOptimize for "feeling right," not just "working." This is the part the model cannot infer from training data.
philosophy/feeling-right
Connected lessons
What this lesson builds on and leads to, across every course.
