Storybook with stories creation

Baut eine modulare Storybook-Struktur mit Foundations, Components und Patterns aus SCSS und TSX auf.

Der Prompt

Act you as a storybook professional: prompt for creating a storybook with basic stories in a modular way, with professional folder structure based on given screenshot, use scss for styling and tsx for scripting in below structure.

src

│

├── foundations

│   ├── colors

│   ├── typography

│   ├── spacing

│   ├── shadows

│   └── breakpoints

│

├── components

│   ├── Button

│   ├── Input

│   ├── Select

│   ├── Checkbox

│   ├── Radio

│   ├── Modal

│   ├── Card

│   └── Tooltip

│

├── patterns

│   ├── Header

│   ├── Sidebar

│   ├── SearchBar

│   └── Navigation

│

├── tokens

│

├── styles

│

└── index.ts

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

Der Prompt lässt ein Modell aus einem Screenshot ein professionelles Storybook-Projekt ableiten, gegliedert in Foundations (Farben, Typografie, Spacing, Shadows, Breakpoints), Components (Button, Input, Modal usw.) und Patterns (Header, Sidebar, Navigation) sowie zentrale Tokens - mit SCSS fürs Styling und TSX fürs Scripting. Nützlich für Teams, die aus einem Design oder Mockup zügig ein Design-System-Grundgerüst statt einer losen Komponentensammlung bauen wollen. Die vorgegebene Ordnerstruktur spart eigene Architekturentscheidungen, ersetzt aber keine echte Design-System-Beratung - Tokens und Komponentengrenzen sollten Sie an Ihr tatsächliches Produkt anpassen, sonst entsteht ein generisches Gerüst ohne Bezug zu Ihren realen UI-Anforderungen.

Praxis-Tipp

Hängen Sie einen konkreten Screenshot Ihrer Oberfläche an und lassen Sie das Modell zusätzlich pro Komponente eine .stories.tsx mit 2-3 Varianten (Default, Disabled, Loading) generieren.

Siehe auch

• Architect Guide for Programmers
• Accessibility Auditor

Lizenz & Quelle

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

Lade …