Skip to main content
Prompts CLAUDE.md Design System Reference Compiler

model documentation template risk: low

CLAUDE.md Design System Reference Compiler

Compiles a definitive CLAUDE.md design system reference file for a Next.js/React/Tailwind project using provided token architecture, component documentation, and project metadata.…

PROMPT 

You are compiling the definitive CLAUDE.md design system reference file.
This file will live in the project root and serve as the single source of
truth for any AI assistant (or human developer) working on this codebase.

## Inputs
- **Token architecture:** [Phase 2 output]
- **Component documentation:** [Phase 3 output]
- **Project metadata:**
  - Project name: ${name}
  - Tech stack: [Next.js 14+ / React 18+ / Tailwind 3.x / etc.]
  - Node version: ${version}
  - Package manager: [npm / pnpm / yarn]

## CLAUDE.md Structure

Compile the final file with these sections IN THIS ORDER:

### 1. Project Identity
- Project name, description, positioning
- Tech stack summary (one table)
- Directory structure overview (src/ layout)

### 2. Quick Reference Card
A condensed cheat sheet — the most frequently needed info at a glance:
- Primary colors with hex values (max 6)
- Font stack
- Spacing scale (visual representation: 4, 8, 12, 16, 24, 32, 48, 64)
- Breakpoints
- Border radius values
- Shadow values
- Z-index map

### 3. Design Tokens — Full Reference
Organized by tier (Primitive → Semantic → Component).
Each token entry: name, value, CSS variable, Tailwind class equivalent.
Use tables for scannability.

### 4. Typography System
- Type scale table (name, size, weight, line-height, letter-spacing, usage)
- Responsive rules
- Font loading strategy

### 5. Color System
- Full palette with swatches description (name, hex, usage context)
- Semantic color mapping table
- Dark mode mapping (if applicable)
- Contrast ratio compliance notes

### 6. Layout System
- Grid specification
- Container widths
- Spacing system with visual scale
- Breakpoint behavior

### 7. Component Library
[Insert Phase 3 output for each component]

### 8. Motion & Animation
- Named presets table (name, duration, easing, usage)
- Rules: when to animate, when not to
- Performance constraints

### 9. Coding Conventions
- File naming patterns
- Import order
- Component file structure template
- CSS class ordering convention (if Tailwind)
- State management patterns used

### 10. Rules & Constraints
Hard rules that must never be broken:
- "Never use inline hex colors — always reference tokens"
- "All interactive elements must have visible focus states"
- "Minimum touch target: 44x44px"
- "All images must have alt text"
- "No z-index values outside the defined scale"
- [Add project-specific rules]

## Formatting Requirements
- Use markdown tables for all token/value mappings
- Use code blocks for all code examples
- Keep each section self-contained (readable without scrolling to other sections)
- Include a table of contents at the top with anchor links
- Maximum line length: 100 characters for readability
- Prefer explicit values over "see above" references

## Critical Rule
This file must be AUTHORITATIVE. If there's ambiguity between the
CLAUDE.md and the actual code, the CLAUDE.md should be updated to
match reality — never the other way around. This documents what IS,
not what SHOULD BE (that's a separate roadmap).

INPUTS

name REQUIRED

Project name

e.g. MyProject

version REQUIRED

Node version

e.g. 20.10.0

REQUIRED CONTEXT

  • Token architecture (Phase 2 output)
  • Component documentation (Phase 3 output)
  • Project metadata

OPTIONAL CONTEXT

  • Tech stack details
  • Package manager

ROLES & RULES

Role assignments

  • You are compiling the definitive CLAUDE.md design system reference file.
  1. Compile the final file with these sections IN THIS ORDER.
  2. Use markdown tables for all token/value mappings.
  3. Use code blocks for all code examples.
  4. Keep each section self-contained (readable without scrolling to other sections).
  5. Include a table of contents at the top with anchor links.
  6. Maximum line length: 100 characters for readability.
  7. Prefer explicit values over "see above" references.

EXPECTED OUTPUT

Format
markdown
Schema
markdown_sections · Project Identity, Quick Reference Card, Design Tokens — Full Reference, Typography System, Color System, Layout System, Component Library, Motion & Animation, Coding Conventions, Rules & Constraints
Constraints
  • Use markdown tables for all token/value mappings
  • Use code blocks for all code examples
  • Keep each section self-contained
  • Include a table of contents at the top with anchor links
  • Maximum line length: 100 characters
  • Sections in exact specified order
  • Prefer explicit values over cross-references

SUCCESS CRITERIA

  • Compile authoritative CLAUDE.md as single source of truth.
  • Follow exact section order and structure.
  • Incorporate token architecture, component docs, and project metadata.
  • Use tables, code blocks, and specified formatting.
  • Document existing reality without suggesting code changes.

FAILURE MODES

  • Deviating from specified section order.
  • Omitting table of contents or anchor links.
  • Using inline hex colors or non-token references.
  • Exceeding 100 character line length.
  • Inventing tokens or details not in inputs.
  • Making file prescriptive instead of descriptive.

CAVEATS

Dependencies
  • Phase 2 output (Token architecture)
  • Phase 3 output (Component documentation)
  • Project metadata (name, tech stack, Node version, package manager)
Missing context
  • Actual content for [Phase 2 output] (Token architecture).
  • Actual content for [Phase 3 output] (Component documentation).
  • Detailed project description and positioning.
  • Complete tech stack list beyond examples.
  • Specific Node version value for ${version}.
Ambiguities
  • Unclear exact content expected in '[Phase 2 output]' and '[Phase 3 output]' placeholders.
  • Section 10 '[Add project-specific rules]' is open-ended without criteria for what qualifies as project-specific.

QUALITY

OVERALL
0.90
CLARITY
0.95
SPECIFICITY
0.95
REUSABILITY
0.85
COMPLETENESS
0.90

IMPROVEMENT SUGGESTIONS

  • Replace placeholder inputs like [Phase 2 output] with instructions for dynamic insertion or require them as separate parameters.
  • Add example markdown tables for Quick Reference Card and Design Tokens to model expected output.
  • Specify criteria or source for generating 'Project Identity' description if not in metadata.
  • Include a template for Table of Contents with anchor links example.
  • Clarify handling of optional features like dark mode (e.g., 'Omit if not applicable').

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL