Start here

Point your agent at a design system in ten minutes.

Your coding agent can already write the screen. It cannot know what your product looks like, so it invents that part. Aestheria is the layer that answers the question, and this is the whole thing from the beginning.

This post assumes you have never heard of Aestheria. It covers what the product is, the problem it exists for, and how to connect it to the editor you already use. You need an agent that speaks MCP (Cursor, Claude Code, Codex, Copilot, and Windsurf all do) and a project to build in. Connecting costs nothing and writes nothing to your repository.

The part your agent is guessing

Ask Claude Code for an invoices table on Monday and it ships one: sortable columns, filters above the table, an export action in the header. Ask for a subscriptions table on Thursday, in a new chat, and it ships that too. The filters are in a drawer now. Export moved to a kebab menu. A status reads "active" on one page and "Active" on the other, and the rows are four pixels taller.

Neither screen is wrong. Each one passes review on its own, because each one answered the prompt it was given. What the second prompt never said was everything the first screen had already settled: where filters live, which action leads, how a status is spelled. Every generation starts from zero, so the product gains a new dialect every time someone opens a new chat window.

The failure is not the model. Models write competent code. The missing input is design context: the decisions that live in a Figma file, a documentation site, and the heads of the people who made them, none of which an agent can read while it works. A coding agent reads your codebase and infers a house style from whatever it happens to open. That is a guess, and it is a different guess each time.

What Aestheria is

Aestheria, the design context layer, is the machine-readable answer to that question. It packages design decisions in a form an agent consumes while it generates: tokens with the rules for using them, components with the states they ship, patterns, page templates, and the reasoning behind each choice. The design context layer explainer defines the category in full. This post is the practical version.

What ships today, as counted from the system itself: 405 tokens across six themes in light and dark, 37 components, 27 visualizations, 22 patterns, 14 card archetypes, and 63 page templates. Six skills carry the judgment: Atlas owns page structure, Doric owns token discipline, Mira owns interaction states, Umbra owns the states most screens forget, Aura owns accessibility, and Aria routes between them.

The important half is the second one. An inventory tells an agent which colors exist. It does not say that a destructive action needs a confirm step, that a dense record set belongs in a table rather than a card grid, or that a decision the user cannot undo deserves a side panel instead of a modal. Those are the calls an agent gets wrong most often, and they are the calls a token file cannot encode. Context tells your AI what exists. The rules tell it what good looks like.

One more thing to get out of the way early, because it is the most common wrong assumption: you do not need an existing design system. Most tools in this space begin by asking you to bring one. Aestheria ships a complete one as starter context, and every piece of it is yours to edit.

Four minutes, if you would rather watch it

The product film runs the same path this post takes: the drift, the layer, connecting an editor, the first generated screen, and the same screen across themes. It is the fastest way to see what the output actually looks like.

The Aestheria product film: what the layer is, how an agent reads it, and what the generated screens look like across six themes in light and dark.

Connect it in one line

The hosted server is free with an account. Paste this into Claude Code and it handles the rest, including sign-up, in the terminal:

claude mcp add --transport http aestheria https://mcp.aestheria.design/mcp

In an editor that reads a config file instead, the server URL is the same: https://mcp.aestheria.design/mcp. Cursor takes it in .cursor/mcp.json, Copilot in .vscode/mcp.json, Codex in ~/.codex/config.toml, and Windsurf in its own MCP config. Claude Code takes the command above as it stands.

Once connected, the agent has eleven tools: it can list and read components, list templates, list themes and tokens, read the setup guide and the onboarding checklist, read any of the six skills, and validate a snippet it just wrote against the system. Nothing is copied into your project, and nothing goes stale, because the agent queries the source rather than a snapshot of it.

Cursor, Claude Code, Codex, Copilot, Windsurf connect to mcp.aestheria.design.

mcp.aestheria.design serves tokens, components, rules, and the generated surface comes back as account page, team table, danger zone.

Ask for a real screen

