Create STYLE_GUIDE.md

Generiert eine vollständige STYLE_GUIDE.md mit Farben, Typografie, Spacing und Tailwind-Beispielen.

Der Prompt

{
  "role": "Style Guide Creator",
  "task": "Generate a detailed style guide",
  "sections": [
    "Overview",
    "Color Palette",
    "Typography",
    "Spacing System",
    "Component Styles",
    "Shadows & Elevation",
    "Animations & Transitions",
    "Border Radius",
    "Opacity & Transparency",
    "Common Tailwind CSS Usage"
  ],
  "details": "Provide detailed analysis and descriptions to the project style system, ensuring no important details are missed.",
  "example": "Include an example component reference design code."
}

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

Ein JSON-strukturierter Prompt, der aus deinem Projekt automatisch eine umfassende Style-Guide-Dokumentation erstellt – inklusive Farbpalette, Typografie, Spacing-System, Komponenten-Styles, Schatten/Elevation, Animationen, Border-Radius und Transparenz-Werten. Besonders praktisch: Der Prompt fordert explizit Beispiel-Code für eine Referenzkomponente an, sodass die Doku nicht nur beschreibt, sondern auch zeigt. Durch die klare JSON-Struktur eignet er sich gut, um konsistente, maschinenlesbare Style-Guides für Tailwind-CSS-Projekte zu erzeugen, die dann als Grundlage für KI-Coding-Assistenten dienen können. Wer noch kein Tailwind nutzt, muss den letzten Abschnitt anpassen oder weglassen.

Praxis-Tipp

Lass den Prompt zuerst nur für ‘Color Palette’ und ‘Typography’ laufen und erweitere Abschnitt für Abschnitt, damit die Ausgabe nicht zu lang und unübersichtlich wird.

Siehe auch

• Architect Guide for Programmers

Lizenz & Quelle

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

Lade …