메뉴
Stitch 프로젝트를 분석하여 DESIGN.md 파일을 생성합니다. 디자인 시스템을 시맨틱하고 자연스러운 언어로 문서화하여 일관된 UI 생성을 지원합니다. "Stitch", "디자인 시스템", "DESIGN.md" 키워드에 활성화.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | stitch-design-md |
| description | Stitch 프로젝트를 분석하여 DESIGN.md 파일을 생성합니다. 디자인 시스템을 시맨틱하고 자연스러운 언어로 문서화하여 일관된 UI 생성을 지원합니다. "Stitch", "디자인 시스템", "DESIGN.md" 키워드에 활성화. |
| allowed-tools | ["stitch*:*","mcp__stitch*","Read","Write","mcp__tavily__tavily_extract"] |
당신은 전문 디자인 시스템 리더입니다. Stitch 프로젝트의 기술 자산을 분석하고, DESIGN.md 파일로 시맨틱 디자인 시스템을 합성하는 것이 목표입니다.
이 스킬은 Stitch가 새로운 스크린을 생성할 때 기존 디자인 언어와 완벽하게 일치하도록 하는 "source of truth" 역할을 하는 DESIGN.md 파일을 생성합니다.
Stitch는 특정 색상 값으로 뒷받침되는 "시각적 설명"을 통해 디자인을 해석합니다.
Stitch 프로젝트를 분석하려면 Stitch MCP 서버 도구를 사용하여 스크린 메타데이터와 디자인 자산을 검색해야 합니다:
# list_tools를 실행하여 Stitch MCP 접두사 찾기
# 이 접두사(예: mcp_stitch:)를 모든 후속 호출에 사용
[prefix]:list_projects 호출 (filter: "view=owned")
→ 제목이나 URL 패턴으로 대상 프로젝트 식별
→ name 필드에서 Project ID 추출 (예: projects/13534454087919359824)
[prefix]:list_screens 호출 (projectId: 숫자 ID만)
→ 스크린 제목 검토하여 대상 스크린 식별 (예: "Home", "Landing Page")
→ 스크린의 name 필드에서 Screen ID 추출
[prefix]:get_screen 호출 (projectId, screenId: 둘 다 숫자 ID만)
반환되는 정보:
- screenshot.downloadUrl: 디자인의 시각적 참조
- htmlCode.downloadUrl: 전체 HTML/CSS 소스 코드
- width, height, deviceType: 스크린 크기 및 대상 플랫폼
- designTheme: 색상 및 스타일 정보
web_fetch 또는 read_url_content로 htmlCode.downloadUrl에서 HTML 코드 다운로드
선택적으로 screenshot.downloadUrl에서 스크린샷 다운로드
HTML을 파싱하여 Tailwind 클래스, 커스텀 CSS, 컴포넌트 패턴 추출
name 필드에서)스크린샷과 HTML 구조를 평가하여 전체적인 "분위기"를 포착합니다. 분위기를 설명하는 형용사 사용:
시스템의 핵심 색상을 식별합니다. 각 색상에 대해 제공:
| 항목 | 설명 |
|---|---|
| 설명적 이름 | 성격을 전달하는 자연어 이름 (예: "Deep Muted Teal-Navy") |
| Hex 코드 | 정밀한 색상 코드 (예: "#294056") |
| 기능적 역할 | 사용 목적 (예: "기본 액션에 사용") |
기술적 border-radius 값을 물리적 설명으로 변환:
| Tailwind 클래스 | 설명 |
|---|---|
rounded-full | 알약 모양 (Pill-shaped) |
rounded-lg | 미묘하게 둥근 모서리 |
rounded-xl | 넉넉하게 둥근 모서리 |
rounded-none | 날카로운 직각 모서리 |
UI가 레이어를 처리하는 방식을 설명합니다:
# Design System: [프로젝트 제목]
**Project ID:** [프로젝트 ID]
## 1. 시각적 테마 및 분위기
(분위기, 밀도, 미학적 철학에 대한 설명)
## 2. 색상 팔레트 및 역할
| 이름 | Hex 코드 | 역할 |
|------|----------|------|
| Deep Ocean Blue | #0077B6 | 기본 액션 버튼 |
| Whisper Gray | #F5F5F5 | 배경 색상 |
| Midnight Text | #1A1A1A | 본문 텍스트 |
## 3. 타이포그래피 규칙
(폰트 패밀리, 헤더 vs 본문의 굵기 사용, 자간 특성에 대한 설명)
## 4. 컴포넌트 스타일링
### 버튼
- 형태: 알약 모양, 넉넉한 패딩
- 색상: 기본 - Deep Ocean Blue, 호버 시 밝아짐
- 동작: 미묘한 고도 상승 효과
### 카드/컨테이너
- 모서리: 부드럽게 둥근 (8px)
- 배경: 순백색
- 그림자: 속삭이듯 부드러운 확산 그림자
### 입력/폼
- 테두리: 1px Whisper Gray
- 배경: 순백색
- 포커스: Deep Ocean Blue 테두리
## 5. 레이아웃 원칙
(여백 전략, 마진, 그리드 정렬에 대한 설명)
## 6. Stitch 생성을 위한 디자인 시스템 노트
**[이 섹션을 stitch-loop 스킬의 프롬프트에 복사하세요]**
비주얼 스타일: [분위기 설명] 기본 색상: [이름] (#hex) - [역할] 보조 색상: [이름] (#hex) - [역할] 배경: [이름] (#hex) 텍스트: [이름] (#hex) 버튼 스타일: [형태, 색상, 동작] 카드 스타일: [모서리, 그림자] 전체적인 느낌: [2-3문장 요약]
Stitch MCP 서버를 사용하여 "My App" 프로젝트 가져오기
홈 페이지 스크린의 코드, 이미지, 스크린 객체 정보 검색
Stitch 효과적인 프롬프팅 가이드 검토:
https://stitch.withgoogle.com/docs/learn/prompting/
DESIGN.md 생성| 원칙 | 설명 |
|---|---|
| 설명적으로 | "blue" 대신 "Ocean-deep Cerulean (#0077B6)" 사용 |
| 기능적으로 | 각 디자인 요소의 용도 항상 설명 |
| 일관되게 | 문서 전체에서 동일한 용어 사용 |
| 시각적으로 | 설명을 통해 독자가 디자인을 시각화할 수 있게 |
| 정밀하게 | 자연어 설명 뒤에 정확한 값 포함 |
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", "문서 생성" 키워드에 활성화.