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

Design-to-Ship Pipeline

アーキテクチャ

期待される出力

関連 Recipes

Incident Response Command Center

Full-Stack Testing Suite

API Development Workflow