The Taste Stack: Project Rules, Local Markdown, and Skills

Tool note: this guide uses Claude Code filenames in many examples because CLAUDE.md and SKILL.md are the most established names for this workflow. The pattern is not Claude-only. For Codex, use AGENTS.md and Codex skills. For Cursor, use project rules and reusable prompts. Keep the rules assistant-neutral whenever you can.

Why AI websites all look the same

Open five “AI-generated” landing pages. You will see:

• A hero with a gradient background and a centered headline
• Rounded-everything (16px border-radius on cards, buttons, inputs)
• Blue or purple as the accent color
• “Get Started” as the CTA
• A three-column feature grid with icon circles
• Smooth fade-in on scroll
• A testimonial carousel
• Inter or a system sans-serif

That is not bad design. It is default design. The AI chose the most statistically common answer for every decision you did not specify.

The problem is not the model. The problem is the gap between what you imagined and what you told the AI. Every gap gets filled with the average of the internet.

What “generic” actually means

Generic does not mean ugly. It means undifferentiated. The AI produced a website that could belong to any company, any brand, any product. There is nothing wrong with each individual choice. The issue is that no choice reflects yours.

Compare two prompts:

Prompt A: Create a landing page for a design system consultancy.

Prompt B: Create a landing page. Use Inter for body, GT Sectra for headlines. No gradients. No border-radius above 4px. Maximum 2 colors: #111111 and #F7F6F3. Hero is text-only, left-aligned, no illustration. Section spacing is 120px. Buttons are pill-shaped with 1px solid borders, no fill. Tone is direct, no exclamation marks.

Prompt B produces something with a point of view. Not because the AI is smarter. Because the rules left no room for defaults.

The taste stack makes Prompt B automatic. You write those rules once, and every generation in your project follows them.

The taste stack: three layers

Your visual standards live in three layers. Each layer has a different scope, a different job, and a different location on disk. Together they shape what AI generates.

Think of it like CSS specificity. CLAUDE.md is the base stylesheet. Local markdown is a scoped override. Skills are utility classes you apply on demand.

Layer 1: CLAUDE.md (global rules)

The CLAUDE.md file at the root of your project is loaded into every Claude Code conversation. It is the one file Claude always reads. Put your non-negotiable rules here.

What belongs in CLAUDE.md

Rules that apply to every file, every folder, every task in the project:

# CLAUDE.md

## Visual standards
- Maximum border-radius: 4px. Never use rounded-full on containers.
- Two colors only: #111111 (text, borders, buttons) and #F7F6F3 (backgrounds).
- No gradients. No shadows above 1px blur. No glow effects.
- Section spacing: 120px between major sections, 48px between subsections.
- Typography: GT Sectra for headlines (400 weight), Inter for body (regular).

## Motion
- No scroll-triggered animations. No parallax.
- Hover transitions: 150ms ease, opacity or translateY(-1px) only.
- Page transitions: none. Let the browser handle navigation.

## Copy tone
- First person singular. "I" not "We".
- No exclamation marks. No em dashes.
- Sentences under 20 words. One idea per sentence.
- Headlines are statements, not questions.

What does NOT belong in CLAUDE.md

• Rules that only apply to one section of the project (put those in local markdown)
• Long reference documents (link to them instead)
• Instructions for specific tasks (those are skills)

A CLAUDE.md that is 200 lines or longer is doing too much. Every extra line dilutes the signal. Be ruthless.

Layer 2: Local markdown (folder-scoped rules)

Many AI coding tools support some version of local, folder-scoped rules. In Claude Code, nested CLAUDE.md files are read alongside the root CLAUDE.md. In Codex or Cursor, use the closest equivalent local rule file or linked markdown doc. Local rules win when there is a conflict.

This is the key insight. Different parts of your project can have different taste.

When Claude works in website/src/, it reads:

1. your-project/CLAUDE.md (global)
2. your-project/website/CLAUDE.md (local override)

When Claude works in docs/guides/, it reads:

1. your-project/CLAUDE.md (global)
2. your-project/docs/CLAUDE.md (local override)

Each folder has its own taste. The website is bold and visual. The docs are quiet and typographic. The emails are compact and scannable. All share the same global standards.

Layer 3: Skills (reusable commands)

Skills are markdown files that teach Claude a specific workflow. You invoke them with a slash command. They are not automatically loaded. You choose when to use them.

Skills live in ~/.claude/skills/ (global, available in any project) or .claude/skills/ (project-specific).

