What is the design-handoff skill?
The design-handoff skill is a slash command skill in Anthropic's knowledge-work-plugins repository. Give it a Figma URL, a screenshot or a description and it produces a handoff spec for engineers: measurements, design tokens, component props, interaction states, responsive breakpoints, edge cases, animation timing and accessibility notes.
The skill runs as /design-handoff and takes a Figma URL or a design description as its argument. If you pass a Figma URL it pulls the design from Figma. Otherwise it works from the description or screenshot you give it.
It sits in the design folder of knowledge-work-plugins, a repository of file based plugins for knowledge workers. The skill is a single markdown file, with no scripts, that fixes the shape of the spec a developer receives.
What the spec contains
- Visual specifications: exact measurements, token references, responsive breakpoints, component variants and states.
- Interaction specifications: click or tap behavior, hover states, transitions with duration and easing, gestures.
- Content specifications: character limits, truncation, empty, loading and error states.
- Edge cases: minimum and maximum content, longer international text, slow connections, missing data.
- Accessibility: focus order, ARIA labels and roles, keyboard interactions, screen reader announcements.
Four rules behind the output
- Do not assume. If something is unspecified, the developer will guess.
- Use tokens, not values, so the spec says
spacing-mdand not 16px. - Show every state, from default to empty.
- Explain why, for example why a layout collapses on mobile.
Fit and limits
Best for
- Designs that are ready for engineering and need a spec sheet.
- Designers who want a consistent handoff document each time.
- Teams that start from a Figma URL. Related: the Figma MCP server.
Not for
- Writing the code itself. The output is a markdown spec.
- Early exploration, since it assumes the design is ready.
- Auditing an existing component library. Related: extract design system.
Use it with UiChemy
If the spec describes a WordPress build, UiChemy Figma to WordPress converts the Figma design itself, so the handoff document works as the written checklist beside it. Click Get Started on uichemy.com. Related: fixing accessibility.
How to install Design Handoff Skill: Developer Specs From a Design
git clone https://github.com/anthropics/knowledge-work-plugins.gitClone the repository
Run
git clone https://github.com/anthropics/knowledge-work-plugins.git. The skill sits in the design/skills/design-handoff folder.Copy the skill folder
Copy design/skills/design-handoff to the place your agent loads skills from. The folder holds one SKILL.md and nothing else.
Connect a design tool, optional
The skill reads Figma when a design tool is connected. The README says connectors are set in each plugin's .mcp.json file.
Run the command
Type
/design-handofffollowed by a Figma URL or a short description. In Claude Code the README says plugin skills activate once installed through its marketplace.
Check that it loaded
Run /design-handoff with a short description of a login form. The reply should be a markdown spec with overview, tokens, components, states, responsive, edge case and accessibility sections.
Key features
- Figma URL or descriptionThe argument accepts a Figma URL, a screenshot or a plain description, with an argument hint that names the first and the last of them.
- Measurements and tokensAsks for exact padding, margins and widths, and for color, typography and spacing referenced by token name rather than raw value.
- Component tableLists each component with its variant, props and any special behavior in one table.
- States and interactions tableMaps each element to a state and a behavior, such as a button on hover, a button while loading or a form in error.
- Responsive behaviorTemplate rows for desktop above 1024px, tablet from 768 to 1024px and mobile below 768px, filled with what changes at each.
- Edge casesCovers empty state, long text, loading and error appearance, and international strings that run longer.
- Animation and motionA table of element, trigger, animation, duration and easing so motion is specified, not guessed.
- Accessibility notesRecords focus order, ARIA labels needed and keyboard interactions for each screen.
- Connector hooksWith a design tool connected it pulls measurements and tokens from Figma, and with a project tracker it links the spec to the ticket and creates sub-tasks.
Frequently asked questions
What is the design-handoff skill?
It is a slash command skill in Anthropic's knowledge-work-plugins repository that generates developer handoff documentation from a design. It outputs a markdown spec covering layout, design tokens, components, states, responsive behavior, edge cases, motion and accessibility.
How do I install design-handoff?
Clone anthropics/knowledge-work-plugins and copy the design/skills/design-handoff folder to where your agent loads skills. The repository README also documents a Claude Code marketplace route, using claude plugin marketplace add anthropics/knowledge-work-plugins, followed by installing a plugin.
Does it need Figma?
No. The skill works from a Figma URL, a screenshot or a description. A connected design tool lets it pull exact measurements, tokens and component specs, and the skill advises sharing the Figma link for that reason.
Which agents can run it?
The repository describes itself as built for Claude Cowork and also compatible with Claude Code. The skill is plain markdown, so another agent that loads SKILL.md files may read it, but the repository does not list other agents.
Why does it insist on tokens instead of values?
The skill's second principle says to reference spacing-md and not 16px. Token names let developers map the spec to the codebase and keep design changes cheap, because a changed token updates every place that uses it.
Does it write code from the design?
No. It produces documentation only. The handoff spec is the written layer that sits beside the design and the code. When a Figma URL is provided, it pulls exact measurements, tokens and component specs from Figma. Related: Framelink Figma MCP.
What license does it use?
The repository is Apache-2.0 licensed according to the repository metadata. The README describes the plugins as plain markdown and JSON files with no build steps, which you can fork and customize for your own team.