DESIGN.md워크플로우는 Figma/Google Stitch 캔버스 또는 실코드 프로토타입에서 도출된 시각 토큰과 레이아웃 명세를 DESIGN.md 파일로 고정하고, AI 에이전트 오케스트레이션을 통해 디자인-코드 간 핸드오프 마찰과 일탈(Drift)을 완전히 제거하는 에이전틱 개발 프로세스다.
핵심 요지
단일 기준점(Source of Truth) 확립: 프로젝트 루트의 DESIGN.md 평문 마크다운 파일에 색상, 타이포그래피, 여백, 컴포넌트 규칙을 명세화하여 Stitch, Claude Code, Cursor, v0 등 상이한 AI 에이전트들이 일관된 UI를 유지하도록 강제한다.
이식성: 구글 오픈소스 규격을 준수하여 Stitch 외에도 Claude Code, Cursor, v0 등 타 클라이언트와 호환.
직관성: 복잡한 Figma 토큰/JSON 대비 인간과 AI 모두 쉽게 판독할 수 있는 마크다운 포맷.
버전 관리: Git을 통한 Pull Request, 코드 리뷰 및 변경 추적이 용이하여 엔지니어링 자산화가 가능.
번역 레이어의 혁신적 제거: 디자이너와 개발자 사이의 Figma 시안 핸드오프 과정에서 발생하는 소통 비용과 데이터 유실을 없앤다. Kony 연구에 따르면 디자이너-개발자 간 소통 오류로 프로젝트의 **50%**가 승인을 받지 못하고 실패/지연된다 출처. ONSIGHT Report에 따르면 전문가 **65%**가 제품 수명 주기 내에서 핸드오프를 가장 큰 마찰 지점으로 지목했다.
프로토타입 우선 디자인(Prototype-First Design): 디자이너가 HTML/CSS로 작동하는 프로토타입을 직접 작성해 GitHub에 공유하면, 상용화 시 AI 에이전트가 이를 컨텍스트로 읽어 100% 일치도의 프로덕션 코드로 빌드하는 ‘피그마 프리’ 모델이다. Gartner는 2026년 말까지 개발자의 **75%**가 코드를 직접 작성하는 대신 오케스트레이션(조율)하게 될 것이라 전망했다.
Claude Code가 실제 Figma 환경과 실시간 동기화하여 검증하기 위해서는 다음 스킬셋과 명령어를 정렬해 사용해야 한다.
MCP 연결 명령어: 터미널에서 claude mcp add figma를 실행하여 플러그인을 활성화한다.
플러그인 및 MCP 상태 검증: /plugin 명령어를 실행하여 Figma Plugin(Enabled)과 Figma MCP(Connected 및 Authenticated) 상태가 올바르게 잡혔는지 확인한다.
Figma 기본 스킬 활용:
figma-use: Figma 파일 내에서 레이아웃을 가져오거나 디자인을 수정할 때 사용하는 범용 스킬.
figma-generate-design: 에이전트에게 뼈대를 넘겨주고 디자인을 생성할 때 사용. 템플릿: [빌드할 내용 설명] figma.com/design/new?node-id-%
figma-use-figjam: FigJam 보드에서 스티커, 계획 보드, SWOT 다이어그램 등을 생성 및 편집. 예: /figma-use-figjam create a SWOT for OpenAI https://www.figma.com/board/new?node-id=%
figma-generate-diagram: 소스 코드 및 사양을 시퀀스/ER/상태/플로우차트 다이어그램으로 변환.
figma-use-slides: 다이어그램 등의 정보를 분석해 Figma Slides 덱으로 내보낼 때 사용. 예: /figma-use-slides turn this information into slides and post it here https://www.figma.com/slides/%link%
figma-code-connect: Figma 디자인 컴포넌트와 실제 프로덕션 코드 컴포넌트를 연결 (Dev Mode 지원).
커뮤니티 제작 스킬:
apply-design-system: Figma 시안과 빌드 구현 결과물 사이의 격차(Implementation Gap)를 최소화하기 위해 컴포넌트를 직접 연결함.
audit-design-system: 로컬 덮어쓰기나 연결 끊긴 토큰 등 디자인 시스템의 일탈(Style Drift) 현상을 감사함.
create-voice: 컴포넌트를 말로 설명하면 마크다운(DESIGN.md 등) 명세를 생성한 후, 이를 Figma 주석 프레임으로 자동 렌더링.
4. 적용 체크리스트 (흔히 범하기 쉬운 실수 방지)
전역 디자인 변경 규칙 준수: 다수 화면에 공통 적용할 속성은 캔버스가 아닌 DESIGN.md 파일 자체를 직접 열어 수정하는가?
살아있는 문서 취급: DESIGN.md를 일회성 내보내기용이 아닌, 모든 디자인 의사결정이 모여 흐르는 영구 소스로 취급하는가?
Figma 및 Stitch MCP 연동 필터링: 번거롭다는 이유로 MCP 설정을 생략하고 스크린샷에만 의존해 구조적 데이터를 유실하고 있지 않은가?
구체적인 프롬프트 지시: Claude Code에게 단순히 “보기 좋게 만들어달라”고 모호하게 요청하는 대신 DESIGN.md를 엄격하게 참조하라고 명시했는가?
정합성 유지: DESIGN.md 명세와 실제 구현 코드 간의 싱크가 어긋나지 않도록 정합성을 상시 맞추고 있는가?
모바일 실기기 교차 검증을 통한 세부 튜닝
모니터 화면에서는 보이지 않는 모바일 환경 고유의 마감 상태(예: iPhone SE 화면 우측 에지 여백 문제)를 검증하고, 에이전트에게 380px 이하 좁은 화면에서 가로 패딩을 8px 줄이도록 하는 등의 구체적인 디테일 교정 루프를 거친다. DESIGN.md 파일이 양측이 신뢰하는 명문화된 계약서 역할을 하므로 피드백 순환 주기가 단 30초 내로 수렴된다.
예시
1. Cadence 습관 추적 앱 실무 연동 (경로 A 사례)
Stitch 프롬프트: “차분하고 미니멀한 모바일 습관 추적 앱 Cadence를 디자인해줘. warm minimal 톤, faf7f2 오프화이트 배경, 1개의 세이지 악센트, soft serif 헤딩, no gradients, no confetti. Things 3 혹은 Linear의 미학과 가깝게 디자인해줘.”
Stitch 조율: 생성된 결과물에서 포인트 컬러를 클레이 색상(#B5715F)으로 바꾸고 빈 화면(Empty State)을 차분하게 격려하는 문구로 캔버스-문서 양방향 조율.
Read DESIGN.md at the project root. This is the source of truth for all visual decisions. Honor it strictly.Then, using the Stitch MCP, fetch the layout of the "Home" screen from my Cadence Stitch project and build it as a React Native component at app/screens/HomeScreen.tsx.Use Expo's StyleSheet API. Pull all design tokens from DESIGN.md into a shared theme file at app/theme.ts so they can be reused.Before writing code, show me the file structure and the theme.ts contents to review.
이 ‘코드 구현 전 계획 검토(Plan before code)’ 단계를 거쳐 theme.ts와 HomeScreen.tsx를 30초 피드백 루프 안에서 픽셀 단위로 완벽하게 빌드함 출처.
2. Hazelcast 2인 팀의 협업 모델 (경로 B 사례)
구조: 디자이너가 HTML/CSS로 완벽히 동작하는 마이크로 프로토타입을 빌드해 리포지토리에 푸시.
엔지니어링: 프론트엔드 개발자는 픽셀 단위를 재구현하는 낭비 없이, AI 에이전트가 프로토타입으로부터 안전하게 생성해낸 100% 시각 일치도의 컴포넌트를 넘겨받아 아키텍처 결합, 상태 관리 통합, 서버 사이드 렌더링 최적화 등 딥 엔지니어링에만 집중 출처.