The difference from CLAUDE.md: a skill is a verb, not a noun. CLAUDE.md says “these are my rules.” A skill says “do this specific task following these steps.”

A taste skill example

---
name: taste-check
description: Review generated UI against the project's visual standards.
  Use after generating any page, component, or layout.
---

Review the generated output against the visual standards in CLAUDE.md:

1. Check border-radius values. Flag anything above 4px.
2. Check colors. Flag any color not in the approved palette.
3. Check typography. Verify headline and body fonts match the spec.
4. Check spacing. Verify section gaps match the spec.
5. Check motion. Flag any scroll-triggered animation or parallax.
6. Check copy. Flag exclamation marks, em dashes, or "we" language.

For each violation, fix it and explain what you changed and why.

You type /taste-check after Claude generates something, and it audits the output against your rules.

How the three layers work together

The stack is additive. Each layer builds on the previous. And because everything is plain markdown, you can version it, share it, and iterate on it the same way you iterate on code.

How to encode visual standards

Visual standards belong in your CLAUDE.md (global) or your folder-level CLAUDE.md (scoped). Write them as rules, not suggestions. Be specific. Leave no room for defaults.

Colors

## Color palette
- Background: #F7F6F3 (warm off-white)
- Text: #111111 (near-black)
- Muted text: #787774
- Accent: #4466FF (used only for links and primary buttons)
- Danger: #D14343 (used only for destructive actions)
- No other colors. If a design calls for a color not listed here, ask first.

Typography

## Typography
- Headlines: GT Sectra, weight 400, tracking -0.02em
- Body: Inter, weight 400, 15.5px, line-height 1.8
- Mono: IBM Plex Mono, weight 400, 13px
- No bold headlines. Use size contrast, not weight contrast.
- Maximum 3 font sizes per page: headline, body, caption.

Layout

## Layout
- Max content width: 680px for prose, 1120px for grids
- Section spacing: 120px (desktop), 80px (mobile)
- Never center text blocks. Left-align everything except single-line CTAs.
- No card grids wider than 3 columns.

Surfaces

## Surfaces
- Card background: white (#FFFFFF)
- Card border: 1px solid #EAEAEA
- Card radius: 4px (never rounded-xl, never rounded-full)
- No shadows on cards. Borders only.
- No glassmorphism, no blur, no frosted effects.

The more specific you are, the less generic the output. Every rule you do not write is a decision you hand to the average of the internet.

How to encode motion standards

Motion is the most-ignored part of taste. But it is the fastest way to look generic. Default AI motion is: fade-in on scroll, bounce on hover, slide-in from bottom. Every AI site does this.

## Motion rules
- No scroll-triggered animations. Content is visible on load.
- Hover transitions: 150ms ease-out. Only opacity (0.7) or translateY(-1px).
- No scale transforms on hover. No rotate. No bounce.
- Page transitions: none. Let the browser handle it.
- Loading states: opacity pulse (0.5 to 1, 1.5s loop). No skeleton screens.
- Modals: appear instantly. No slide-up, no fade-in. Remove with opacity 150ms.

If you want more expressive motion for a specific section (a hero, a campaign page), put it in a local CLAUDE.md. Keep the global rules tight and let folder overrides handle the exceptions.

How to encode copy tone

Copy tone is the most underspecified part of most CLAUDE.md files. Designers think about typography and color. They forget that the words AI generates also need rules.

## Copy tone
- First person singular. "I built this" not "We built this".
- No exclamation marks. Excitement is expressed through content, not punctuation.
- No em dashes. Use periods, colons, or commas instead.
- Sentences under 20 words. One idea per sentence.
- Headlines are statements: "Design tokens that work." not "Ready to transform your tokens?"
- No buzzwords: "leverage", "unlock", "empower", "supercharge", "game-changer".
- CTAs are specific: "See the workflow" not "Get started". Name what happens.

How to build your own taste skill

A taste skill is a reusable audit you run after generation. Here is a full example you can copy.

Step 1: Create the skill folder

mkdir -p ~/.claude/skills/taste-audit

Step 2: Write the SKILL.md

---
name: taste-audit
description: Audit generated UI against the project's visual standards.
  Run this after Claude generates any page, section, or component.
---

## What to check

Read the project's CLAUDE.md (root and any local overrides in the
current directory). Then audit the most recently generated or edited
file against every rule.

## Audit checklist

