Design-to-Ship Pipeline

intermediate

End-to-end workflow from Figma designs to deployed, tested code with CI/CD.

아키텍처

Figma Context MCP

Extracts design tokens, component specs, and layout data from Figma files

87/100

npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

Figma Context MCP

Extracts design tokens, component specs, and layout data from Figma files

88/100

npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Playwright Testing Skill

Generates visual regression and E2E tests for design fidelity

86/100

ls /workspace

CI/CD Pipeline Generator Skill

Automates build, test, and deployment pipeline

78/100

ls /workspace

예상 출력

Design-to-Ship Pipeline Figma: 12 components extracted, 24 tokens synced Components: 12 generated, 12 passing lint Playwright: 18 E2E tests passed CI/CD: Build succeeded, deployed to staging -> Preview URL ready for design review

Design-to-Ship Pipeline

아키텍처

예상 출력

관련 Recipes

Incident Response Command Center

Full-Stack Testing Suite

API Development Workflow