Storybook 구성 생성 프롬프트

스크린샷 기반 요구를 넣으면 SCSS와 TSX로 Storybook 기본 스토리와 모듈형 폴더 구조를 만들도록 지시합니다. foundations, components, patterns 구조를 제시합니다.

분류	개발 › 코딩
태그	초안작성개발자코드

프롬프트 (영어 본문 · 답은 한국어로 옵니다)

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

어떤 프롬프트인가

디자인 시스템용 Storybook 초안을 구성할 때 쓰기 좋다. 버튼, 입력, 모달 등 기본 컴포넌트와 토큰 폴더 구조가 정해져 있지만 세부 구현 규칙은 짧다.

같은 분류의 프롬프트

단일파일 쇼핑몰 제작 프롬프트	2026-10-04
API 보안 테스트 프레임워크 프롬프트	2026-10-04
음성 복제 전문가 프롬프트	2026-10-04
2046 퍼즐 게임 제작 프롬프트
React 컴포넌트 통합 프롬프트

Storybook 구성 생성 프롬프트