You know the page. Centred headline, a soft purple gradient, three cards with icons, a button that says "Get started". Ask any coding agent for a landing page and there's a good chance that's what comes back.
The code is usually fine. The design isn't wrong either. It just looks like nobody decided anything.
I've been building with Claude Code and Codex for 2 to 3 years, and for most of that time I treated this as a prompting problem. It turned out to be a missing file.
How I used to do it
When I wanted a project to look like a site I liked, I did what most people do:
- Take screenshots of the full-sized pages and get Codex/Claude to mimic them.
- Give it a URL of that page.
- Beg it to make it feel like a certain website.
It worked for one screen. Then it fell apart.
Why that kept breaking
A screenshot gives the agent pixels, not decisions. It can see that there's a grey, but not that the grey is only for secondary labels and never for body text. It sees a purple button, but not that purple shows up exactly once per page.
A list of hex codes has the same problem. Without roles, the agent spreads every colour everywhere. By the third screen the accent is on borders, icons, links and backgrounds, and the thing that made the original site feel calm is gone.
Adjectives are worse. "Minimal" and "premium" mean something different every session.
What I actually needed was the stuff a designer would write in a handoff: these are the colours and what each one is for, this is the type scale, this is how much space sits between sections, these are the things you don't do.
Why I built GradientDeck UI
GradientDeck started as a set of generators for the small pieces: gradients, palettes, shadows, glass. People used them, but a good palette on its own doesn't tell an agent how to pair type with it, how to space a layout or how a button should feel next to everything else.
So I started writing down whole visual languages from real websites, in a format an agent reads without help: a Markdown file called DESIGN.md.
That turned into ui.gradientdeck.com. It has 1,239 of them now.
What's in one
Here's the start of the Railway file, unedited:
# Railway — Style Reference
> dusk sky over a departure board. Build calm purple-black station halls
> where serif headlines arrive softly, one violet button boards the action
> and each chapter rides a tinted carriage.
**Theme:** dark
| Name | Value | Role |
|----------------|-----------|------|
| Midnight Canvas| `#13111c` | Page background, top bar and untinted chapters |
| Mist Gray | `#a1a0ab` | Lead paragraphs, feature descriptions, secondary labels |
| Deploy Violet | `#553f83` | The hero Deploy button fill |
| Lilac Signal | `#a78bfa` | Inline highlight phrases and the active dock tab label |
Every value has a role next to it. That column is the whole point. The file goes on to cover typography, spacing, components, surfaces, imagery, layout, and a list of do's and don'ts.
Each style comes in two sizes:
- Compact, about 3k tokens on average. Enough for most work.
- Extended, about 5k tokens. Adds token tables, a prompt guide for the agent and a quick start.
You can also export the same system as Tailwind v4, CSS variables or a design tokens JSON file.
How I do it now
Browse the library and pick a site whose feel fits what I'm making. Each one has a capture of the live site, most of them as short videos, so I can see how it moves and not just a still.
Pull the file into the project root:
curl -o DESIGN.md https://ui.gradientdeck.com/styles/railway/design.md
Or click copy on the page. Every file is a plain URL, so the agent can fetch it too.
- Add one line to
CLAUDE.md,AGENTS.mdor.cursor/rules:
Follow DESIGN.md for all colour, type, spacing and component decisions.
- Build as normal.
The difference I notice most is on screen five, not screen one. The agent keeps looking at the same file, so the settings page and the pricing page still agree with each other.
Make it yours
A DESIGN.md is a starting point. If you take Railway's file and ship it as is, you've built a site that looks like Railway, and that's not great for you or for them. Change the accent, swap a typeface, keep the spacing rules and the restraint. The file is just Markdown, so edit it like any other doc in your repo.
Each style page credits the site it was captured from and links to it.
It's free and there's nothing to sign up for. If there's a site you think should be in there, there's a "Request a site" button on the library page. I only add ones with design that really stands out.
Oh and the best part? You don't have to install an annoying MCP that constantly runs on your localhost on every boot. Use the library yourself, get your agent to use it or whatever - completely flexible. Enjoy.
Top comments (0)