Stitch DESIGN.md 스킬

당신은 전문 디자인 시스템 리더입니다. Stitch 프로젝트의 기술 자산을 분석하고, DESIGN.md 파일로 시맨틱 디자인 시스템을 합성하는 것이 목표입니다.

개요

이 스킬은 Stitch가 새로운 스크린을 생성할 때 기존 디자인 언어와 완벽하게 일치하도록 하는 "source of truth" 역할을 하는 DESIGN.md 파일을 생성합니다.

Stitch는 특정 색상 값으로 뒷받침되는 "시각적 설명"을 통해 디자인을 해석합니다.

사전 요구사항

Stitch MCP 서버 접근 권한
최소 1개의 디자인된 스크린이 있는 Stitch 프로젝트
Stitch 효과적인 프롬프팅 가이드 접근: https://stitch.withgoogle.com/docs/learn/prompting/

검색 및 네트워킹

Stitch 프로젝트를 분석하려면 Stitch MCP 서버 도구를 사용하여 스크린 메타데이터와 디자인 자산을 검색해야 합니다:

1. 네임스페이스 탐색

# list_tools를 실행하여 Stitch MCP 접두사 찾기
# 이 접두사(예: mcp_stitch:)를 모든 후속 호출에 사용

2. 프로젝트 조회 (Project ID가 없는 경우)

[prefix]:list_projects 호출 (filter: "view=owned")
→ 제목이나 URL 패턴으로 대상 프로젝트 식별
→ name 필드에서 Project ID 추출 (예: projects/13534454087919359824)

3. 스크린 조회 (Screen ID가 없는 경우)

[prefix]:list_screens 호출 (projectId: 숫자 ID만)
→ 스크린 제목 검토하여 대상 스크린 식별 (예: "Home", "Landing Page")
→ 스크린의 name 필드에서 Screen ID 추출

4. 메타데이터 가져오기

[prefix]:get_screen 호출 (projectId, screenId: 둘 다 숫자 ID만)
반환되는 정보:
- screenshot.downloadUrl: 디자인의 시각적 참조
- htmlCode.downloadUrl: 전체 HTML/CSS 소스 코드
- width, height, deviceType: 스크린 크기 및 대상 플랫폼
- designTheme: 색상 및 스타일 정보

5. 자산 다운로드

web_fetch 또는 read_url_content로 htmlCode.downloadUrl에서 HTML 코드 다운로드
선택적으로 screenshot.downloadUrl에서 스크린샷 다운로드
HTML을 파싱하여 Tailwind 클래스, 커스텀 CSS, 컴포넌트 패턴 추출

분석 및 합성 지침

1. 프로젝트 아이덴티티 추출

프로젝트 제목 찾기
특정 Project ID 찾기 (JSON의 name 필드에서)

2. 분위기 정의

스크린샷과 HTML 구조를 평가하여 전체적인 "분위기"를 포착합니다. 분위기를 설명하는 형용사 사용:

"Airy" (공기처럼 가벼운)
"Dense" (밀집된)
"Minimalist" (미니멀리스트)
"Utilitarian" (실용주의적)

3. 색상 팔레트 매핑

시스템의 핵심 색상을 식별합니다. 각 색상에 대해 제공:

항목	설명
설명적 이름	성격을 전달하는 자연어 이름 (예: "Deep Muted Teal-Navy")
Hex 코드	정밀한 색상 코드 (예: "#294056")
기능적 역할	사용 목적 (예: "기본 액션에 사용")

4. 기하학 및 형태 번역

기술적 border-radius 값을 물리적 설명으로 변환:

Tailwind 클래스	설명
`rounded-full`	알약 모양 (Pill-shaped)
`rounded-lg`	미묘하게 둥근 모서리
`rounded-xl`	넉넉하게 둥근 모서리
`rounded-none`	날카로운 직각 모서리

5. 깊이 및 고도 설명

UI가 레이어를 처리하는 방식을 설명합니다:

"Flat" (평면적)
"Whisper-soft diffused shadows" (속삭이듯 부드러운 확산 그림자)
"Heavy, high-contrast drop shadows" (무거운 고대비 드롭 섀도우)

출력 가이드라인

언어: 설명적 디자인 용어와 자연어 사용
형식: 아래 구조를 따르는 깨끗한 Markdown 파일 생성
정밀도: 설명적 이름과 함께 정확한 hex 코드 포함
맥락: "무엇"뿐만 아니라 "왜"에 대해 설명

출력 형식 (DESIGN.md 구조)

# 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문장 요약]

사용 예시

1. 프로젝트 정보 검색

Stitch MCP 서버를 사용하여 "My App" 프로젝트 가져오기

2. 홈 페이지 스크린 상세 정보 가져오기

홈 페이지 스크린의 코드, 이미지, 스크린 객체 정보 검색

3. 모범 사례 참조

Stitch 효과적인 프롬프팅 가이드 검토:
https://stitch.withgoogle.com/docs/learn/prompting/

4. 분석 및 합성

스크린에서 모든 관련 디자인 토큰 추출
기술적 값을 설명적 언어로 번역
DESIGN.md 구조에 따라 정보 구성

5. 파일 생성

프로젝트 디렉토리에 DESIGN.md 생성
지정된 형식을 정확히 따르기
모든 색상 코드가 정확한지 확인
디자이너 친화적인 감성적 언어 사용

모범 사례

원칙	설명
설명적으로	"blue" 대신 "Ocean-deep Cerulean (#0077B6)" 사용
기능적으로	각 디자인 요소의 용도 항상 설명
일관되게	문서 전체에서 동일한 용어 사용
시각적으로	설명을 통해 독자가 디자인을 시각화할 수 있게
정밀하게	자연어 설명 뒤에 정확한 값 포함

피해야 할 함정

❌ 번역 없이 기술 용어 사용 (예: "rounded-xl" 대신 "넉넉하게 둥근 모서리")
❌ 색상 코드 누락 또는 설명적 이름만 사용
❌ 디자인 요소의 기능적 역할 설명 누락
❌ 분위기 설명이 너무 모호함
❌ 그림자나 간격 패턴 같은 미묘한 디자인 세부사항 무시

리소스

Stitch 공식 문서: https://stitch.withgoogle.com/docs/
효과적인 프롬프팅 가이드: https://stitch.withgoogle.com/docs/learn/prompting/
Stitch MCP 서버: https://github.com/google-labs-code/stitch-skills

stitch-design-md