Claude나 OpenClaw를 Figma와 연동해 상세페이지를 작성하는 전문 워크플로우는 AI 에이전트의 자동화 기능을 활용해 수동 작업을 대폭 줄입니다. OpenClaw(로컬 AI 에이전트)는 Composio를 통해 MCP(Model Context Protocol)로 Figma를 제어하며, Claude(클라우드 AI)는 플러그인이나 코드-to-Figma 변환으로 상세페이지 레이아웃을 생성합니다. [wedesignx](https://www.wedesignx.com/knowledge/claude-code-to-figma) ## OpenClaw + Figma 연동 단계
OpenClaw는 24/7 자동화 에이전트로, Composio를 통해 Figma MCP 서버를 연결해 자연어 명령으로 상세페이지를 생성합니다. [composio](https://composio.dev/toolkits/figma/framework/openclaw) - Composio 대시보드(dashboard.composio.dev/composio/~/connect/clients/openclaw)에서 API 키 복사하고 OpenClaw 설정 프롬프트 실행.
- Figma 계정 인증 후 OpenClaw 인터페이스(터미널, Telegram 등)에서 명령: "제품 상세페이지 템플릿 생성: 헤더, 특징 섹션 5개, 이미지 슬라이더, 가격표, 리뷰 영역 포함."
- OpenClaw가 Figma 파일 생성/편집: 변수 관리, 디자인 토큰 추출, 자동 댓글 추가로 구조화. (예: Tailwind CSS 토큰 변환 지원)
- 결과 검토: Figma에서 이미지 교체, 텍스트 세밀 조정 후 프로토타입 테스트.
이 방법은 크로스앱 워크플로우(예: Slack 연동)로 확장 가능하며, 로컬 호스팅 사용자에게 적합합니다.
## Claude + Figma 연동 단계
Claude(또는 Claude Code)는 코드 생성 후 Figma로 변환하거나 MCP 플러그인을 통해 상세페이지를 빌드합니다. [youtube](https://www.youtube.com/watch?v=v4hfRaFZBbU) - Claude Desktop에서 claude_desktop_config.json 편집: Figma MCP 서버 URL 및 키 입력 (Cursor Talk To Figma 플러그인 값 사용).
- 프롬프트 입력: "쇼핑몰 상세페이지 HTML/CSS 코드 생성: 24개 섹션(헤더, 혜택, 스펙 테이블, A/B 테스트 변형 포함)."
- 코드 실행(로컬 호스트) 후 Claude Code to Figma 도구로 캡처: 브라우저 UI를 클립보드에 복사해 Figma에 붙여넣기 → 자동 프레임 변환.
- Figma 내 편집: 레이어 분리, 변형 복제(예: 색상/레이아웃 A/B), 팀 주석 추가 후 MCP로 코드 재생성 (roundtrip 워크플로우).
2주 걸리던 작업이 2-3시간으로 단축되며, 무료 플러그인/템플릿 활용 추천. [youtube](https://www.youtube.com/watch?v=v4hfRaFZBbU) ## 비교 테이블
| 측면 | OpenClaw | Claude |
|---------------|-----------------------------------|-------------------------------------|
| 강점 | 24/7 자동화, 로컬/멀티채널(Telegram), Composio 20k+ 툴 | 코드-to-디자인 변환, 클라우드 협업, MCP 플러그인 간단 |
| 설치 난이도 | 중간 (Composio 플러그인 설치) | 낮음 (config.json 편집) |
| 상세페이지 적합 | 자동 토큰/변수 관리, 크로스앱 | HTML 프로토타입 빠른 시각화 |
OpenClaw는 DevOps 환경(Linux/Docker 사용자)에서 강력하며, Claude는 빠른 프로토타이핑에 유리합니다. 프로젝트에 따라 OpenClaw로 시작해 Claude로 세밀화 추천. [gpters](https://www.gpters.org/dev/post/complete-comparison-claude-ecosystem-tlyYBwNlsRxNtpx) 
