# What is design engineering?

> Tell vibe coding from design engineering, and know which on-ramp is yours whether you come from design, from code or from neither.

Module: Start from zero · Level: beginner · 6 min · https://school.agents.org.in/foundations/start/what-is-design-engineering

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.

*[Interactive demo: Same request, two processes. Step through both and compare what comes out.]*

## Vibe coding: prompt, accept, hope

Vibe coding (Asking an agent for something, accepting whatever runs and hoping it is good. Fine for throwaways; it ships the agent's average guess) 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

Design engineering (The craft between design and code: building the details (motion, states, type, color, copy) that make a working interface feel right) 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:

  **Step: 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.

  **Step: Direct.** Hand those decisions to the agent in exact words, with the design-engineering skill (A folder of written instructions an agent loads when a task matches, so it does the work the way you want instead of its default way) loaded so it knows the craft rules too.

  **Step: 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 (avoid):**

"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 (do this):**

"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.

> **In plain words.** Designers ask "what should this look like?" Engineers ask "how does this work?" Design engineers ask "how does this **feel** to use, and what exactly would make it feel better?"

## 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.

  **From design:**

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](/learn/start/set-up-your-agent), then the Motion module: motion is the part a static design tool never shows you.

  **From code:**

You already have the material: you can build anything. What is new is the eye. Learn the names for what you are looking at ([words matter](/learn/start/words-matter)), and train yourself to notice the details you used to skip: the hover state, the empty state, the 4px that makes two things look grouped.

    Start with [How good interfaces think](/learn/philosophy/taste-is-trained), then the craft modules in order.

  **From neither:**

Good news: you skip the habits the others have to unlearn. Go in order. Set up an agent, learn the words, and get your first screen reviewed. Every lesson assumes nothing.

    Start with [What is an agent?](/learn/start/what-is-an-agent)

*(Your agent can already write code. What it cannot do is want something. That part is 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.

**Make me decide first (paste into your agent):**

```text
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.
```

**Check yourself:** A friend asks an agent for a sign-up form, it runs, and they ship it without looking closely. What were they doing?

- [ ] Design engineering, because it works
- [x] Vibe coding: prompt, accept, hope
- [ ] Directing the agent
- [ ] Checking the result

*Why:* Working is the starting line, not the finish. Without deciding what matters and checking the result, they shipped the agent's average guess.

## In the skill

- https://school.agents.org.in/skill/meta/directing-agents.md
- https://school.agents.org.in/skill/philosophy/feeling-right.md