### Colors
- [ ] Every color value exists in the approved palette
- [ ] No hardcoded hex that is not in the palette
- [ ] Accent color used only for approved purposes

### Typography
- [ ] Headline font matches spec
- [ ] Body font matches spec
- [ ] No more than 3 font sizes on the page
- [ ] No bold headlines (unless spec allows it)

### Layout
- [ ] Content width within spec limits
- [ ] Section spacing matches spec
- [ ] Text alignment matches spec (usually left)
- [ ] Grid columns within spec limits

### Surfaces
- [ ] Border-radius within spec limits
- [ ] No unauthorized shadows
- [ ] No unauthorized effects (glass, blur, glow)

### Motion
- [ ] No scroll-triggered animations (unless local override allows)
- [ ] Hover transitions match spec timing and properties
- [ ] No unauthorized transforms (scale, rotate, bounce)

### Copy
- [ ] Correct person (I/We)
- [ ] No exclamation marks
- [ ] No em dashes
- [ ] No buzzwords from the blocked list
- [ ] CTAs name the action specifically

## Output format

For each violation:
1. State the rule that was broken
2. Show the offending line
3. Fix it
4. Explain the fix in one sentence

If no violations are found, say "Clean. All rules pass."

Step 3: Use it

After Claude generates a landing page:

/taste-audit

The assistant reads the reusable workflow, reads your project rules, and audits the output against every checklist item. Violations get fixed inline when the tool has edit access.

Live example: a website folder with its own taste layer

Here is a real project structure. The root CLAUDE.md has global standards. The website/ folder has a local override that adds website-specific rules.

my-agency/
  CLAUDE.md                          # global: palette, fonts, tone
  .claude/
    skills/
      taste-audit/
        SKILL.md                     # /taste-audit command
      generate-page/
        SKILL.md                     # /generate-page command
  website/
    CLAUDE.md                        # local: hero layout, section rules
    src/
      pages/
        index.astro
        about.astro
      components/
        Hero.astro
        Footer.astro
  docs/
    CLAUDE.md                        # local: prose width, no images
    getting-started.md
  emails/
    CLAUDE.md                        # local: compact, single-column
    welcome.html

Root CLAUDE.md (global)

# Design Standards

## Colors
- Text: #111111
- Background: #F7F6F3
- Accent: #4466FF
- Muted: #787774

## Typography
- Headlines: GT Sectra, 400 weight
- Body: Inter, 15.5px, line-height 1.8
- Mono: IBM Plex Mono, 13px

## Rules
- No gradients. No shadows. No glow.
- Max border-radius: 4px.
- No scroll animations.
- Copy: first person, no exclamation marks, no em dashes.

website/CLAUDE.md (local override)

# Website-specific rules

Extends the root CLAUDE.md. These rules apply only inside /website.

## Hero
- Left-aligned, no centered text.
- No illustration or image in the hero. Text only.
- Headline is 56px on desktop, 36px on mobile.
- One line of subtext, max 120 characters.

## Sections
- Full-bleed background alternating: #F7F6F3 and #FFFFFF.
- 120px vertical padding between sections.
- No more than 3 sections on any page.

## Navigation
- Sticky header, 56px height.
- Logo left, 4 links right, no hamburger on desktop.
- Collapse to hamburger at 768px.

## Footer
- Two-column: left has logo + one sentence, right has link columns.
- Background: #111111, text: #F7F6F3.

When Claude generates a page inside website/src/pages/, it reads both files. The global rules set the palette, fonts, and tone. The local rules specify the layout, hero treatment, and navigation pattern.

The result is not a generic landing page. It is your landing page. With your palette, your type choices, your layout opinions, and your copy tone.

Recommended skills for the taste stack

These are the skills I use daily alongside the taste stack. They are all available in the ~/.claude/skills/ folder. Some come pre-installed with the superpowers package, others you create yourself.

You do not need all of these on day one. Start with /brainstorming (before generating) and /web-design-guidelines (after generating). Add the rest as your taste stack matures.

How the files connect

Summary

The taste stack is not a framework. It is three markdown files. You can set it up in 20 minutes and start seeing results immediately.

Generic AI output is a choice. If you do not specify your taste, AI will use the internet’s taste. The stack gives you a way to specify it once and have it apply everywhere.

Try it now: pick a style, copy the rules

These are 4 of the 20 styles from the Style Explorer. Click “Copy CLAUDE.md” to get a paste-ready block with visual standards, typography, motion, and copy tone.