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 스킬로 먼저 생성 — 실행 순서: stitch-design-md → 이 스킬)
• SITE.md 파일 (사이트 비전 및 로드맵 문서)

선택:

• Chrome DevTools MCP 서버 — 생성된 페이지의 시각적 검증 가능

바통 시스템

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

---
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: 컨텍스트 파일 참조

생성 전에 다음 파일 읽기:

중요 확인사항:

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

Step 3: Stitch로 생성

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

# 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="#")를 새 페이지로 연결
   • 적절한 경우 전역 네비게이션에 새 페이지 추가
4. 모든 페이지에서 일관된 헤더/푸터 보장

Step 4.5: 시각적 검증 (선택)

Chrome DevTools MCP 서버가 사용 가능한 경우:

# 1. 가용성 확인
list_tools로 chrome* 도구 존재 확인

# 2. 개발 서버 시작
Bash로 로컬 서버 시작 (예: npx serve site/public)

# 3. 페이지 이동
[chrome_prefix]:navigate로 http://localhost:3000/{page}.html 열기

# 4. 스크린샷 캡처
[chrome_prefix]:screenshot으로 렌더링된 페이지 캡처

# 5. 시각적 비교
Stitch 스크린샷(queue/{page}.png)과 비교하여 충실도 확인

# 6. 서버 중지
개발 서버 프로세스 종료

참고: Chrome DevTools MCP가 설치되지 않은 경우 Step 5로 건너뛰세요.

Step 5: 사이트 문서 업데이트

SITE.md 수정:

• 섹션 4 (사이트맵)에 새 페이지를 [x]로 추가
• 섹션 6 (크리에이티브 프리덤)에서 사용한 아이디어 제거
• 백로그 항목 완료 시 섹션 5 (로드맵) 업데이트

Step 6: 다음 바통 준비 (중요!)

완료 전에 반드시 next-prompt.md를 업데이트해야 합니다. 이것이 루프를 유지합니다.

1. 다음 페이지 결정:

   • SITE.md 섹션 5 (로드맵)에서 대기 항목 확인
   • 비어있으면 섹션 6 (크리에이티브 프리덤)에서 선택
   • 또는 사이트 비전에 맞는 새로운 것 창작

2. 바통 작성 (적절한 YAML frontmatter 포함):

---
page: achievements
---

개발자 배지와 마일스톤을 보여주는 경쟁적 성취 페이지입니다.

**디자인 시스템 (필수):**
[DESIGN.md에서 전체 디자인 시스템 블록 복사]

**페이지 구조:**
1. 제목과 네비게이션이 있는 헤더
2. 잠금 해제/잠금 상태를 보여주는 배지 그리드
3. 마일스톤 추적을 위한 진행 바

파일 구조 참조

project/
├── next-prompt.md          # 바통 — 현재 작업
├── stitch.json             # Stitch 프로젝트 ID (유지 필수!)
├── DESIGN.md               # 시각적 디자인 시스템 (design-md 스킬에서)
├── SITE.md                 # 사이트 비전, 사이트맵, 로드맵
├── queue/                  # Stitch 출력 스테이징 영역
│   ├── {page}.html
│   └── {page}.png
└── site/public/            # 프로덕션 페이지
    ├── index.html
    └── {page}.html

오케스트레이션 옵션

루프는 다양한 오케스트레이션 레이어로 구동될 수 있습니다:

이 스킬은 오케스트레이션에 독립적입니다 — 트리거 메커니즘이 아닌 패턴에 집중하세요.

디자인 시스템 통합

이 스킬은 stitch-design-md 스킬과 함께 사용하면 최상의 효과:

1. 최초 설정: 기존 Stitch 스크린에서 stitch-design-md 스킬로 DESIGN.md 생성
2. 매 반복: 섹션 6 ("Stitch 생성을 위한 디자인 시스템 노트")을 바통 프롬프트에 복사
3. 일관성: 생성된 모든 페이지가 동일한 시각적 언어 공유

일반적인 함정

문제 해결

SITE.md 템플릿

# [사이트 이름]

**Stitch Project ID:** [프로젝트 ID]

## 1. 비전

[사이트의 목적과 목표 사용자에 대한 설명]

## 2. 기술 스택

- Stitch 생성 HTML
- Tailwind CSS
- 정적 호스팅

## 3. 디자인 참조

DESIGN.md 참조

## 4. 사이트맵 (완료된 페이지)

- [x] index.html - 랜딩 페이지
- [x] about.html - 소개 페이지
- [ ] contact.html - 연락처 페이지

## 5. 로드맵 (다음 작업)

1. 연락처 페이지 생성
2. 블로그 목록 페이지
3. 개별 블로그 포스트 템플릿

## 6. 크리에이티브 프리덤 (아이디어)

- FAQ 페이지
- 팀 소개 페이지
- 포트폴리오 갤러리

워크플로우 예시

# 1. 초기 설정
stitch-design-md 스킬로 DESIGN.md 생성
SITE.md 작성

# 2. 첫 번째 바통 작성
echo '---
page: index
---
메인 랜딩 페이지...
**디자인 시스템:** ...' > next-prompt.md

# 3. 루프 실행
# 에이전트가 자동으로:
# - next-prompt.md 읽기
# - Stitch로 페이지 생성
# - site/public/에 통합
# - SITE.md 업데이트
# - next-prompt.md 업데이트 (다음 작업)

# 4. 반복
# 다음 에이전트 세션에서 동일한 레포로 계속

리소스

• Stitch 공식 문서: https://stitch.withgoogle.com/docs/
• Stitch MCP 설정: https://stitch.withgoogle.com/docs/mcp/setup
• stitch-skills 레포: https://github.com/google-labs-code/stitch-skills