Get Full Access 50% off

Blog 4 min read

The design skill that keeps AI-generated pages on-brand

Every Lexington theme ships a SKILL.md extracted from that theme's actual code: typography, color tokens, spacing rhythm, component conventions. Here is how I build them and why counting classes beats writing guidelines.

Ask an AI to “create a pricing page that matches the site” and you’ll usually get a competent, generic pricing page. Correct markup, sensible layout, and it looks like it wandered in from a different website.

That’s not a prompting problem. The AI can’t match a design system it can’t see. Design lives in a hundred small decisions spread across the codebase: which font weight headings use, how much space sits between sections, whether cards have borders or shadows, which grays are actually in use. No agent reconstructs all of that from a one-line prompt.

So every Lexington theme ships with a design skill: a SKILL.md file that captures those decisions in a form an agent can follow. It’s the file that makes “add a page” produce a page that belongs to the theme.

Extracted, not written

The important part: each design skill is extracted from that theme’s actual code, not written as aspirational guidelines.

There’s a real difference. A style guide written from memory says things like “use generous spacing.” A skill extracted from the code says which spacing utilities real sections actually use, because I counted. When the file claims the theme uses one shadow style, that’s not a preference, it’s what a search across the codebase returned.

Each skill covers:

  • Design personality. The theme’s visual character in a few rules an agent can follow, because “refined and quiet” means nothing to a language model but “no gradients, one accent color, generous whitespace” does.
  • Typography. The exact fonts, which text variants real pages use, and the weight and tracking conventions.
  • Color system. The theme’s tokens, how each scale is used, and, just as important, what is off-limits: no stock Tailwind palettes, no invented hues.
  • Layout and spacing. Section anatomy and the spacing rhythm real sections follow.
  • Components. The exact Button, Text, and Wrapper variants, with per-use decisions like button widths spelled out.
  • Corners, borders, shadows. The real policy, taken from counting the classes in the codebase.
  • A do/don’t list and a quality checklist the agent runs before finishing.

The “off-limits” section works harder than the rest

If I could keep only one part of each skill, it would be the constraints.

AI tools default to the most statistically common choice, which for styling means stock Tailwind colors and whatever spacing appears most on the internet. The single biggest visual tell of an AI-generated page is a blue-600 button on a site whose palette contains no blue.

The skill closes that door explicitly: use the theme’s tokens, never a raw palette color, never an invented hue. One line of constraint saves an entire review cycle.

How it gets used

In Cursor, the skill loads automatically when you ask for UI work; nothing to configure. Claude Code supports the same skill format. For other tools, it’s plain Markdown you can paste into custom instructions.

Then the prompts stay boring, which is the goal:

  • “Create a careers page that matches the rest of the site.”
  • “Add a testimonial section to the homepage.”
  • “Change the brand color.”

That last one is my favorite test. The agent reads the skill, finds the token file, and changes the color across the entire scale in one edit, because the skill told it where color decisions live. Without the skill, the same prompt produces a grep-and-replace across components that misses half the cases.

If you’re doing this for your own project

You don’t need my themes to use the idea. Two suggestions from building these for the entire catalog:

Extract, don’t aspire. Write down what the code does, not what you wish it did. If your codebase is inconsistent, pick the winner and note it; the skill becomes the tiebreaker for every future edit.

Constraints beat descriptions. “Our style is minimal” does nothing. “Never use a Tailwind palette color directly, only tokens from colors.css” changes the output every time.

The design skill is one of three context files in every theme, alongside AGENTS.md, the project brief, and a set of scoped Cursor rules. I wrote about the brief separately, and the rules post is next.

If you’d rather have the full method in one place, including the extraction passes for typography, color, spacing, and components, it’s chapter 2 of my guide: Making Your Codebase AI-Ready. It comes with a fill-in skill template and a complete annotated example from a shipping theme.

/Michael Andreuzza