figma-dev-bypass

name	figma-dev-bypass
description	Extract and implement Figma screen specs via figma-dev-bypass CLI. Use when the user asks to implement a Figma screen, extract Figma specs, design-to-code from Figma, or mentions figma-dev-bypass.

figma-dev-bypass

Extract structured JSON specs from Figma frames and implement UI from the spec contract.

When to use

• User wants to implement a Figma screen in code
• User mentions figma-dev-bypass or design specs
• User provides a Figma file key / node id / section name

Prerequisites

• Node.js 18+
• FIGMA_TOKEN with file_content:read scope
• Access to the target Figma file

Extract workflow

1. List available frames:

   figma-dev-bypass --list --file-key <KEY> --node <ID>
   

2. Extract with agent pack and token matching:

   figma-dev-bypass --extract --file-key <KEY> --node <ID> \
     --frames "<screen names>" \
     --tokens path/to/variables.scss \
     --agent-pack --target <framework>
   

   Valid --target values: generic, react, vue, quasar, react-native, swiftui

3. Read output from output/specs/<slug>/:

   • spec.json — the design contract
   • prompt.md — implementation instructions
   • checklist.md — verification checklist

If the CLI is being run from a local clone before npm publish, use node --env-file=.env src/cli.mjs or the repo's npm run list / npm run extract scripts.

Implementation rules

1. Read the spec first — never guess colors or copy from screenshots
2. Prefer tokenMatch over raw hex when mapping to project design tokens
3. Use project patterns — the spec is the contract, not the framework
4. Do not invent UI — only implement elements listed in the spec
5. Verify against checklist.md before marking done
6. Use box coordinates as layout guidance — avoid blind absolute positioning unless the target project uses it

Consumer app policy

Add this to the app repo's AGENTS.md, CLAUDE.md, or Cursor rules:

Before implementing any Figma-based UI, read the matching file in `design/specs/`.
Treat `spec.json` as the contract. Prefer `tokenMatch` over raw hex. Do not invent copy,
colors, buttons, or progress states that are not listed in the spec.

Spec field reference

Field	Meaning
background	Frame fill color
texts[]	Copy, typography, position
buttons[]	CTAs with label, fill, radius
progress	Progress bar track + fill
tokenMatch	SCSS variable suggestion

Full schema: schema/spec.schema.json in the figma-dev-bypass repo.

Install in consumer project

Copy this skill to the consumer project's agent skills folder:

• Cursor: .cursor/skills/figma-dev-bypass/SKILL.md
• Claude Code: .claude/skills/figma-dev-bypass/SKILL.md

Add a Cursor rule from examples/cursor-rule.md pointing agents at design/specs/ in the app repo.

For team rollout, see docs/team-playbook.md in the figma-dev-bypass repo.