7단계 — AI 디자인 도구 (Stitch · v0 · Figma AI)

코드 도구 (Cursor·Claude Code) 만큼 디자인 도구 도 빠르게 자동화되고 있어요. 이 단계는 자연어로 UI 시안 을 만드는 도구들을 비교해, 어느 자리가 어떤 도구에 맞는지 정합니다.

세 가지 자리

자리	정의	대표
디자인 시안 (자연어 → mock)	자연어·이미지 → Figma 호환 디자인	Stitch, Figma AI
컴포넌트 (자연어 → React)	자연어 → shadcn / Tailwind UI 코드	v0.dev
풀스택 앱 (자연어 → 동작)	자연어 → 코드 + DB + 배포	Bolt.new · Lovable · Replit Agent

Stitch (Google Labs, 2025-05)

사이트 stitch.withgoogle.com
Gemini 2.5 Pro multimodal — 자연어 + 이미지 입력
출력: Figma 호환 (.fig) + HTML/CSS/Tailwind/React
강점: 다중 화면 동시 생성 + 5종 변형 + chat-to-edit
약점: 백엔드 미관여, Labs 단계, 무료 한도 빡빡
한국어 입력 가능 (단 일부 라벨은 영어 default)

상세 → Stitch 노트

v0.dev (Vercel)

사이트 v0.dev
shadcn/ui + Tailwind CSS 기반 React 컴포넌트
강점: 코드 즉시 사용 + Vercel 자동 배포
약점: 다중 화면 디자인 약함, 디자인 토큰 일관성

Figma AI / FigJam AI

기존 Figma 안에서 통합
자동 레이아웃 / variant 제안 / 컴포넌트 변환
강점: 기존 워크플로 위에 얹힘
약점: 처음부터 NL 생성은 약함

시나리오 → 도구

시나리오	권장
신규 서비스 와이어프레임	Stitch
디자인 시스템 토큰 초안	Stitch
React 단일 컴포넌트 빠르게	v0.dev
기존 Figma 파일 정교화	Figma AI
풀스택 앱 PoC	Lovable / Bolt.new
디자이너가 폴리시	Stitch → Figma 사람 단계

워크플로 예 — Stitch → Cursor

1. Stitch 에 자연어로 4 화면 생성
   "주문 관리 SaaS — 사이드바 / 대시보드 KPI / 주문 목록 / 주문 상세"
2. chat-to-edit
   "primary 색상을 emerald-500", "주문 목록에 상태 칩 5종"
3. .fig 또는 React + Tailwind export
4. Cursor / Claude Code 에 코드 붙여넣기
5. 백엔드 (FastAPI / Spring Boot) 연결, 데이터 모델·API 와 wiring
6. CMS / 인증 / 결제 등 *프로덕션 wiring* 은 사람이 작성

데이터 / 학습 정책

Stitch — Labs 단계, 무료 사용 시 입력이 학습에 사용 가능. 사내 와이어프레임 주의.
v0.dev — Vercel Pro 권장 (학습 사용 옵트아웃).
Figma AI — Figma enterprise 정책에 따라.

이 강좌의 자리

본 강좌 전 6단계는 코드 측 (Claude Code · MCP · Skills · workflow). 7단계는 디자인 측을 짧게 짚는 step. 더 깊게는:

직접 해 보기

Stitch 에서 자연어로 4 화면 생성 (각자 익숙한 도메인).
5종 변형 중 가장 마음에 드는 안 선택.
.fig export → Figma 정교화.
Tailwind + React export → Cursor 에 붙여넣고 props·state 연결.
결과 시안과 첫 자연어 입력 사이 간극 을 메모 — 다음 시도의 prompt 패턴 학습.

다음 단계

본 강좌의 마무리. 다음은 본 코스의 시리즈 인덱스 로 돌아가 6단계까지 학습 결과 (Skills/Subagents/MCP) 와 7단계 디자인 측을 워크플로 로 묶어 보세요. quality-and-testing 강좌에서 이어집니다.