design-handoffby Anthropic

Design Handoff Skill.

A Claude Code and Codex skill for brand and design-system work: developer handoff specs from a design: layout, tokens, component states, breakpoints.

Brand & Design Systems
Handoff spec

Download OpenDesign View usage guide

anthropics/knowledge-work-plugins · design/skills/design-handoff/SKILL.mdSKILL.md

--- name: design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. --- ## Usage ## What to Include ## Principles ## Output ## Handoff Spec: [Feature/Screen Name] ## If Connectors Available

Front matter and section headings read from the upstream file on 2026-09-14 · 3,939 characters in full

01 What it does

What the design-handoff Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Generates developer handoff documentation from a design, aimed at teams whose design is ready for engineering and needs a spec sheet. Point it at a Figma URL, or fall back to a description or screenshot, and it works through visual specifications, interaction specifications, content specifications, edge cases and accessibility.

Output is a Markdown Handoff Spec with sections for overview, layout, design tokens used, components, states and interactions, responsive behavior, edge cases, animation and motion, and accessibility notes. Its four stated principles are to specify everything rather than assume, reference tokens instead of raw values, show every state, and explain the why behind a behavior.

What it produces

A design tokens table listing each token, its value and its usage.
A components table giving each component's variant, props and special-behavior notes.
An animation and motion table recording element, trigger, animation, duration and easing.

See the example prompt ↗

How It Works

01
Resolve the Design Source
A Figma URL means the design is pulled from Figma; without one, the skill works from a written description or a screenshot.
02
Specify the Visuals
Exact padding, margins and widths, design token references for colors, typography and spacing, responsive breakpoints, and component variants and states.
03
Specify the Interactions
Click and tap behavior, hover states, gesture support, and transitions recorded with duration and easing.
04
Cover Content and Edge Cases
Character limits, truncation, empty states, loading and error states, plus minimum and maximum content, longer international strings, slow connections and missing data.
05
Add Accessibility Detail
Focus order, ARIA labels and roles, keyboard interactions, and screen reader announcements.
06
Emit the Spec in the Template
The result is written as a Markdown Handoff Spec using the file's section and table structure.

02 Find your fit

When to Use the design-handoff Skill

Use the design-handoff skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

A design is finished and ready for engineering, and the team needs a spec sheet covering layout, tokens, component props, states, breakpoints, edge cases and animation.
A project tracker is connected and you want the handoff tied to the implementation ticket.

Know the Boundaries

Exact Figma-derived measurements, token values, exported assets and a complete spec sheet only come when a design tool is connected.
Setting up sub-tasks for each spec section depends on a project tracker being connected.

What to Provide

A Figma URL or a design descriptionThis is the argument the command expects, and it is what the spec is generated from.

03 Inside the skill

Rules the design-handoff Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Specify Everything
The first principle is not to assume: if something is not specified, the developer will guess, so the handoff must cover it.
Reference Tokens, Not Raw Values
Values are written as token names such as spacing-md rather than as pixel numbers.
Show All States
Every state must appear: default, hover, active, disabled, loading, error and empty.
Describe the Why
Rationale is included alongside the behavior so developers can make good judgment calls, for example explaining why something collapses on mobile.
Ask for Edge Cases Explicitly
Naming boundary questions such as what happens with 100 items gets those boundary conditions specced.
Tell It the Tech Stack
Naming the stack, for example React plus Tailwind, produces implementation notes relevant to that stack.
Share the Figma Link
The link is what allows exact measurements, tokens and component info to be pulled rather than inferred.

04 Put it to work

Install design-handoff in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-handoff to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

Generic skills CLI form for design/skills/design-handoff/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Generate a developer handoff spec for the [checkout confirmation screen] in [Figma URL]. I need exact padding and margins, design token references instead of raw values, all component states including loading and error, and the responsive behavior at each breakpoint. We use [React + Tailwind], and please spec the empty state and what happens with [very long product names].

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

The responsive behavior table has a filled row for mobile below 768px, not a blank placeholder.
Edge cases name what to show when there is no data, alongside truncation, loading and error behavior.
Accessibility notes state the focus order and the ARIA labels needed.

In OpenDesign import design-handoff from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Skill file: design/skills/design-handoff/SKILL.md Content checksum recorded at verification; commit 8f877b6
License: Apache-2.0 From LICENSE.
Repository stars: 24,012 GitHub snapshot taken 2026-09-14 for the whole anthropics/knowledge-work-plugins repository, which contains 7 skills in this catalog. Not a rating or usage count for design-handoff.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

UsageShows the /design-handoff invocation and the $ARGUMENTS and @$1 placeholders.
What to IncludeLists the categories to cover: visual, interaction, content, edge cases and accessibility specs.
PrinciplesFour rules: don't assume, use tokens, show all states, describe the why.
OutputProvides the Markdown Handoff Spec template with its headings and tables.
If Connectors AvailableConditional extras for a connected design tool and project tracker.
TipsThree tips: share the Figma link, mention edge cases, specify the tech stack.

The Skill's Own Description

“Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.”

Front-matter description from SKILL.md. The full file is about 3,939 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-handoff Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What changes if a design tool is connected?

It pulls exact measurements, tokens and component specs straight from Figma, and can export assets and generate a complete spec sheet.

Design Handoff

Run design-handoff on a Real Brand and design-system Work Task.

Download OpenDesign, import design-handoff from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills