우리 디자인 시스템 기반으로 바이브 코딩하기.

1. 01

   1시간

   AI가 이해하는 디자인 시스템과 작업 환경 준비

   Figma 디자인 시스템을 MCP가 읽기 좋은 구조로 정리하고, 바이브 코딩을 위한 작업 환경을 설정합니다.

   • Figma MCP 공식 도구와 외부 도구의 연결 방식 비교
   • 레이어 명명 규칙, 컴포넌트·베리언트, 디자인 토큰 정리
   • 디자인 토큰을 CSS 변수로 변환하고 HTML·CSS 기반 시스템 구성
   • 팀의 네이밍 규칙과 작업 원칙을 CLAUDE.md 초안으로 작성

   실습 결과물MCP 읽기 적합성을 점검한 Figma 파일 · 디자인 시스템 코드 · 팀 공용 CLAUDE.md 초안

2. 02

   1시간

   디자인 하네스와 Claude 에이전트 워크플로우 설계

   우리 팀의 디자인 규칙을 문서와 프롬프트로 정리하고, 에이전트와 스킬이 같은 기준으로 작업하도록 연결합니다.

   • 디자인 가이드를 Claude 시스템 프롬프트로 정리해 코드 스타일 유지
   • 중복·복잡한 베리언트를 진단하고 구조화
   • Design.md 작성과 에이전트·스킬·CLAUDE.md 조합 실습
   • 에이전트 병렬·순차 처리의 차이와 선택 기준, Loop·Goal 활용

   실습 결과물디자인 기준을 정리한 Markdown 문서 · 프로젝트별 에이전트 설정 템플릿

3. 03

   1시간

   컴포넌트를 조합해 페이지와 프로토타입 제작

   디자인 시스템을 활용해 실제 페이지를 만들고, 기획 문서에서 와이어프레임으로 이어지는 흐름을 실습합니다.

   • 컴포넌트와 디자인 토큰으로 모바일·태블릿·데스크톱 화면 구성
   • 기획 문서와 Google Slides·Figma Slides를 바탕으로 페이지 제작
   • HTML 기반 와이어프레임 생성
   • 컴포넌트·토큰을 확인할 수 있는 쇼케이스 페이지 제작

   실습 결과물디자인 시스템을 적용한 반응형 웹 페이지 · 기획 문서 기반 와이어프레임

4. 04

   1시간

   디자인과 코드 사이의 차이를 확인하는 QA

   Figma 원본과 구현 화면을 비교하고, 팀에서 반복해 사용할 디자인 QA 기준을 만듭니다.

   • Figma Dev Mode와 브라우저 DevTools로 원본·구현 결과 비교
   • MCP를 활용해 불일치 항목을 찾고 수정 가이드 작성
   • 바이브 코딩 도구의 토큰 사용량과 모델별 작업 방식 비교
   • 검토 결과를 리포트와 체크리스트로 정리

   실습 결과물디자인 QA 리포트 · 팀에 적용할 수 있는 QA 체크리스트

5. 05

   2시간

   코드로 만든 결과물을 Figma로 가져와 업데이트

   디자인 시스템 코드로 웹 페이지와 콘텐츠를 만들고, Figma 산출물로 연결하는 왕복 작업을 실습합니다.

   • 디자인 시스템 기반 웹 페이지, 프로모션 페이지, 배너 베리에이션 제작
   • 코드에 텍스트를 연결해 상세 페이지의 이미지·콘텐츠 변형
   • 완성한 결과물을 Figma 컴포넌트와 토큰 적용 산출물로 가져오기
   • GitHub 기본 흐름을 익히고 작업 결과 업데이트

   실습 결과물웹 페이지 베리에이션 · 상세 페이지와 배너 디자인 결과물

6. 06

   1시간

   Figma의 AI·셰이더·모션 기능으로 결과물 확장

   AI 에이전트와 Figma 기능을 활용해 디자인 시스템을 확장하고, 모션이 들어간 콘텐츠를 만들어봅니다.

   • AI 에이전트를 활용한 디자인 시스템 가이드·플러그인 작업
   • 셰이더 이펙트 적용 실습
   • Figma 모션과 에이전트로 간단한 애니메이션 제작

   실습 결과물모션을 적용한 SNS 콘텐츠 또는 상세 페이지 결과물

기본 과정은 7시간입니다. 팀의 디자인 시스템 준비 상태와 숙련도, 사용하는 도구·계정 환경에 맞춰 실습 범위를 함께 정합니다.