1
너는 바이브 코딩을 돕는 숙련된 프론트엔드 개발 보조 인공지능이다.
2
내가 제공하는 '제품 요구사항 정의서(PRD) 양식'을 사용하여,
3
'React를 사용한 포트폴리오'를 개발하기 위한 완벽한 문서로 채워라.
4

5
[작성 규칙]
6
1. 동적 페이지 구현을 위한 데이터베이스 연동 방식을 명확히 포함할 것.
7
2. 코드를 한 번에 생성하지 않고, 단계별로 지시할 수 있게 작업 순서를 아주 잘게 나눌 것.
8
3. 아래 제공된 마크다운 양식의 목차를 훼손하지 않고 내용을 작성할 것.
9

10
[양식]
11
# 제품 요구사항 정의서(PRD) 양식
12

13
## 1. 서비스 개요
14
* **목적**: [어떤 문제를 해결하는 서비스인지 명확히 작성한다]
15
* **대상**: [실제 서비스를 사용할 대상을 구체적으로 작성한다]
16

17
## 2. 필수 기술 환경
18
* **화면 구성 기술**: [사용할 프레임워크를 작성한다. 예: 리액트, 아스트로]
19
* **디자인 및 화면 배치**: [적용할 디자인 방식을 작성한다. 예: 테일윈드 CSS]
20
* **데이터베이스**: [데이터 연동 방식을 작성한다. 예: 수파베이스]
21
... (이하 내용 작성) ...

1
# 제품 요구사항 정의서(PRD) 양식
2

3
## 1. 서비스 개요
4
* **목적**: [어떤 문제를 해결하는 서비스인지 명확히 작성한다]
5
* **대상**: [실제 서비스를 사용할 대상을 구체적으로 작성한다]
6

7
## 2. 필수 기술 환경
8
* **화면 구성 기술**: [사용할 프레임워크를 작성한다. 예: 리액트, 아스트로]
9
* **디자인 및 화면 배치**: [적용할 디자인 방식을 작성한다. 예: 테일윈드 CSS]
10
* **데이터베이스**: [데이터 연동 방식을 작성한다. 예: 수파베이스]
11

12
## 3. 핵심 화면 및 기능 명세
13
* **[화면 이름 1]**:
14
    * [기능 A]: 사용자가 특정 행동을 했을 때의 결과를 상세히 작성한다.
15
    * [기능 B]: 예외 상황(오류, 빈 화면)에 대한 처리 방식을 작성한다.
16
* **[화면 이름 2]**:
17
    * [기능 C]: 데이터가 어떻게 불러와지고 보여지는지 작성한다.
18

19
## 4. 인공지능 작업 지시 순서
20
* **1단계**: [가장 기초가 되는 화면 뼈대와 기본 구조를 먼저 작성하게 한다]
21
* **2단계**: [세부적인 디자인과 핵심 기능 1개를 완성하게 한다]
22
* **3단계**: [데이터를 연결하고 전체적인 동작을 확인하게 한다]
23

24
## 5. 절대 규칙 및 제한 사항
25
* **금지 사항**: [인공지능이 임의로 추가하거나 사용하면 안 되는 기술을 명시한다]
26
* **필수 규칙**: [반드시 지켜야 할 폴더 구조나 변수명 규칙을 명시한다]

1
너는 지금부터 수석 프론트엔드 개발자 역할을 수행한다.
2
아래 제공하는 '제품 요구사항 정의서(PRD)'를 꼼꼼히 읽고, 명시된 기술 환경과 규칙에 맞추어 응용 프로그램(앱) 개발을 시작해라.
3

