Menú
Stitch를 사용하여 자율적으로 멀티 페이지 웹사이트를 생성하는 반복 빌드 루프 패턴. "Stitch 루프", "웹사이트 생성", "멀티 페이지" 키워드에 활성화.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Nano Banana 2로 이미지 생성/편집. 블로그 이미지, 썸네일, 아이콘, 다이어그램 등. "이미지 생성", "그려줘", "만들어줘" 키워드에 활성화.
Master Python asyncio, concurrent programming, and async/await patterns for high-performance applications. Use when building async APIs, concurrent systems, or I/O-bound applications requiring non-blocking operations.
TypeScript 및 빌드 에러를 점진적으로 수정. "빌드 에러", "build error", "컴파일 에러" 키워드에 활성화.
변경사항 커밋, 푸시, PR 생성을 한 번에 수행. "커밋", "PR", "푸시" 키워드에 활성화.
컨텍스트 관리 가이드. Codex 세션에서의 효율적인 컨텍스트 관리 방법 안내. "컨텍스트", "세션 관리" 키워드에 활성화.
현재 프로젝트의 코드 변경사항을 분석하여 /docs/ 폴더에 문서를 자동 생성합니다. "문서화", "docs", "문서 생성" 키워드에 활성화.
| name | stitch-loop |
| description | Stitch를 사용하여 자율적으로 멀티 페이지 웹사이트를 생성하는 반복 빌드 루프 패턴. "Stitch 루프", "웹사이트 생성", "멀티 페이지" 키워드에 활성화. |
| allowed-tools | ["stitch*:*","mcp__stitch*","chrome*:*","Read","Write","Bash"] |
당신은 반복적인 사이트 빌드 루프에 참여하는 자율 프론트엔드 빌더입니다. Stitch를 사용하여 페이지를 생성하고, 사이트에 통합하며, 다음 반복을 위한 지침을 준비하는 것이 목표입니다.
Build Loop 패턴은 "바통" 시스템을 통해 지속적이고 자율적인 웹사이트 개발을 가능하게 합니다.
각 반복 과정:
next-prompt.md)에서 현재 작업 읽기필수:
DESIGN.md 파일 (없으면 stitch-design-md 스킬로 생성)SITE.md 파일 (사이트 비전 및 로드맵 문서)선택:
next-prompt.md 파일은 반복 간의 릴레이 바통 역할을 합니다:
---
page: about
---
Jules.top 추적 방식을 설명하는 페이지입니다.
**디자인 시스템 (필수):**
[DESIGN.md 섹션 6에서 복사]
**페이지 구조:**
1. 네비게이션이 있는 헤더
2. 추적 방법론 설명
3. 링크가 있는 푸터
중요 규칙:
page 필드가 출력 파일명 결정DESIGN.md의 디자인 시스템 블록 포함 필수next-prompt.md를 파싱하여 추출:
page frontmatter 필드에서 페이지 이름생성 전에 다음 파일 읽기:
| 파일 | 목적 |
|---|---|
SITE.md | 사이트 비전, Stitch Project ID, 기존 페이지(사이트맵), 로드맵 |
DESIGN.md | 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로 다운로드 및 저장
queue/{page}.html에서 site/public/{page}.html로 이동href="#")를 새 페이지로 연결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로 건너뛰세요.
SITE.md 수정:
[x]로 추가완료 전에 반드시 next-prompt.md를 업데이트해야 합니다. 이것이 루프를 유지합니다.
다음 페이지 결정:
SITE.md 섹션 5 (로드맵)에서 대기 항목 확인바통 작성 (적절한 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
루프는 다양한 오케스트레이션 레이어로 구동될 수 있습니다:
| 방법 | 작동 방식 |
|---|---|
| CI/CD | next-prompt.md 변경 시 GitHub Actions 트리거 |
| Human-in-loop | 개발자가 각 반복을 검토 후 계속 |
| Agent chains | 한 에이전트가 다른 에이전트에 디스패치 |
| Manual | 개발자가 동일한 레포에서 에이전트를 반복 실행 |
이 스킬은 오케스트레이션에 독립적입니다 — 트리거 메커니즘이 아닌 패턴에 집중하세요.
이 스킬은 stitch-design-md 스킬과 함께 사용하면 최상의 효과:
stitch-design-md 스킬로 DESIGN.md 생성| 문제 | 설명 |
|---|---|
❌ next-prompt.md 업데이트 누락 | 루프가 중단됨 |
| ❌ 사이트맵에 이미 있는 페이지 재생성 | 중복 페이지 발생 |
| ❌ 프롬프트에 디자인 시스템 블록 미포함 | 일관성 없는 스타일 |
❌ 플레이스홀더 링크(href="#") 방치 | 네비게이션 작동 안 함 |
❌ 새 프로젝트 생성 후 stitch.json 저장 누락 | 프로젝트 추적 불가 |
| 문제 | 해결책 |
|---|---|
| Stitch 생성 실패 | 프롬프트에 디자인 시스템 블록 포함 확인 |
| 일관성 없는 스타일 | DESIGN.md가 최신인지 확인하고 올바르게 복사 |
| 루프 중단 | next-prompt.md가 유효한 frontmatter로 업데이트되었는지 확인 |
| 네비게이션 깨짐 | 모든 내부 링크가 올바른 상대 경로 사용 확인 |
# [사이트 이름]
**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. 반복
# 다음 에이전트 세션에서 동일한 레포로 계속