목표: 반복 업무를 /슬래시 커맨드로 자동화 + Figma·STITCH 외부 도구 직접 연결
개념 설명
스킬 vs MCP — 한눈에 비교
| 구분 | 스킬 | MCP |
|---|---|---|
| 실체 | 프롬프트 재사용 (.md 파일) | 실제 외부 API 호출 |
| 인터넷 | 불필요 | 필요 |
| 예시 | /frontend-design, /review | Figma 파일 편집, STITCH UI 생성 |
| 설치 위치 | .claude/commands/ | settings.json mcpServers |
주요 스킬 2종
/frontend-design
- - 화면 요구사항 텍스트 → 완성도 높은 프론트엔드 코드 생성
- - HTML/CSS/React/Vue 등 타겟 프레임워크 지정 가능
- - 사용법:
/frontend-design 로그인 화면. 이메일+패스워드 입력, 소셜 로그인 버튼 포함. React + Tailwind.
/impeccable (UI 완성도 극대화)
- - 생성된 UI를 디자인 원칙 기준으로 반복 개선
- - 타이포그래피·색상 대비·여백·반응형·접근성 체크리스트 자동 적용
- -
/frontend-design결과물에 이어서 실행하면 효과 극대화 - - 사용법: 코드 선택 →
/impeccable
주요 MCP 2종
STITCH MCP
- - 자연어 설명 → UI 컴포넌트 생성 + 인터랙티브 미리보기
- - Claude가 STITCH에 직접 컴포넌트 생성 요청 가능
- - 설치:
settings.json에 mcpServers 항목 추가
Figma MCP
- - Figma 파일 읽기/쓰기/분석 직접 수행
- - 디자인 스펙(색상·폰트·여백·간격·컴포넌트) 자동 추출
- - 선택한 레이어 → React/CSS 코드 자동 생성
- - ⚠️ Figma API 키는 환경변수로 관리, 처음엔 읽기 전용으로 시작 권장
실전 워크플로우 (4도구 조합)
1. Figma MCP → 디자인 파일에서 스펙(색상·폰트·레이아웃) 추출
2. /frontend-design → 스펙 기반 컴포넌트 코드 생성
3. /impeccable → 타이포그래피·여백·반응형 자동 개선
4. STITCH MCP → 최종 결과물 인터랙티브 미리보기Figma 플러그인 개발
Claude가 Figma Plugin API 코드를 직접 생성한다.
플러그인 기본 구조
my-plugin/
├── manifest.json ← 플러그인 메타데이터
├── code.ts ← 메인 로직 (Figma API 호출)
└── ui.html ← 플러그인 UI 패널팀 맞춤 플러그인 아이디어
- - 스펙 자동 추출기: 선택 컴포넌트 → 디자인 토큰 JSON 출력 후 클립보드 복사
- - 네이밍 린터: 레이어명 컨벤션 자동 검사 + 위반 항목 하이라이트 + 일괄 수정
- - 번역 삽입기: 텍스트 레이어 내용 → i18n 키로 일괄 교체
개발 흐름
- 1. Claude에게 플러그인 기능 자연어로 설명
- 2.
manifest.json+code.ts+ui.html코드 생성 - 3. Figma Desktop → 플러그인 → 개발 → "로컬 플러그인 불러오기"로 즉시 테스트
- 4. 버그 발생 시 콘솔 오류 메시지를 Claude에게 전달 → 수정 코드 생성
실습
기초 — 4도구 파이프라인 체험
- 1. STITCH MCP 설치 및 연결 확인
- 2.
/frontend-design으로 버튼 컴포넌트 생성 (디자인 시스템 컬러 지정 포함) - 3.
/impeccable로 접근성 및 반응형 개선 - 4. STITCH MCP로 결과물 미리보기
고급 — 전체 파이프라인 + 플러그인 제작
- 1. Figma MCP 연결 → 팀 실제 디자인 파일에서 스펙 추출
- 2.
/frontend-design→/impeccable전체 파이프라인 실행 - 3. 팀에서 자주 쓰는 Figma 반복 작업 선택 → Claude로 플러그인 코드 생성 → 로컬 테스트
준비물
- - Figma 계정 + Figma Desktop 설치
- - STITCH 회원가입 + API 토큰 발급
- - Node.js 18+ (Figma 플러그인 개발용)