# Design Direction

[The Generic AI Look](/guides/ai-slop/) is a list of things to strip out after the page exists. This page covers the decisions you make before the AI agent writes any CSS, so there is less to strip.

## Start with the Problem

Design solves a problem. Looking good is one way to solve it, and on some pages it is the wrong way.

Say you are building a tool that checks whether a URL is up. Someone opens it to get an answer in two seconds. Add a glass panel, an animated background and a rotating 3D globe and the page now takes six seconds to load, with the answer somewhere inside all of it. Each piece is impressive on its own. Together they work against the one thing the page is for.

Before you prompt, write one sentence at the top of your README: **who opens this, and what do they need in the first five seconds?** When you are deciding whether an effect stays, check it against that sentence.

## Write the System Down

Give the agent a constitution before it starts guessing. Open your stylesheet and fill in a `:root` block:

```css
:root {
  --bg: #faf9f7;
  --text: #1c1917;
  --accent: #2563eb;   /* one accent, used sparingly */
  --font-body: system-ui, sans-serif;
  --space: 16px;       /* every gap is a multiple of this */
  --radius: 4px;       /* one corner radius, everywhere */
}
```

Start with six values: two neutrals, one accent, one font, one spacing step, one radius. Add a heading font or a shadow when a page actually needs it, and choose the value yourself.

Then hand the agent the rule along with the work:

```
Use only the custom properties in the :root block of my stylesheet.
If you need a value that is not there, stop and tell me.
```

## Check Every Round Against It

After each build round, before you judge how it looks:

```
Does this follow the :root block in my stylesheet?
List every hardcoded color, size or radius that should have used a custom property.
```

An agent will happily use your variables on the section you asked about and hardcode `#6366f1` two files over. Asking for the list catches that while the round is still fresh.

## Compare Directions Side by Side

"Make it look better" gets you one opinion with nothing to compare it to. Ask for three, in three throwaway files.

Create `option-a.html`, `option-b.html` and `option-c.html`, and give the agent one named direction per file: "editorial, heavy type, no cards", "terminal, monospace, one green accent", "soft and warm, generous spacing". Leave your project files closed while you do this.

Open the three side by side, pick one, and apply that one to the real pages. Delete the other two.

## Write Down the Rule Behind Each Cut

The Generic AI Look tells you to subtract first, removing decoration until something breaks and then putting that one thing back. Do the subtracting, then take one more step:

```
I removed the drop shadows, the badges and two of the three fonts.
What design rules do those cuts imply?
Write them as three lines I can paste into my stylesheet as comments.
```

## Plan for Several Rounds

Social media rewards the demo where one paragraph produces a finished product. Your build will take rounds.

Preparation is what shortens them: the sentence about who opens this, the six values in `:root`, the direction you picked out of three. Whether the build then takes two rounds or 10 does not matter.

> 🤖 **AI tip:** Paste your `:root` block into the chat at the start of a session. An agent that can see the palette uses `var(--accent)`. An agent that cannot see it invents a color.

> **Key takeaway:** You cannot ask an agent to follow a design system you have not written down. Six custom properties and one sentence about who the page is for will do more for how it looks than any prompt about looking good.

## References

- [The Generic AI Look](/guides/ai-slop/), the 23 patterns to strip out, and the companion to this page.
- [MDN: Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), the full reference for `:root` and `var()`.
- [Web Design in 4 Minutes](https://jgthms.com/web-design-in-4-minutes/), a page by Jeremy Thomas that restyles itself step by step as you click through it, from content and centering through fonts, spacing and color to images. Most of its steps set a value that belongs in your `:root` block.
- [Recommended Reading](/guides/recommended-reading/), the Taste and Design section, for where a sense of direction comes from in the first place.