菜单
Facilitates the design-to-development handoff process. Extracts design specs from Figma, generates component documentation, exports assets, and creates implementation checklists. Ensures developers have all the information they need to build pixel-perfect implementations.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Helps design statistically rigorous A/B tests for marketing campaigns, landing pages, and product features. Calculates required sample sizes, defines success metrics, sets up test variants, and analyzes results with confidence intervals. Prevents common testing mistakes like peeking and underpowered tests.
Detects abandoned carts and triggers recovery workflows including email sequences, discount offers, and retargeting campaigns. Analyzes cart abandonment patterns to identify friction points in the checkout flow. Tracks recovery rate and revenue recaptured.
Automates the bank reconciliation process by matching transactions from bank feeds with accounting records in QuickBooks or Xero. Identifies unmatched transactions, suggests matches for review, and flags discrepancies. Reduces manual reconciliation time and improves financial accuracy.
Creates multi-channel marketing campaigns with automated workflows. Designs email sequences, social media schedules, and ad targeting rules. Tracks campaign performance across channels and optimizes based on engagement metrics and conversion data.
Creates intelligent chatbot workflows that handle common customer queries, collect information, and route complex issues to human agents. Designs conversation flows, configures response templates, and tracks chatbot performance metrics like resolution rate and handoff rate.
Performs cohort analysis to understand user retention, engagement, and revenue patterns over time. Groups users by signup date, acquisition channel, or plan type and tracks how their behavior changes week over week. Identifies which cohorts retain best and what drives long-term engagement.
| name | design-handoff |
| displayName | Design Handoff |
| tagline | Streamline design-to-development handoff with specs, assets, and component documentation. |
| description | Facilitates the design-to-development handoff process. Extracts design specs from Figma, generates component documentation, exports assets, and creates implementation checklists. Ensures developers have all the information they need to build pixel-perfect implementations. |
| department | ["Design","Engineering","Product"] |
| use_cases | ["Design Handoff","Component Documentation","Development Workflow"] |
| tools_required | ["Figma MCP","Slack MCP"] |
| agents_compatible | ["Claude / Claude Code","Cursor","Windsurf","ChatGPT","Any MCP-compatible agent"] |
| author | Webrix |
| verified | true |
| updatedAt | "2026-05-08T00:00:00.000Z" |
| version | 1.0.0 |
| exampleInput | Create a design handoff for the new pricing page redesign. Include component specs, spacing, and responsive breakpoints. |
| exampleOutput | Design Handoff — Pricing Page Redesign COMPONENTS 1. PricingCard Dimensions: 320x480px (desktop), 100% width (mobile) Border Radius: 16px Shadow: 0 4px 24px rgba(0,0,0,0.08) States: default, hover (+2px elevation), selected (green border) 2. PricingToggle Type: pill toggle (Monthly/Annual) Annual discount badge: "-20%" 3. FeatureList Row height: 48px Check icon: 20x20px, color: #10B981 SPACING Card gap: 24px (desktop), 16px (mobile) Section padding: 80px top, 64px bottom Container max-width: 1200px BREAKPOINTS Desktop: >1024px (3 columns) Tablet: 768-1024px (2 columns) Mobile: <768px (1 column, stacked) ASSETS EXPORTED: 12 icons, 3 illustrations |
Streamline design-to-development handoff with specs, assets, and component documentation.
Integrations: Figma, Slack
Pull component dimensions, colors, typography, and spacing from Figma.
Create component documentation with states and variants.
Export icons, illustrations, and other assets for development.
Generate an implementation checklist for the development team.
Deliver:
