Google Stitch는 Google Labs에서 만든 AI 기반 UI 디자인 생성 도구입니다. 프롬프트 한 줄로 모바일/웹 앱 디자인을 생성하고, Stitch Agent Skills를 연결하면 그 디자인을 React 컴포넌트로 자동 변환까지 가능합니다. 2026년 1월 현재 베타 서비스로 무료 제공 중입니다.
“디자이너 없이 앱 만들기” 진짜 될까요?
여러분 이거 경험 있죠?
사이드 프로젝트 하나 시작하려는데, 디자인에서 막혀요. Figma 열어도 뭘 어디서 시작해야 할지 모르겠고. 그렇다고 디자이너 고용할 돈도 없고.
저도 그랬거든요.
근데 Google Stitch 써보고 생각이 바뀌었어요.
“와, 이게 된다고?” 진심으로 놀랐습니다.
🎨 Google Stitch가 뭐냐면요
일단 Stitch부터 설명할게요.
Stitch = AI가 UI 디자인 만들어주는 도구
stitch.withgoogle.com 가서 이렇게 입력하면:
"모던한 가구 쇼핑몰 메인 페이지, 다크 모드, 미니멀 스타일"
진짜로 그런 디자인이 나와요.
HTML/CSS/Tailwind 코드까지 함께.
Stitch가 하는 일
| 기능 | 설명 |
|---|---|
| 디자인 생성 | 프롬프트로 UI 디자인 생성 |
| HTML 출력 | Tailwind CSS 기반 HTML 코드 제공 |
| 스크린 관리 | 프로젝트별 여러 스크린 관리 |
| 디자인 테마 | 색상, 폰트, 라운딩 등 테마 설정 |
제가 직접 해본 것
저도 한번 해봤어요.
프롬프트: “서브4 마라톤 훈련 추적 앱, 깔끔한 다크 모드”
30초도 안 걸려서 이런 게 나왔어요:
- 오늘 훈련 현황 카드
- 최근 기록 리스트
- 주간 목표 진행률 그래프 레이아웃
솔직히 Figma에서 직접 만들려면 2시간은 걸렸을 거예요.
근데 Stitch로 30초.
문제는 여기서 끝이 아니었어요.
🔌 근데 Stitch만으론 부족해요
디자인 나왔어요. 좋아요.
근데 이걸 실제 React 프로젝트에 넣으려면?
- 컴포넌트 분리해야 하고
- 비즈니스 로직 훅으로 빼야 하고
- 목 데이터 분리해야 하고
- 스타일 가이드 맞춰야 하고
이 작업 수동으로 하면 또 2시간.
여기서 Agent Skills가 등장해요.
🛠 Stitch Agent Skills = Stitch + AI 에이전트
Google Labs에서 Stitch Agent Skills라는 걸 오픈소스로 풀었어요.
github.com/google-labs-code/stitch-skills
쉽게 말하면:
Stitch 디자인 → AI 에이전트가 분석 → React 컴포넌트 자동 생성
AI 에이전트(Claude Code, Cursor, Antigravity 등)한테 “역할”을 부여해서 자동화하는 거예요.
현재 제공되는 스킬 2가지
1. design-md 스킬
하는 일: Stitch 프로젝트 분석해서 DESIGN.md 생성
언제 쓰냐면:
- Stitch에서 디자인 만들었는데, 나중에 같은 스타일로 새 화면 추가하고 싶을 때
- AI한테 “이 프로젝트 스타일 맞춰서 만들어줘” 하려면 참조 문서가 필요하잖아요
# Design System: Furniture Collection **Project ID:** 13534454087919359824 ## 1. Visual Theme & Atmosphere Minimalist, airy aesthetic with generous whitespace... ## 2. Color Palette & Roles - Deep Muted Teal-Navy (#294056): Primary actions - Soft Warm Gray (#F5F5F5): Background surfaces ...
이런 식으로 디자인 시스템 문서를 자동으로 뽑아줘요.
→ 일관된 디자인 유지를 위한 “스타일 가이드 자동 생성기”
다음에 Stitch한테 “이 스타일로 새 화면 만들어줘” 할 때 이 문서 참조하면 일관성 유지됩니다.
2. react-components 스킬
하는 일: Stitch HTML을 React 컴포넌트로 변환
언제 쓰냐면:
- Stitch에서 뽑은 HTML이 한 덩어리잖아요
- 이걸 컴포넌트 분리 + 훅 분리 + 타입 정의까지 자동으로 해줌
이게 진짜 좋아요.
변환할 때 자동으로:
- 비즈니스 로직 →
src/hooks/로 분리 - 정적 데이터 →
src/data/mockData.ts로 분리 - TypeScript 인터페이스 자동 생성
- AST 기반 문법 검증
→ 실제 프로덕션 코드 구조로 변환해주는 스킬
제가 해본 경험:
Stitch에서 뽑은 “훈련 대시보드” HTML을 react-components 스킬로 변환했더니:
src/
├── components/
│ ├── TrainingCard.tsx
│ ├── WeeklyProgress.tsx
│ └── RecentRuns.tsx
├── hooks/
│ └── useTrainingData.ts
└── data/
└── mockData.ts
이렇게 구조화된 코드가 나왔어요.
수동으로 했으면 1시간, 스킬로 하니까 2분.
📊 두 스킬 비교 요약
| 구분 | design-md | react-components |
|---|---|---|
| 입력 | Stitch 프로젝트 | Stitch 스크린 HTML |
| 출력 | DESIGN.md 문서 | React 컴포넌트 폴더 구조 |
| 용도 | 새 디자인 만들 때 스타일 참조 | 실제 개발에 바로 사용 |
| 단계 | 디자인 분석 (Upstream) | 코드 생성 (Downstream) |
흐름으로 보면:
1️⃣ Stitch에서 디자인 생성 (필수!)
↓
2️⃣ design-md → DESIGN.md (스타일 가이드)
↓
3️⃣ react-components → React 프로젝트 코드
⚠️ 중요: Stitch 디자인이 없으면 스킬도 쓸 수 없어요! 스킬들이 Stitch MCP 서버를 통해 프로젝트 정보를 가져오는 구조라서요.
📦 설치하는 법 (진짜 간단)
# 사용 가능한 스킬 목록 확인 npx add-skill google-labs-code/stitch-skills --list # react-components 스킬 설치 npx add-skill google-labs-code/stitch-skills --skill react:components --global # design-md 스킬 설치 npx add-skill google-labs-code/stitch-skills --skill design-md --global
npx add-skill이 자동으로 설치된 코딩 에이전트 감지해서 적절한 폴더에 넣어줘요.
- Claude Code →
.claude/skills/ - Cursor → Cursor 스킬 폴더
- Antigravity →
.gemini/skills/
실제 워크플로우: 제가 써본 과정
Step 1: Stitch에서 디자인 생성
프롬프트: "서브4 마라톤 훈련 앱, 오늘 훈련 카드 + 주간 진행률, 다크 모드"
→ 30초 만에 디자인 나옴
Step 2: Stitch MCP 서버 연결
AI 에이전트에서 Stitch MCP 서버 연결하면 프로젝트 정보, 스크린 정보 다 가져올 수 있어요.
mcp_stitch:list_projects → 프로젝트 목록 mcp_stitch:get_screen → 스크린 상세 정보 + HTML 코드
Step 3: design-md 스킬 실행
AI 에이전트한테: “이 프로젝트 분석해서 DESIGN.md 만들어줘”
→ 디자인 시스템 문서 자동 생성
Step 4: react-components 스킬 실행
AI 에이전트한테: “이 스크린 React 컴포넌트로 변환해줘”
→ 구조화된 React 코드 자동 생성 → npm run validate로 문법 검증
결과
| 단계 | 수동 작업 | Stitch + Skills |
|---|---|---|
| 디자인 | 2시간 (Figma) | 30초 |
| 컴포넌트화 | 1시간 | 2분 |
| 문서화 | 30분 | 1분 |
| 합계 | 3시간 30분 | 3분 30초 |
60배 차이.
🧩 Agent Skills 구조 (직접 만들고 싶다면)
스킬 폴더 구조:
skills/[category]/ ├── SKILL.md — 역할 정의 (필수) ├── scripts/ — 검증 스크립트 ├── resources/ — 참조 자료 (체크리스트, 스타일 가이드) └── examples/ — 예시 코드 (Few-shot 학습용)
핵심은 SKILL.md예요.
--- name: react:components description: Stitch 디자인을 React 컴포넌트로 변환 allowed-tools: - "stitch*:*" - "Bash" - "Read" - "Write" --- # Stitch to React Components You are a frontend engineer focused on transforming designs into clean React code...
이렇게 역할 정의하고, examples/에 예시 넣어두면 AI가 일관된 품질로 결과물 내놓아요.
🚀 1인 개발자를 위한 워크플로우
혼자 개발하시는 분들, 사이드 프로젝트 하시는 분들한테 특히 좋아요.
왜냐면:
- 디자이너 없어도 됨
- PM 없어도 됨
- 그냥 아이디어만 있으면 됨
추천 워크플로우
💡 아이디어
↓
🎨 Stitch에서 디자인 생성 (30초)
"마라톤 훈련 앱, 오늘 운동 카드 + 주간 그래프, 다크 모드"
↓
📄 design-md 스킬로 스타일 가이드 생성 (1분)
→ DESIGN.md 자동 생성
→ 나중에 새 화면 추가할 때 일관성 유지
↓
⚛️ react-components 스킬로 코드 변환 (2분)
→ 컴포넌트 분리된 React 코드
→ 바로 프로젝트에 붙이기
↓
🔧 비즈니스 로직만 직접 작성
→ UI는 이미 끝남
→ 핵심 기능에만 집중
↓
🚀 배포
기존 방식 vs Stitch + Skills
| 단계 | 기존 (혼자 다 함) | Stitch + Skills |
|---|---|---|
| 아이디어 정리 | 30분 (노트) | 30분 |
| 디자인 | 2시간 (Figma 삽질) | 30초 |
| 코드 변환 | 1시간 (수동 컴포넌트화) | 2분 |
| 스타일 가이드 | 30분 (문서 작성) | 1분 |
| 합계 | 4시간 | 34분 |
7배 빨라짐. 진짜예요.
이런 분들한테 추천
✅ 사이드 프로젝트 하려는 직장인 개발자 ✅ 디자이너 없이 MVP 만들어야 하는 1인 스타트업 ✅ 해커톤에서 빠르게 프로토타입 뽑아야 하는 팀 ✅ 포트폴리오용 프로젝트 만드는 취준생
솔직한 후기: 뭐가 좋고 뭐가 아쉬운가
좋았던 점
✅ 속도: 디자인→코드 워크플로우가 진짜 빨라짐 ✅ 일관성: 스킬 덕분에 매번 비슷한 품질 유지 ✅ 구조화: 컴포넌트 분리, 훅 분리 자동으로 해줌 ✅ 문서화: DESIGN.md 자동 생성이 특히 좋음
아쉬운 점
⚠️ Stitch 베타: 아직 기능 제한 있음 (복잡한 인터랙션 X) ⚠️ MCP 연결 필요: Stitch MCP 서버 설정해야 스킬 사용 가능 ⚠️ 스킬 2개뿐: design-md, react-components만 있음 (Vue, Svelte 없음)
앞으로 기대되는 것
- Vue/Svelte 변환 스킬
- 더 복잡한 인터랙션 지원
- Figma → Stitch 연동
마무리: 저도 더 써볼 거예요
솔직히 처음엔 의심했어요.
“또 그런 AI 도구겠지” 했는데,
직접 써보니까 진짜 다르더라고요.
디자인 → 코드 변환이 이렇게 빨라질 줄 몰랐어요.
특히 사이드 프로젝트 하시는 분들, 디자이너 없이 혼자 개발하시는 분들한테 강추합니다.
핵심 정리:
| 항목 | 내용 |
|---|---|
| Stitch | Google의 AI UI 디자인 생성 도구 |
| Agent Skills | AI 에이전트에 역할 부여하는 오픈 스탠다드 |
| design-md | Stitch 프로젝트 → 디자인 시스템 문서 |
| react-components | Stitch HTML → React 컴포넌트 |
| 설치 | npx add-skill google-labs-code/stitch-skills --skill [name] --global |
| 호환 | Claude Code, Cursor, Antigravity |
궁금한 거 있으면 댓글 남겨주세요.
저도 더 써보면서 업데이트할게요.
참고 링크: