0 min read

Generate a Figma Componet Dev- Handoff Spec

Designers

Claude Skill

TL;DR:

I built this as a Claude skill that reads a component's real Figma data first, checks Figma properties, Code Connect bindings, and existing component docs before asking anything, and only falls back to a disclosed industry-standard default when nothing else answers the question.

Why This, Specifically

A disabled field with no stated trigger. An icon-only button with no accessible name written anywhere. A padding value that's a raw number instead of a token. None of that takes judgment, just checking, and checking is exactly the kind of repetitive work worth handing off.

How It Works

Scope: one component, component set, or composed frame at a time, a panel built from already-existing component instances plus simple elements like a plain link. Multi-screen flows and cross-page navigation stay out of scope on purpose.
Check before asking: every field runs through a sourcing check first, Figma property, Code Connect binding, an existing component's own documentation, before it becomes a question. You see what got resolved this way before the interview starts.
Accessibility, matched to what each part actually is: a button gets asked about its type and accessible name, an input gets asked about required/autocomplete/inputmode, a heading gets asked about semantic level. No generic checklist applied to everything regardless of role.
Developer conventions, gathered as a real step: state naming, error terminology, disabled-field logic, asked directly if nobody's settled on them yet, with disclosed industry-standard fallbacks (WAI-ARIA, WHATWG HTML, HTTP status semantics) if the questions get skipped.
Update mode: point it at an existing handoff frame and the target's current state, it diffs stored values against reality and marks only what changed.

The Skill

Setup interview, an HTML preview to review before anything is built, then the Figma build itself, checked against that same preview afterward rather than trusted on its own summary.

When and How To Use It

Works on a single component or a composed panel once its parts already exist as real components. Won't try to document a whole flow, and won't duplicate usability guidance that belongs in a component spec.

Invoke it like this:

use developer-handoff-spec-generator for [component link] on [page name]

A Note on What This Skill Can and Cannot Do

It can get things wrong, same as any skill. Figma's own tools for discovering unknown content on a page (an existing doc frame, an occupied layout area) are unreliable, so the skill asks directly rather than relying on that kind of call. Direct reads of a component you already have a link to are reliable and used everywhere else. Check the preview before approving it, and check the built result in Figma after, the same two-checkpoint habit that matters for any of these skills.

This skill is a structured prompt. It instructs Claude to evaluate without softening criticism, but it does not guarantee accuracy. Claude can still miss things, misread context, or produce confident-sounding findings that turn out to be wrong. The output is a starting point for your own judgment, not a substitute for it.
Treat any finding that would drive a real decision as something to verify independently before acting on it.

Get the Skill

The skill is available free on GitHub.

Download from GitHub

Let's Talk