Tutorials

Point your agent at a design system in ten minutes.

Ten minutes, one MCP server, and a first screen that belongs to your product. No repo changes, and nothing to undo if you stop halfway.

You need an editor that speaks MCP (Cursor, Claude Code, Codex, and Windsurf all do) and a project to build in. Everything below works on the free tier.

1. Connect the server

Paste this into your agent and let it handle the install. Sign-up happens inline, and nothing is written to your repository.

Set up the Aestheria MCP: https://mcp.aestheria.design/mcp

One server, whichever editor you happen to be in. The agent reads tokens, components, and the rules for using them at generation time, so the screen it hands back is composed from the system instead of approximated from a description.

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

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

2. Pick the theme you are building in

Ink is monochrome and quiet. Lapis is cool and developer-facing. Amber is warm and editorial. Tell the agent which one, once: it carries through every surface it generates after that.

3. Ask for a real screen

Skip the toy request. Ask for something with structure, because 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.

4. Read the output for the tells

Three things worth checking before you keep it:

• Are there hex values in the CSS? There should be none. Every color resolves through a semantic token.
• Does the table have an empty state and a loading state, or only the happy path?
• Does the card header use the shared header composition, or a local wrapper that only looks right at this width?

5. Switch the theme and look again

Ask for the same screen in another theme, or flip the mode to dark. A surface built on the layer survives the swap without a second pass. A surface with a hardcoded value announces itself immediately, which makes theme switching the fastest review tool you have.

6. Keep the context with the project

If your team works across editors, add a line to your AGENTS.md telling any agent to read the Aestheria MCP before building UI. The server carries the system; the file carries the instruction to use it.

Questions

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. Self-host is the path when you want the files in your own repo, versioned and governed by your team.

What if my product already has its own tokens?

Point the agent at yours and keep Aestheria for the parts you have not defined: states, patterns, chart palettes, and the rules for composing them. The layer is starter context, not a replacement for decisions you have already made.

Does this work in an editor that does not speak MCP?

Yes, through the kit. Drop the files in your project root and any tool that reads AGENTS.md will find the system without a server.