4
[개발 진행 규칙]
5
1. 전체 코드를 한 번에 작성하지 마라.
6
2. 1단계로, 프로젝트의 기본 폴더 구조와 필수 설정 파일(예: package.json 등)의 코드만 먼저 생성하여 제시해라.
7
3. 내가 "다음 단계 진행"이라고 지시할 때만, PRD의 '인공지능 작업 지시 순서'에 따라 다음 화면이나 핵심 기능을 순차적으로 구현해라.
8
4. 코드 작성 시 PRD에 명시된 '필수 기술 환경'과 '절대 규칙 및 제한 사항'을 반드시 지켜라.
9
5. 모르는 부분이 있거나 문서에 누락된 내용이 있다면, 임의로 추측하여 코드를 짜지 말고 반드시 나에게 먼저 질문해라.
10

11
[제품 요구사항 정의서(PRD)]
12
(여기에 앞서 완성된 PRD 전체 내용을 복사하여 붙여넣는다)

1
### 1. 프로젝트 개요
2

3
  - **이름:** 포커스 타이머 (Focus Timer)
4
  - **설명:** 25분 집중, 5분 휴식을 반복할 수 있는 웹 기반 타이머
5
  - **타깃:** 시간 관리가 필요한 수험생 및 직장인
6

7
  ### 2. 기술 환경
8

9
  - **언어:** HTML, CSS, 바닐라 자바스크립트(Vanilla JS)
10
  - **디자인:** 별도 프레임워크 없이 CSS로 직접 구현 (다크 모드 지원)
11

12
  ### 3. 핵심 기능
13

14
  1. **타이머 시작:** '시작' 버튼을 누르면 25분 카운트다운이 시작된다.
15
  2. **휴식 모드:** 25분이 끝나면 알림음이 울리고, 5분 휴식 타이머로 자동 전환된다.
16
  3. **초기화:** '리셋' 버튼을 누르면 시간이 25:00으로 되돌아간다.
17
  4. **시각 효과:** 남은 시간에 따라 원형 그래프(Progress bar)가 줄어든다.
18

19
  ### 4. 화면 흐름
20

21
  1. 접속 시 중앙에 '25:00' 숫자와 '시작' 버튼이 보인다.
22
  2. 시작 버튼 클릭 시 숫자가 줄어든다.
23
  3. 시간 종료 시 화면 배경색이 붉은색에서 초록색(휴식)으로 변경된다.

1
Clone this site EXACTLY as shown: [URL]
2

3
IMPORTANT - TECH STACK:
4
- Use ONLY HTML, CSS, and JavaScript (NO React, Vue, or frameworks)
5
- CLIENT-SIDE ONLY (NO server, backend, or database)
6
- Pure vanilla JavaScript only
7

8
FONT REPLACEMENT:
9
- Replace existing fonts with Korean fonts as follows:
10
  - [기존폰트1] → [새폰트1]
11
  - [기존폰트2] → [새폰트2]
12
  - [기존폰트3] → [새폰트3]
13
- Load fonts from CDN: [폰트CDN링크1], [폰트CDN링크2], [폰트CDN링크3]
14
- Update all corresponding font-family declarations in CSS
15
- Keep font weights and styles intact

1
JAVASCRIPT LIBRARY:
2
- Use [gsap core,gsap scroll] instead of any existing libraries
3
- Load from CDN: [https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js],[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollToPlugin.min.js],[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js]
4

5
REQUIREMENTS:
6
- Make it pixel-perfect match to the original layout and design
7
- Make it responsive
8
- Include all animations and interactions
9
- Recreate every section exactly as it appears
10
- Frontend only - no backend implementation needed
11
- Only change fonts, keep all other styling
12

13
Build complete working website using HTML/CSS/JS ONLY.

1
Stop! Please rebuild this using ONLY HTML, CSS, and vanilla JavaScript.
2

3
DO NOT use React, JSX, or any frameworks.
4

5
Create these files instead:
6
- index.html (main HTML file)
7
- style.css (CSS styles)
8
- script.js (JavaScript functionality)
9

10
Use pure HTML/CSS/JS only. No React components.

1
Convert this to pure HTML/CSS/JavaScript.
2

3
Remove all React code and JSX.
4
Create standard HTML files only.
5
No frameworks allowed.

1
IMPORTANT: Use HTML/CSS/JS files ONLY. Do NOT create React app.
2

3
Clone this site...