skills.rest
wuji-technology
wuji-technologyOFFICIAL
Explore all skills by this author →
Website𝕏@wuji_globalGitHub

design-handoff

Extract design tokens, component specs, and interaction annotations from Figma prototypes.

Updated Aug 23, 2026
Search Tags:#figma#design-tokens#component-specs#design-handoff#implementation-guidance#interaction-annotation
One-click install
npx skills add https://github.com/wuji-technology/pm-workflow-plugin --skill design-handoff-wuji-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/wuji-technology/pm-workflow-plugin/tree/main/skills/design-handoff
Command: npx skills add https://github.com/wuji-technology/pm-workflow-plugin --skill design-handoff-wuji-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes ambiguity between design and engineering by extracting precise design tokens, component specifications, interaction annotations, and implementation guidance from Figma prototypes and upstream review documents so teams can reliably implement UI features.

Core Features & Use Cases

  • Design Token Extraction: Read Figma variables or fallback to review docs and screenshots, and annotate each token with a precision grade (A/B/C/D).
  • Component Specifications: Generate per-component spec cards with variants, props, sizes, and state behaviors mapped to target frontend libraries.
  • Interaction & Animation Annotation: Produce page-level interaction tables, state machines, and animation parameters for developer implementation.
  • Implementation Guidance & Workflows: Detect target tech stack, map design components to framework libraries, provide downgrade strategies when Figma MCP is unavailable, and produce a finalized handoff document in portfolio/{product}/features/{feature}/.
  • MCP-aware Phases and Safeguards: Includes MCP environment checks, review-status gating, iteration detection, and explicit downgrade metadata to avoid delivering misleading precision.

Quick Start

Invoke the skill by describing the product and feature and include a Figma link if available, for example: /design-handoff [product] [feature] --figma https://figma.com/file/xxxxx

Frequently Asked Questions about design-handoff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from Figma for developer handoff?▼

To extract design tokens from Figma for developer handoff, the skill reads Figma variables via MCP or falls back to review docs and screenshots, annotating each token with a precision grade (A/B/C/D) to ensure implementation accuracy.

How do I generate component specs from Figma designs mapped to a frontend library?▼

Generating component specs from Figma designs produces per-component spec cards detailing variants, props, sizes, and state behaviors, explicitly mapped to your target frontend libraries to guide development implementation.

What is the best way to document interaction annotations for UI development?▼

Documenting interaction annotations for UI development is best achieved by producing page-level interaction tables, state machines, and animation parameters, providing developers with precise logic for implementing user flows.

Can I produce design handoff specs without direct Figma MCP access?▼

Yes, you can produce design handoff specs without Figma MCP access by utilizing documented downgrade strategies that fall back to processing review-*.md files and screenshots, explicitly adding metadata to avoid misleading precision.

How do I ensure my Figma design tokens match the actual frontend implementation?▼

Ensuring Figma design tokens match frontend implementation involves applying a token precision grading system (A/B/C/D) during extraction and detecting design iterations to align specs with the latest prototype.

Why do my design handoff documents lack implementation guidance for developers?▼

Design handoff documents lack implementation guidance when they fail to detect the target tech stack and map components to framework libraries; generating a finalized handoff document with explicit downgrade paths resolves this ambiguity.

Related Skills

Explore More Design & Creative Skills→
ilove323ilove323

design-handoff

Generate markdown-ready developer handoff specifications from Figma links or screenshots.

Community
Intermediate
diegosanchespereira1diegosanchespereira1

bmad-prd

Create, update, and validate product requirements documents for BMad-driven workflows.

Community
Advanced
cano721cano721

figma

Translate Figma designs into React and Tailwind UI components.

Community
Advanced
kmshihab7878kmshihab7878
6

design-inspector

Extract design tokens, component inventory, and interaction patterns from live websites via Playwright MCP browser automation.

Community
Advanced