ux-collab은(는) 무엇을 하나요?
에이전트 브라우저, Figma MCP, Lucid를 활용하여 AI 기반 UI 협업을 구축하고, 와이어프레임을 디자인 시스템에 맞는 코드로 변환합니다.
개요
이 스킬은 AI 에이전트가 디자인 도구와 브라우저 환경을 직접 조작하여 UI 협업을 자동화할 수 있도록 합니다. Figma MCP(Model Context Protocol)를 통해 디자인 파일에서 컴포넌트와 스타일을 추출하고, 에이전트 브라우저를 사용하여 실시간으로 UI를 미리보며, Lucid를 활용하여 협업 다이어그램을 생성합니다.
주요 기능
- Figma MCP 통합: Figma 디자인 파일에서 레이어, 컴포넌트, 디자인 토큰을 읽어옵니다.
- 에이전트 브라우저: 브라우저에서 UI를 렌더링하고 상호작용하여 디자인을 검증합니다.
- Lucid 차트: 워크플로우와 아키텍처 다이어그램을 생성합니다.
- 코드 생성: 디자인 시스템(예: React 컴포넌트, Tailwind CSS)에 맞는 프론트엔드 코드를 자동 생성합니다.
사용 방법
- Figma 파일 URL 또는 디자인 토큰을 입력합니다.
- AI 에이전트가 Figma MCP를 통해 디자인을 추출합니다.
- 에이전트 브라우저가 UI를 렌더링하고 검증합니다.
- Lucid가 협업 다이어그램을 생성합니다.
- 최종 코드가 생성되어 출력됩니다.
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 에이전트 플랫폼
환경 변수
FIGMA_ACCESS_TOKEN: Figma API 액세스 토큰BROWSER_BASE_URL: 에이전트 브라우저의 기본 URLLUCID_API_KEY: Lucid API 키
예시
# Figma 파일에서 디자인 추출 및 코드 생성
export FIGMA_ACCESS_TOKEN="your_figma_token"
export BROWSER_BASE_URL="http://localhost:9222"
자세한 내용은 공식 문서를 참조하세요.