Skip the toy request. A button proves nothing, because an agent gets a button right without help. Ask for something with structure, since structure is where an unguided agent improvises:

Build a settings page with an account section, a team table, and a danger zone. Use the Aestheria system.

Name the theme once and it carries. Ink is monochrome and quiet. Lapis is cool and developer-facing. Amber is warm and editorial. Sage is calm and open. Blossom is soft and friendly. Mist is airy and orderly. Each is a full bundle, not a palette: typography, radius, density, elevation, and its own chart style travel together.

Read the output for the tells

The point of the first screen is not the screen. It is learning to read generated UI for the specific ways it goes wrong, which is a skill worth having whether or not you keep using this.

Four things worth checking before you keep it:

• Are there hex values or rgba() in the CSS? There should be none. Every color resolves through a semantic token, which is what makes a theme swap work later.
• Does the table have an empty state and a loading state, or only the happy path? The forgotten states are the most reliable sign that a screen was improvised.
• Does the danger zone ask for confirmation before the irreversible action, and does the confirm name what it is about to destroy?
• Does the card header use the shared header composition, or a local wrapper that happens to look right at this width?

If something is off, say so in the same chat and ask the agent to check its work against the system. It has a tool for exactly that: validate_snippet returns the rules a snippet breaks, so the correction comes back as a named violation rather than another opinion.

Switch the theme and look again

Ask for the same screen in a different theme, or flip it to dark. This is the fastest review tool you have, and it costs one prompt.

A surface built on the layer survives the swap without a second pass, because every value resolves through a semantic token that the theme remaps. A surface with a hardcoded value announces itself immediately: one element stays the old color while everything around it moves. You do not need to read the CSS to find the problem, which is the point.

The same holds for density and mode. Compact, medium, and spacious scale every control-shaped element at once, and light and dark are a separate axis from the brand, so six themes are twelve surfaces before density is counted.

If you would rather own the files

The MCP is the fast path. The other path is the kit: the whole system as files in your repository, versioned with your code and edited by your team. Themes become your themes, the rules become your rules, and the docs render from your copy rather than ours.

Either way, leave the instruction where any agent will find it. A line in your AGENTS.md telling an agent to read the Aestheria system before building UI works in every editor that reads the format, and by agents.md’s own count that is over 60,000 open-source projects. The server carries the system. The file carries the instruction to use it.

The glossary has the surrounding vocabulary if any of the terms here are new.

What to do next

Connect the server, ask for one real screen, and switch the theme. That is ten minutes, and it answers the only question that matters, which is whether generated UI can look like your product instead of the average of every dashboard on the internet.

Read the docs

Questions

What is Aestheria?

Aestheria is a design context layer: the tokens, components, patterns, templates, and usage rules an AI coding agent reads while it generates UI. It ships as a hosted MCP server and as a kit of files you can keep in your own repository. The design system inside is starter context, meant to be edited.

Is the Aestheria MCP free?

Yes. The hosted MCP server is free with an account, and sign-up happens inline when you connect. A free account gets the MCP itself; the self-host kit and the premium documentation are separate.

Do I need an existing design system first?

No. Aestheria ships a complete design system as its starting context, including six themes, components, patterns, and templates. Teams that already have tokens usually point the agent at their own and keep Aestheria for the parts they have not defined, such as states, patterns, chart palettes, and the rules for composing them.

Do I have to install anything in my repository?

No. The MCP serves the system over the protocol, so nothing is copied into your project and there is nothing to undo if you stop. Self-host is the path when you want the files in your own repo, versioned and governed by your team.

Which editors and agents does it work with?

Any tool that speaks the Model Context Protocol, which includes Cursor, Claude Code, Codex, GitHub Copilot, and Windsurf. For tools that do not, the kit works as files plus an AGENTS.md instruction, with no server involved.

How do I tell whether generated UI is actually on-system?

Check for hardcoded colors, missing empty and loading states, and a confirmation step on irreversible actions. Then ask for the same screen in a different theme: a surface built on semantic tokens survives the swap untouched, and a hardcoded value announces itself immediately.