07_vibecoding-prompts

1. 텍스트를 디자인으로 생성하기

1. 프롬프트를 디자인으로 변환

스티치

테일윈드 v4를 사용하여 '고플릭스'라는 이름의 인터넷 동영상 서비스 웹 화면을 제작한다. 주요 강조 색상은 노란색(yellow-500)을 사용한다. 전체 배경은 어두운 색으로 설정하여 영화에 집중할 수 있게 한다.
상단 영역에는 고플릭스 이름(노란색), 검색창, 사용자 단추를 배치한다. 중앙의 가장 큰 영역에는 주요 추천 영화의 큰 사진과 함께 노란색의 '재생' 단추를 눈에 띄게 배치한다. 그 아래에는 장르별 영화 목록을 여러 줄로 나열하며, 각 줄은 가로로 넘겨볼 수 있도록 만든다. 영화 사진 위에 마우스를 올리면 테두리가 노란색으로 강조되는 효과를 추가한다.
필수 조건: 테일윈드 v4를 사용 . 화면을 생성한 후 나에게 설명하는 모든 답변과 코드 주석, 화면 내의 모든 글자는 반드시 한국어로 출력한다.
글꼴은 https://cdn.jsdelivr.net/npm/pretendard-std@1.3.9/subset.min.js 를 사용한다

1. 생성된 디자인을 피그마로 복사한다.

2. 피그마 디자인으로 생성하기

1. 디자인을 json 으로 변환 참조페이지

다음 스택으로 React 앱을 만들어줘:

- 빌드 도구: Vite (최신 버전)
- React (최신 버전), JavaScript만 사용 — TypeScript 금지
- React-Compress 로 설치
- Tailwind CSS v4 (최신 버전) 스타일링
- 모든 의존성은 최신 버전으로 설치

프로젝트 설정 조건:
- `npm create vite@latest` 명령어로 react (JavaScript) 템플릿 사용
- Tailwind CSS v4는 `npm install tailwindcss @tailwindcss/vite` 로 설치
- vite.config.js에 @tailwindcss/vite 플러그인으로 Tailwind 설정
- CSS 파일에 `@import "tailwindcss"` 로 Tailwind 불러오기
- tailwind.config.js 사용 금지 (v4는 CSS 기반 설정 방식)
- TypeScript 파일 금지 (.ts, .tsx, tsconfig 모두 금지)

파일 구조:
- src/main.jsx
- src/App.jsx
- src/index.css (@import "tailwindcss" 포함)
- vite.config.js

만들어야 할 앱: 1-structure.json  파일을 참조

3. 리믹스

1. 스티치 디자인 리믹스하기