stitch-loop

# Stitch Build Loop

당신은 반복적인 사이트 빌드 루프에 참여하는 **자율 프론트엔드 빌더**입니다. Stitch를 사용하여 페이지를 생성하고, 사이트에 통합하며, 다음 반복을 위한 지침을 준비하는 것이 목표입니다.

## 개요

Build Loop 패턴은 "바통" 시스템을 통해 지속적이고 자율적인 웹사이트 개발을 가능하게 합니다.

각 반복 과정:
1. 바통 파일(`next-prompt.md`)에서 현재 작업 읽기
2. Stitch MCP 도구를 사용하여 페이지 생성
3. 페이지를 사이트 구조에 통합
4. 다음 반복을 위해 바통 파일에 다음 작업 작성

## 사전 요구사항

**필수:**
- Stitch MCP 서버 접근 권한
- Stitch 프로젝트 (기존 또는 새로 생성)
- `DESIGN.md` 파일 (없으면 `stitch-design-md` 스킬로 생성)
- `SITE.md` 파일 (사이트 비전 및 로드맵 문서)

**선택:**
- Chrome DevTools MCP 서버 — 생성된 페이지의 시각적 검증 가능

## 바통 시스템

`next-prompt.md` 파일은 반복 간의 릴레이 바통 역할을 합니다:

```markdown
---
page: about
---

Jules.top 추적 방식을 설명하는 페이지입니다.

**디자인 시스템 (필수):**
[DESIGN.md 섹션 6에서 복사]

**페이지 구조:**
1. 네비게이션이 있는 헤더
2. 추적 방법론 설명
3. 링크가 있는 푸터
```

**중요 규칙:**
- YAML frontmatter의 `page` 필드가 출력 파일명 결정
- 프롬프트 내용에 `DESIGN.md`의 디자인 시스템 블록 포함 필수
- 작업 완료 전 이 파일을 업데이트하여 루프 지속

## 실행 프로토콜

### Step 1: 바통 읽기

`next-prompt.md`를 파싱하여 추출:
- `page` frontmatter 필드에서 **페이지 이름**
- markdown 본문에서 **프롬프트 내용**

### Step 2: 컨텍스트 파일 참조

생성 전에 다음 파일 읽기:

| 파일 | 목적 |
|------|------|
| `SITE.md` | 사이트 비전, **Stitch Project ID**, 기존 페이지(사이트맵), 로드맵 |
| `DESIGN.md` | Stitch 프롬프트에 필요한 시각적 스타일 |

**중요 확인사항:**
- 섹션 4 (사이트맵) — 이미 존재하는 페이지를 다시 만들지 마세요
- 섹션 5 (로드맵) — 백로그가 있으면 여기서 작업 선택
- 섹션 6 (크리에이티브 프리덤) — 로드맵이 비어있으면 새 페이지 아이디어

### Step 3: Stitch로 생성

Stitch MCP 도구를 사용하여 페이지 생성:

```bash
# 1. 네임스페이스 탐색
list_tools 실행하여 Stitch MCP 접두사 찾기

# 2. 프로젝트 가져오기 또는 생성
- stitch.json이 있으면 projectId 사용
- 없으면 [prefix]:create_project 호출 후 stitch.json에 ID 저장

# 3. 스크린 생성
[prefix]:generate_screen_from_text 호출:
- projectId: 프로젝트 ID
- prompt: 바통의 전체 프롬프트 (디자인 시스템 블록 포함)
- deviceType: DESKTOP (또는 지정된 대로)

# 4. 자산 검색
[prefix]:get_screen 호출하여:
- htmlCode.downloadUrl → queue/{page}.html로 다운로드 및 저장
- screenshot.downloadUrl → queue/{page}.png로 다운로드 및 저장
```

### Step 4: 사이트에 통합

1. 생성된 HTML을 `queue/{page}.html`에서 `site/public/{page}.html`로 이동
2. 자산 경로를 public 폴더 기준 상대 경로로 수정
3. 네비게이션 업데이트:
   - 기존 플레이스홀더 링크 (예: `href="#"`)를 새 페이지로 연결