CLAUDE.md Assembly

Kompiliert aus Token-Architektur, Komponenten-Doku und Projekt-Metadaten eine vollständige CLAUDE.md als Design-System-Referenz.

Der 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).

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• Phase 2 output
• Phase 3 output
• name
• version
• npm / pnpm / yarn
• Insert Phase 3 output for each component
• Add project-specific rules

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser Prompt setzt keinen neuen Kontext auf, sondern fasst Ergebnisse aus vorgelagerten Phasen (Token-Architektur, Komponenten-Dokumentation) zu einer finalen CLAUDE.md zusammen, die im Projekt-Root als Single Source of Truth für KI-Assistenten und Entwickler dient. Er gibt eine feste Reihenfolge vor – Projektidentität, Tech-Stack, Verzeichnisstruktur, dann eine kompakte Quick-Reference-Card mit Farben, Schriften und Spacing. Sinnvoll für Teams, die bereits ein Design-System mit Tokens und Komponenten pflegen und daraus ein maschinenlesbares Nachschlagewerk bauen wollen, statt Design-Wissen verstreut in Figma, Slack und Köpfen zu halten. Ohne die vorgelagerten Phasen-Outputs als Input ist der Prompt allein nicht nutzbar.

Praxis-Tipp

Nutze ihn als letzten Schritt einer mehrstufigen Kette – erst Token-Architektur und Komponenten-Doku generieren lassen, dann deren Output hier einfügen.

Siehe auch

• Claude - Proje çalışma promptu

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …