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 파일은 반복 간의 릴레이 바통 역할을 합니다:

---
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 도구를 사용하여 페이지 생성:

# 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. 모든 페이지에서 일관된 헤더/푸터 보장