Design-to-Ship Pipeline

intermediate

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

Architecture

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

Expected Output

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

Related Recipes

Incident Response Command Center

ADVANCED

Triage production incidents from alerts to fixes with observability, chat, and repo context.

devopsworkflow

5 components

Full-Stack Testing Suite

INTERMEDIATE

Complete testing pipeline with unit tests, E2E browser tests, and TDD workflow.

codetesting

3 components

API Development Workflow

INTERMEDIATE

Complete API lifecycle from design to testing with GraphQL support.

codeapi

3 components