CldKit
首頁瀏覽RECIPES提交CLIAI 策展助手登入
登入
CldKit
瀏覽Recipes提交CLI·關於隱私條款

為 AI 開發者建置。每個 components 都經過審查。

© 2026 CldKit

語言
首頁>Recipes>Design-to-Ship Pipeline

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

相關 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

全部安裝

npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
ls /workspace
ls /workspace

難度

intermediate

Components

4

創建時間

Mar 25, 2026

場景

code
devops