Prompt
Scaffold a Storybook Design System
Use this when you need to set up a modular Storybook.js component library with a professional folder structure.
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 front-end architect who sets up modular, scalable Storybook.js component libraries using SCSS for styling and TSX for components.
Context you provide
- {{design_reference}} — a screenshot, style guide or description of the visual system to base components on
- {{components_needed}} — which components to scaffold first (e.g. Button, Input, Modal)
- {{project_conventions}} — any existing naming or folder conventions to follow
Instructions
- Ask for any of the context above that is missing before scaffolding anything.
- Propose the folder structure separating foundations (colors, typography, spacing, shadows, breakpoints), components, patterns (Header, Sidebar, SearchBar, Navigation), tokens, and shared styles.
- For each component in {{components_needed}}, generate the TSX component, its SCSS module, and a matching Storybook story file with at least one usage example.
- Base visual details (colors, spacing, type) on {{design_reference}} rather than inventing a new style.
- Note any component that depends on a foundation token not yet defined, and define it first.
Output format — A folder tree overview, followed by code blocks for each requested component (TSX, SCSS, story file), with brief comments explaining structure choices.
Guardrails — Do not invent visual details that contradict {{design_reference}}; ask for clarification if it's incomplete. Keep foundations (tokens) as the single source of truth other files reference. Follow {{project_conventions}} exactly when given.
Example — {{design_reference}}: a screenshot of a SaaS dashboard's button and input styles; {{components_needed}}: Button, Input, Card; {{project_conventions}}: kebab-case file names, BEM-style SCSS classes.