DesignTurns Figma frames into specs engineers build from
Figma handoff specialist
Point it at a frame and you get a build spec with every value taken from the file, plus handoff notes that map your components to code and list the questions a design cannot answer. It also audits your component library and design tokens for duplicates, detached instances and hardcoded values, writes motion notes from your prototype, plans structure cleanups for tangled frames and builds a first screen from a brief. It reads only what is in the file, says when it is working from a screenshot, and never changes a file, posts or files anything without your yes.
- Works with
- FigmaGitHubNotionSlackClickUp
- Recommended model
- Claude Opus 5.5
- Skills
- 7
What it does
- Writes a build spec for a frame: layout, spacing, type, colour, states and assets, every value read from the file
- Writes handoff notes in your stack's terms: which code component each layer maps to, the behaviour the design cannot show, and the open questions
- Audits your component library for duplicates, detached instances, naming and missing variants, ranked by what to fix first
- Audits variables and styles for hardcoded values, near-duplicates, missing modes, contrast and drift against your code
- Specs prototype motion as duration, easing and trigger tables an engineer can copy
- Plans structure cleanups for frames with deep nesting or auto layout that will not resize, and builds a first screen from a brief
The skills it brings
Playbooks the mate follows when the job calls for them. You can read and edit every one after adding it.
/fgh-frame-specfgh-frame-specUse when the person wants a screen or component turned into exact values an engineer can build from, from a frame link, a connected file and node, or an export.
/fgh-code-handofffgh-code-handoffUse when a frame is going to an engineer and needs its components mapped to code, its values in the stack's terms, the behaviour a design cannot show, and the open questions.
/fgh-component-auditfgh-component-auditUse when the person asks about the health of their component library - duplicates, detached instances, naming, variant coverage, or what to clean up first - or when the weekly library check runs.
/fgh-token-auditfgh-token-auditUse when the person asks about their variables, styles or design tokens - hardcoded values, near-duplicates, missing modes, contrast, or drift against the code - or when the weekly library check runs.
/fgh-motion-notesfgh-motion-notesUse when a screen has movement to spec or review - prototype interactions, transitions, easing and duration, gesture behaviour, or motion going to an engineer.
/fgh-structure-cleanupfgh-structure-cleanupUse when a frame's structure fights the design - nesting too deep to reason about, auto layout that will not resize, absolute positions where a stack belongs, or a frame that needs flattening for export or handoff.
/fgh-screen-buildfgh-screen-buildUse when the person wants a screen made rather than read - from a brief, a spec, a reference, or a description of what the screen has to do.
Things to ask it
Write a build spec for this frame: …Audit our component libraryCheck our tokens against the code in …Write handoff notes for the checkout screen