I Gave Claude Stripe's DESIGN.md. The UI Stopped Looking Generic.

#ai #css #designsystems #opensource

AI coding agents generate generic UI when they do not know your brand: indigo gradients, lavender backgrounds, rounded cards, default checkmarks.

I made a controlled before/after: generic AI-style pricing page vs the same page rebuilt using a DESIGN.md extracted from stripe.com.

This is not a benchmark of Claude Code auto-loading the skill. It is a demo of what changes when the model has the extracted DESIGN.md as design context.

Without brand context

Generic Tailwind aesthetic. Indigo-to-violet hero, lavender background, soft purple "MOST POPULAR" pill. Fine. Shippable. Also indistinguishable from a hundred other AI-generated pricing pages.

With DESIGN.md context

The branded version uses Stripe-like color roles, type, spacing, radius, and CTA hierarchy from the extracted design context:

#533AFD for primary CTAs
#00D66F for success accents
#0D1738 for primary text
sohne-var as the primary font family
a 4px spacing grid
4px, 8px, and 16px radii
a dark featured-card pattern

I did not hand-pick these values from Stripe's site. They came from the generated DESIGN.md.

The command

npx brandmd https://stripe.com --agent

That writes:

DESIGN.md
.cursor/rules/brand.mdc
.claude/skills/brand-style/SKILL.md

DESIGN.md is the design system. The Cursor rule and Claude Code skill point the agent back to that file, so there is one source of truth instead of duplicated prompt text.

Here is the extracted Stripe example: github.com/yuvrajangadsingh/brandmd/blob/main/examples/stripe.md

Why this works

DESIGN.md was introduced by Google Stitch as a markdown format for design systems that LLMs can read. brandmd extracts one from a live website so you do not have to write it by hand.

It works with Claude Code, Cursor, Gemini CLI, Codex, Stitch, MCP servers, and anything that reads markdown context.