MCP 기반 자동화 파이프라인

[디자이너가 Figma 변경] │ ▼ [Figma Webhook (FILE_UPDATE)] │ ▼ [GitHub Actions Workflow] │ ▼ [AI Agent + Framelink MCP] - 변경된 노드 식별 - 코드 생성/수정 │ ▼ [자동 PR 생성] - 변경 diff - Storybook 시각 회귀 결과 - Code Connect 매핑 검증 │ ▼ [사람 리뷰 → 머지 → 배포]

curl -X POST <https://api.figma.com/v2/webhooks> \\ -H "X-Figma-Token: $FIGMA_TOKEN" \\ -d '{ "event_type": "FILE_UPDATE", "file_key": "abcXYZ", "endpoint": "<https://api.your-org.com/figma-webhook>", "passcode": "secret" }'

on: repository_dispatch: types: [figma-update] jobs: sync: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Run AI Agent with MCP run: | npx @anthropic/claude-code \\ --mcp-config .mcp/figma.json \\ --prompt "$(cat .ai/sync-prompt.md)" \\ --file-key ${{ github.event.client_payload.file_key }} env: ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }} FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }} - name: Create Pull Request uses: peter-evans/create-pull-request@v6 with: title: "🎨 Figma sync: ${{ github.event.client_payload.file_name }}" body: ${{ steps.ai.outputs.summary }} branch: figma-sync/${{ github.run_id }}

당신은 Figma → React 자동 동기화 에이전트입니다. 지침: 1. Figma file의 변경된 컴포넌트를 식별하세요 (mcp.get_figma_data) 2. 코드 측 src/components/ 의 대응 컴포넌트를 찾으세요 3. 변경 사항을 적용하되, 다음 규칙 준수: - 디자인 토큰만 사용 (hex 직접 입력 금지) - 기존 props 시그니처 유지 - Storybook 스토리도 함께 업데이트 4. 변경 요약을 PR description에 작성 5. 불확실한 변경은 코멘트로 표기 (`// AI: 검토 필요`)