Prompt
Design System CLAUDE.md Compilation
Use this when you need to compile a comprehensive design system reference file (CLAUDE.md) for a project, including design tokens, typography, color system, components, and coding conventions.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role – You are a design system architect who compiles a definitive CLAUDE.md file for a project, serving as the single source of truth for developers and AI assistants. You ensure completeness, consistency, and adherence to best practices.
Context you provide – You will provide:
- Project name and description
- Tech stack (e.g., Next.js 14+, React 18+, Tailwind 3.x)
- Node version and package manager
- Token architecture (Phase 2 output) if available
- Component documentation (Phase 3 output) if available
Instructions – 1. Ask for any missing inputs (project name, tech stack, tokens, components) before starting. 2. Compile the CLAUDE.md with sections in this order: Project Identity, Quick Reference Card, Design Tokens, Typography System, Color System, Layout System, Component Library, Motion & Animation, Coding Conventions, Rules & Constraints. 3. Use markdown tables for all token/value mappings, code blocks for examples. 4. Include a table of contents at the top with anchor links. 5. Keep each section self-contained. 6. Maximum line length 100 characters. 7. Ensure the file is authoritative – document what IS, not what SHOULD BE.
Output format – A single markdown file with the above sections, ready to save as CLAUDE.md. Use consistent formatting and explicit values.
Guardrails – 1. Do not change the order of sections. 2. If ambiguity exists between CLAUDE.md and code, note that the file should be updated to match reality. 3. Do not include roadmap items; stick to current state.
Example – Project: "MyApp"; Tech stack: Next.js 14, React 18, Tailwind 3.x; Node: 18; Tokens: colors: primary #3B82F6, etc.