figma-dev-bypass 0.1.0

package/AGENTS.md

@@ -0,0 +1,123 @@
+# Agent instructions
+
+Use this playbook when implementing UI from Figma in a consumer project. The spec JSON is the contract — do not guess colors, copy, or layout from screenshots.
+
+## Setup from zero
+
+1. **Install the CLI**
+
+   ```bash
+   git clone https://github.com/guilhermemouraovc/figma-dev-bypass.git
+   cd figma-dev-bypass
+   cp .env.example .env
+   ```
+
+   Or, once published: `npx figma-dev-bypass --help`
+
+2. **Get a Figma token**
+
+   - Go to [figma.com/developers/api#access-tokens](https://www.figma.com/developers/api#access-tokens)
+   - Create a personal access token with scope **`file_content:read`**
+   - Add it to `.env`: `FIGMA_TOKEN=figd_...`
+
+3. **Find file key and node id from a Figma URL**
+
+   ```
+   https://www.figma.com/design/RXv1deGII4NMLUjk8yPm3w/My-File?node-id=1021-16710
+                                 ^^^^^^^^^^^^^^^^^^^^^^^^              ^^^^^^^^^^
+                                 file-key                              node-id → 1021:16710
+   ```
+
+   Set in `.env` or pass as CLI flags: `--file-key` and `--node`.
+
+## Workflow
+
+1. **List frames** in the target section:
+
+   ```bash
+   figma-dev-bypass --list --file-key <KEY> --node <ID>
+   ```
+
+2. **Extract specs** (do not guess from screenshots):
+
+   ```bash
+   figma-dev-bypass --extract --file-key <KEY> --node <ID> \
+     --frames "Login,Register" \
+     --tokens path/to/variables.scss \
+     --agent-pack --target vue
+   ```
+
+3. **Read the output**
+   - With `--agent-pack`: `output/specs/<slug>/spec.json`, `prompt.md`, `checklist.md`
+   - Without: `output/specs/<slug>.json`
+
+4. **Implement** using the consumer project's component patterns. Prefer `tokenMatch` over raw hex.
+
+5. **Verify** against `checklist.md` when using `--agent-pack`.
+
+## Agent operating rules
+
+- Treat `spec.json` as the source of truth. Screenshots are secondary references only.
+- Read `prompt.md` and `checklist.md` before editing UI code.
+- Prefer `tokenMatch` values over raw hex when the consumer project has matching tokens.
+- Use the consumer project's existing components and layout patterns.
+- Use `box` coordinates to understand relative hierarchy and spacing; avoid blind absolute positioning unless the app already uses it.
+- Do not invent copy, colors, buttons, input fields, navigation, or progress states that are not present in the spec.
+- If a required UI element is missing from the spec, stop and ask whether to update the Figma design or implement a project-specific exception.
+
+## Spec fields
+
+| Field | Meaning |
+|---|---|
+| `name` | Frame name in Figma |
+| `nodeId` | Figma node id |
+| `size` | Frame width and height |
+| `background` | Frame fill color |
+| `texts[]` | Copy + typography + relative position (`box`) |
+| `buttons[]` | CTA instances or drawn rectangles with label |
+| `bars[]` | Thin rounded rectangles (raw, before progress pairing) |
+| `progress` | Paired thin bars (track + fill) when two bars align |
+| `tokenMatch` | Suggested SCSS variable when `--tokens` was passed |
+
+Full schema: [schema/spec.schema.json](schema/spec.schema.json)
+
+## Target framework (`--target`)
+
+When using `--agent-pack`, pass `--target` to get framework-specific guidance in `prompt.md`:
+
+| Value | Use for |
+|---|---|
+| `generic` | Framework-agnostic (default) |
+| `react` | React + CSS Modules / Tailwind |
+| `vue` | Vue 3 Composition API |
+| `quasar` | Quasar Framework |
+| `react-native` | React Native |
+| `swiftui` | SwiftUI |
+
+The spec JSON stays neutral — only the agent prompt changes.
+
+## Consumer project setup
+
+Copy specs into your app repo (e.g. `design/specs/`) and reference them in `CLAUDE.md`, Cursor rules, or `AGENTS.md`:
+
+> Before implementing onboarding UI, read the matching file in `design/specs/`.
+
+Optional: copy [skills/figma-dev-bypass/SKILL.md](skills/figma-dev-bypass/SKILL.md) into your project's `.cursor/skills/` or `.claude/skills/` folder.
+
+See [examples/cursor-rule.md](examples/cursor-rule.md) for a ready-to-paste Cursor rule.
+
+## Copy-paste prompt for implementation
+
+```markdown
+Implement the `<ScreenName>` screen from `design/specs/<screen-slug>/`.
+
+Before coding:
+- Read `spec.json`, `prompt.md`, and `checklist.md`.
+- Use existing app components and styling conventions.
+- Prefer `tokenMatch` variables over raw hex.
+- Preserve exact text copy, typography, button labels, and progress values from the spec.
+
+After coding:
+- Run the relevant tests, type checks, or lint command.
+- Verify every item in `checklist.md`.
+```

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Guilherme Mourão 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,196 @@
+# figma-dev-bypass
+
+[![npm version](https://img.shields.io/npm/v/figma-dev-bypass)](https://www.npmjs.com/package/figma-dev-bypass)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![node](https://img.shields.io/badge/node-%3E%3D18-green.svg)](https://nodejs.org/)
+[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg)](#)
+
+**Structured design contracts for AI coding agents — extracted from Figma without Dev Mode.**
+
+A lightweight CLI that uses the [Figma REST API](https://www.figma.com/developers/api) to fetch frame data, let you pick which screens to export, and output **agent-ready JSON specs** (colors, typography, buttons, progress bars, spacing) that Claude Code, Cursor, Codex, and any coding agent can implement against.
+
+No MCP rate limits. No per-screen AI calls. No paid Dev Mode seats required.
+
+<!-- TODO: record demo GIF: --list then --extract then cat spec.json -->
+
+## Demo
+
+_Recording coming soon — run `npm run list` then `npm run extract -- --frames "Login" --agent-pack` to try it locally._
+
+## Why agent-ready?
+
+| Problem | This tool |
+|---|---|
+| Dev Mode / MCP costs and limits | One REST call per section, cached locally |
+| Screenshots are expensive for LLMs | Small JSON specs (~2–5 KB per screen) |
+| Design changes are invisible in code | Version specs in git, diff in PRs |
+| Agents guess colors and copy | Structured contract with exact values |
+
+## Features
+
+- List frames in a Figma section (`--list`)
+- Extract one or many screens (`--frames`, `--ids`, `--all`)
+- Local API cache (`output/cache/`) to respect rate limits
+- Optional design-token matching via SCSS file (`--tokens`)
+- Optional PNG exports (`--images`)
+- Agent pack: `spec.json` + `prompt.md` + `checklist.md` per screen (`--agent-pack`)
+- Framework-specific agent hints (`--target react|vue|quasar|react-native|swiftui`)
+- Zero npm dependencies — Node.js 18+ only
+
+## Requirements
+
+- [Node.js](https://nodejs.org/) 18+
+- Figma [personal access token](https://www.figma.com/developers/api#access-tokens) with `file_content:read` scope
+- View access to the target Figma file
+
+## Install
+
+```bash
+git clone https://github.com/guilhermemouraovc/figma-dev-bypass.git
+cd figma-dev-bypass
+cp .env.example .env
+# Edit .env — add FIGMA_TOKEN (and optional defaults)
+```
+
+Or link globally:
+
+```bash
+npm link
+# then run: figma-dev-bypass --help
+```
+
+## Quick start
+
+```bash
+# 1. Configure token
+export FIGMA_TOKEN=figd_xxxxxxxx
+
+# 2. List available frames in a section
+node src/cli.mjs --list \
+  --file-key RXv1deGII4NMLUjk8yPm3w \
+  --node 1021:16710
+
+# 3. Extract specific screens
+node src/cli.mjs --extract \
+  --file-key RXv1deGII4NMLUjk8yPm3w \
+  --node 1021:16710 \
+  --frames "Login,Register,Payment"
+
+# 4. Extract everything + agent prompts + token matching + Vue hints
+node src/cli.mjs --extract --all \
+  --file-key RXv1deGII4NMLUjk8yPm3w \
+  --node 1021:16710 \
+  --tokens ./examples/tokens.example.scss \
+  --agent-pack --target vue
+```
+
+With `.env` defaults (`FIGMA_FILE_KEY`, `FIGMA_NODE`):
+
+```bash
+npm run list
+npm run extract -- --frames "Login" --agent-pack --target vue
+```
+
+Use `node --env-file=.env src/cli.mjs` if your Node version supports `--env-file`.
+
+## Teach your team
+
+Use [docs/team-playbook.md](docs/team-playbook.md) to onboard designers, developers, and coding agents. It includes the golden path, copy-paste agent prompts, PR review checklist, Figma handoff conventions, and common mistakes to avoid.
+
+## CLI reference
+
+```
+figma-dev-bypass --list   --file-key KEY --node ID
+figma-dev-bypass --extract --file-key KEY --node ID (--all | --frames "a,b" | --ids x,y)
+
+Options:
+  --out DIR          Output directory (default: output/specs)
+  --cache DIR        API cache (default: output/cache)
+  --tokens PATH      SCSS variables file for tokenMatch
+  --refresh          Re-download from API
+  --images           Export PNGs to <out>/img/
+  --agent-pack       Write prompt.md + checklist.md per screen
+  --target NAME      Framework hints for agent-pack (generic, react, vue, quasar, react-native, swiftui)
+  --version          Show version
+```
+
+### Finding file key and node id
+
+From a Figma URL:
+
+```
+https://www.figma.com/design/RXv1deGII4NMLUjk8yPm3w/My-File?node-id=1021-16710
+                              ^^^^^^^^^^^^^^^^^^^^^^^^              ^^^^^^^^^^
+                              file-key                              node-id → 1021:16710
+```
+
+## Output format
+
+Each screen becomes a JSON spec. See [schema/spec.schema.json](schema/spec.schema.json) for the full contract.
+
+```json
+{
+  "name": "Registre-se",
+  "nodeId": "918:906",
+  "size": { "width": 440, "height": 956 },
+  "background": { "hex": "#121212", "tokenMatch": "$dm-bg" },
+  "texts": [
+    { "text": "Registre-se", "fontSize": 32, "fontWeight": 800, "color": { "hex": "#FFFFFF" } }
+  ],
+  "buttons": [
+    { "label": "Continuar", "fill": { "hex": "#410E47" }, "radius": 68 }
+  ],
+  "progress": { "track": { "hex": "#1E1E1E" }, "fill": { "hex": "#C184FF" }, "radius": 93 }
+}
+```
+
+With `--agent-pack`, each screen gets its own folder:
+
+```
+output/specs/registre-se/
+  spec.json
+  prompt.md      # ready-to-paste implementation prompt
+  checklist.md   # verification checklist
+```
+
+See [examples/login.spec.json](examples/login.spec.json) for a sample.
+
+## Using specs in your app repo
+
+1. Extract specs into your project: `--out ../my-app/design/specs`
+2. Commit `design/specs/*.json` (not `output/cache/`)
+3. Point your agent at the spec before implementing UI — see [AGENTS.md](AGENTS.md)
+4. Optional: pass your project's SCSS variables with `--tokens src/css/variables.scss`
+
+Specs never ship to mobile/web bundles — they are dev-time contracts only.
+
+## For AI coding tools
+
+| Tool | How to use |
+|---|---|
+| **Claude Code** | Copy [skills/figma-dev-bypass/SKILL.md](skills/figma-dev-bypass/SKILL.md) to `.claude/skills/`; run extract with `--agent-pack`; implement from `prompt.md` |
+| **Cursor** | Copy the skill to `.cursor/skills/`; add [examples/cursor-rule.md](examples/cursor-rule.md) as a project rule |
+| **Codex / others** | Same JSON contract; no Figma integration needed at implement time |
+
+For team rollout, start with the copy-paste prompts and review checklist in [docs/team-playbook.md](docs/team-playbook.md).
+
+## Security
+
+- Never commit `FIGMA_TOKEN` or `.env`
+- Token only needs `file_content:read`
+- Revoke tokens you accidentally exposed
+
+## Limitations
+
+- Uses the official Figma REST API — not a scraper or Dev Mode hack
+- Animations and complex interactions are not captured
+- Some hand-drawn buttons may need manual review (radius detection heuristic)
+- Illustrations/vectors are listed as assets, not reconstructed in CSS
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+MIT — see [LICENSE](LICENSE)

package/docs/team-playbook.md

@@ -0,0 +1,128 @@
+# Team Playbook
+
+Use this guide to teach a team how to turn Figma screens into implementation-ready specs for coding agents.
+
+## Mental model
+
+`figma-dev-bypass` is not a code generator. It is a deterministic extraction step:
+
+```text
+Figma REST API -> JSON spec -> agent implements UI in your app
+```
+
+The JSON spec is the source of truth for copy, colors, typography, buttons, progress bars, and relative positions. Screenshots are only visual references; agents should not guess implementation details from screenshots.
+
+## Roles
+
+| Role | Responsibility |
+|---|---|
+| Designer | Keeps frame names stable and gives developers access to the Figma file |
+| Developer | Extracts specs, commits them to the app repo, and maps `tokenMatch` to real project tokens |
+| Coding agent | Reads `spec.json`, follows `prompt.md`, implements with project components, and verifies `checklist.md` |
+
+## Golden path
+
+### 1. Extract specs from this repo
+
+```bash
+cp .env.example .env
+# add FIGMA_TOKEN, FIGMA_FILE_KEY, FIGMA_NODE
+
+npm run list
+npm run extract -- --frames "Login,Register" \
+  --tokens ../my-app/src/css/variables.scss \
+  --out ../my-app/design/specs \
+  --agent-pack --target vue
+```
+
+Use `--target quasar`, `--target react`, `--target react-native`, or `--target swiftui` when that matches the consumer app. The spec stays framework-neutral; only `prompt.md` changes.
+
+### 2. Commit specs in the consumer app
+
+Commit the generated `design/specs/` files in the app repo. Do not commit `output/cache/` or `.env`.
+
+Recommended layout:
+
+```text
+my-app/
+  design/
+    specs/
+      login/
+        spec.json
+        prompt.md
+        checklist.md
+```
+
+### 3. Add an agent rule to the consumer app
+
+Add this policy to `AGENTS.md`, `CLAUDE.md`, or Cursor rules:
+
+```markdown
+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.
+```
+
+### 4. Give the agent a narrow implementation prompt
+
+Use this prompt when asking a coding agent to build a screen:
+
+```markdown
+Implement the `<ScreenName>` screen from `design/specs/<screen-slug>/`.
+
+Required:
+- Read `spec.json`, `prompt.md`, and `checklist.md` first.
+- Use existing app components and styling conventions.
+- Prefer `tokenMatch` variables over raw hex values.
+- Preserve exact text copy, typography, button labels, and progress bar values from the spec.
+- Run the relevant tests or type checks when done.
+```
+
+## Review checklist
+
+Use this when reviewing a PR generated from specs:
+
+- The PR includes the generated spec files or references the existing committed specs.
+- The implementation uses project tokens where `tokenMatch` exists.
+- Text copy and button labels match `spec.json`.
+- The layout is responsive; `box` coordinates were used as guidance, not blind absolute positioning, unless the app intentionally uses absolute layout.
+- `checklist.md` was completed for each screen.
+- No Figma token, `.env`, or cache file was committed.
+
+## Common mistakes
+
+| Mistake | Fix |
+|---|---|
+| Asking the agent to implement from a screenshot | Extract specs first and point the agent to `spec.json` |
+| Committing only screenshots | Commit `design/specs/` so future design changes can be reviewed as diffs |
+| Ignoring `tokenMatch` | Pass the app SCSS variables with `--tokens` and prefer matched variables |
+| Extracting stale design data | Re-run with `--refresh` after Figma changes |
+| No frames matched | Run `--list`, copy the exact frame name or use `--ids` |
+| Wrong section node | Use the Figma URL `node-id`, replacing `-` with `:` |
+| Treating specs as runtime assets | Keep specs in dev-only folders; they should not ship in the app bundle |
+
+## Figma handoff conventions
+
+Ask designers to keep these conventions when possible:
+
+- Name top-level frames clearly, for example `Login`, `Register`, `Checkout`.
+- Use component instances named `Button`, `Botão`, or equivalent for CTAs when possible.
+- Keep progress bars as two thin rounded rectangles aligned on the same Y axis.
+- Keep screen variants as separate top-level frames when they need separate implementation.
+
+## Commands to memorize
+
+```bash
+# list frames
+figma-dev-bypass --list --file-key <KEY> --node <ID>
+
+# extract agent pack
+figma-dev-bypass --extract --file-key <KEY> --node <ID> \
+  --frames "Login,Register" \
+  --tokens path/to/variables.scss \
+  --out path/to/app/design/specs \
+  --agent-pack --target quasar
+
+# refresh after design changes
+figma-dev-bypass --extract --refresh --all --agent-pack
+```

package/examples/cursor-rule.md

@@ -0,0 +1,20 @@
+# Cursor rule example (paste into `.cursor/rules/` or project rules)
+
+```markdown
+---
+description: Read Figma design specs before implementing UI
+globs: src/pages/**, src/components/**, src/views/**
+---
+
+Before implementing any Figma-based UI:
+
+1. Check `design/specs/` for a matching screen spec (JSON or agent pack folder).
+2. Read `spec.json`, `prompt.md`, and `checklist.md` when an agent pack exists.
+3. Treat `spec.json` as the design contract (colors, copy, buttons, progress).
+4. Prefer `tokenMatch` SCSS variables over raw hex values.
+5. Do not invent UI elements not listed in the spec.
+6. Use `box` coordinates as relative layout guidance, not mandatory absolute positioning.
+7. If no spec exists, ask the user to run figma-dev-bypass extract first.
+```
+
+Adjust the `globs` and `design/specs/` path to match your project layout.

package/examples/login.spec.json

@@ -0,0 +1,24 @@
+{
+  "name": "Login",
+  "nodeId": "1016:1275",
+  "size": { "width": 440, "height": 956 },
+  "background": { "hex": "#410E47" },
+  "texts": [
+    {
+      "text": "Entrar",
+      "fontFamily": "Open Sauce Sans",
+      "fontSize": 24,
+      "fontWeight": 600,
+      "color": { "hex": "#FFFFFF" }
+    }
+  ],
+  "buttons": [
+    {
+      "name": "Botão Branco - Secundário",
+      "label": "Continuar com o telefone",
+      "fill": { "hex": "#FFFFFF" },
+      "radius": 68,
+      "box": { "x": 45, "y": 714, "width": 350, "height": 56 }
+    }
+  ]
+}

package/examples/tokens.example.scss

@@ -0,0 +1,10 @@
+// Example design tokens for tokenMatch in exported specs.
+// Point the CLI with: --tokens ./examples/tokens.example.scss
+
+$dm-bg: #121212;
+$dm-card: #1E1E1E;
+$dm-text-primary: #FFFFFF;
+$dm-text-subtitle: #A0A0A0;
+$dm-open: #C184FF;
+$dm-brand-purple: #410E47;
+$dm-brand-lime: #D0FF59;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "figma-dev-bypass",
+  "version": "0.1.0",
+  "description": "Agent-ready Figma spec extractor via REST API — no Dev Mode required",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "figma-dev-bypass": "src/cli.mjs"
+  },
+  "files": [
+    "src",
+    "docs",
+    "examples",
+    "schema",
+    "skills",
+    "AGENTS.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "list": "node --env-file=.env src/cli.mjs --list",
+    "extract": "node --env-file=.env src/cli.mjs --extract",
+    "help": "node src/cli.mjs --help",
+    "test": "node --test test/*.mjs"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "figma",
+    "figma-api",
+    "design-tokens",
+    "design-to-code",
+    "agent-ready",
+    "cli"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/guilhermemouraovc/figma-dev-bypass.git"
+  }
+}

package/schema/spec.schema.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://github.com/guilhermemouraovc/figma-dev-bypass/schema/spec.schema.json",
+  "title": "Figma Screen Spec",
+  "description": "Structured design contract extracted from a Figma frame by figma-dev-bypass",
+  "type": "object",
+  "required": ["name", "nodeId", "size", "texts"],
+  "properties": {
+    "name": { "type": "string", "description": "Frame name in Figma" },
+    "nodeId": { "type": "string", "description": "Figma node id, e.g. 1016:1275" },
+    "size": {
+      "type": "object",
+      "required": ["width", "height"],
+      "properties": {
+        "width": { "type": "number" },
+        "height": { "type": "number" }
+      }
+    },
+    "background": { "$ref": "#/definitions/color" },
+    "texts": {
+      "type": "array",
+      "items": { "$ref": "#/definitions/text" }
+    },
+    "buttons": {
+      "type": "array",
+      "items": { "$ref": "#/definitions/button" }
+    },
+    "bars": {
+      "type": "array",
+      "items": { "$ref": "#/definitions/bar" }
+    },
+    "progress": { "$ref": "#/definitions/progress" }
+  },
+  "definitions": {
+    "color": {
+      "type": "object",
+      "required": ["hex"],
+      "properties": {
+        "hex": { "type": "string", "pattern": "^#[0-9A-F]{6}$" },
+        "tokenMatch": { "type": "string", "description": "Suggested SCSS variable, e.g. $primary" }
+      }
+    },
+    "box": {
+      "type": "object",
+      "required": ["x", "y", "width", "height"],
+      "properties": {
+        "x": { "type": "integer" },
+        "y": { "type": "integer" },
+        "width": { "type": "integer" },
+        "height": { "type": "integer" }
+      }
+    },
+    "text": {
+      "type": "object",
+      "required": ["text"],
+      "properties": {
+        "text": { "type": "string" },
+        "fontFamily": { "type": "string" },
+        "fontSize": { "type": "number" },
+        "fontWeight": { "type": "number" },
+        "lineHeight": { "type": "number" },
+        "color": { "$ref": "#/definitions/color" },
+        "box": { "$ref": "#/definitions/box" }
+      }
+    },
+    "button": {
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "label": { "type": ["string", "null"] },
+        "fill": { "$ref": "#/definitions/color" },
+        "radius": { "type": ["number", "null"] },
+        "box": { "$ref": "#/definitions/box" }
+      }
+    },
+    "bar": {
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "color": { "$ref": "#/definitions/color" },
+        "radius": { "type": "number" },
+        "box": { "$ref": "#/definitions/box" }
+      }
+    },
+    "progress": {
+      "type": "object",
+      "properties": {
+        "track": { "$ref": "#/definitions/color" },
+        "fill": { "$ref": "#/definitions/color" },
+        "radius": { "type": "number" },
+        "height": { "type": "integer" }
+      }
+    }
+  }
+}

package/skills/figma-dev-bypass/SKILL.md

@@ -0,0 +1,88 @@
+---
+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:
+
+   ```bash
+   figma-dev-bypass --list --file-key <KEY> --node <ID>
+   ```
+
+2. Extract with agent pack and token matching:
+
+   ```bash
+   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:
+
+```markdown
+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.

package/src/cli.mjs

@@ -0,0 +1,269 @@
+#!/usr/bin/env node
+import { mkdirSync, existsSync, readFileSync, writeFileSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { loadTokens, parseFrame, slugify } from './parse.mjs'
+import { targets, targetNames } from './targets.mjs'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const pkg = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'))
+const defaultCache = join(root, 'output/cache')
+const defaultSpecs = join(root, 'output/specs')
+
+const args = process.argv.slice(2)
+const flag = name => args.includes(`--${name}`)
+const opt = name => {
+  const i = args.indexOf(`--${name}`)
+  return i >= 0 ? args[i + 1] : null
+}
+
+function printHelp () {
+  console.log(`figma-dev-bypass — extract agent-ready specs from Figma via REST API
+
+Usage:
+  figma-dev-bypass --list   --file-key KEY --node ID [options]
+  figma-dev-bypass --extract --file-key KEY --node ID (--all | --frames "a,b" | --ids x,y) [options]
+
+Options:
+  --file-key KEY     Figma file key (or env FIGMA_FILE_KEY)
+  --node ID          Section/frame node id, e.g. 1021:16710 (or env FIGMA_NODE)
+  --out DIR          Output specs directory (default: output/specs)
+  --cache DIR        API cache directory (default: output/cache)
+  --tokens PATH      Optional SCSS variables file for tokenMatch (e.g. quasar.variables.scss)
+  --refresh          Re-download from Figma API (ignore cache)
+  --images           Export PNG screenshots to <out>/img/
+  --agent-pack       Also write prompt.md + checklist.md per screen
+  --target NAME      Framework hints for agent-pack (${targetNames.join(', ')})
+  --version          Show version
+  --help             Show this help
+
+Environment:
+  FIGMA_TOKEN        Personal access token (required, scope: file_content:read)
+  FIGMA_FILE_KEY     Default file key
+  FIGMA_NODE         Default node id
+
+Examples:
+  figma-dev-bypass --list --file-key RXv1deGII4NMLUjk8yPm3w --node 1021:16710
+  figma-dev-bypass --extract --file-key RXv1deGII4NMLUjk8yPm3w --node 1021:16710 --frames "Login,Register"
+  figma-dev-bypass --extract --all --tokens ./examples/tokens.example.scss --agent-pack --target vue
+`)
+}
+
+function readCacheJson (filePath) {
+  try {
+    return JSON.parse(readFileSync(filePath, 'utf8'))
+  } catch {
+    return null
+  }
+}
+
+async function api (token, path) {
+  const res = await fetch(`https://api.figma.com${path}`, { headers: { 'X-Figma-Token': token } })
+  if (!res.ok) {
+    const body = await res.text().catch(() => '')
+    const hints = {
+      403: ' — check that FIGMA_TOKEN is valid and has file_content:read scope',
+      404: ' — check the file key and that your token has access to this file',
+      429: ' — rate limited, wait a minute and retry'
+    }
+    const hint = hints[res.status] || ''
+    throw new Error(`Figma API ${res.status}: ${path}${hint}${body ? ` — ${body.slice(0, 200)}` : ''}`)
+  }
+  return res.json()
+}
+
+function findNode (node, id) {
+  if (node.id === id) return node
+  for (const c of node.children || []) {
+    const hit = findNode(c, id)
+    if (hit) return hit
+  }
+  return null
+}
+
+async function getSection ({ token, fileKey, nodeId, cacheDir, refresh }) {
+  mkdirSync(cacheDir, { recursive: true })
+  const cacheFile = join(cacheDir, `${fileKey}-${nodeId.replace(':', '-')}.json`)
+
+  if (!refresh && existsSync(cacheFile)) {
+    const cached = readCacheJson(cacheFile)
+    if (cached) return cached
+  }
+
+  if (!refresh) {
+    const { readdirSync } = await import('node:fs')
+    for (const f of readdirSync(cacheDir)) {
+      if (!f.endsWith('.json') || !f.startsWith(fileKey)) continue
+      const data = readCacheJson(join(cacheDir, f))
+      if (!data) continue
+      const hit = findNode(data, nodeId)
+      if (hit) return hit
+    }
+  }
+
+  console.log(`Fetching node ${nodeId} from file ${fileKey}...`)
+  const data = await api(token, `/v1/files/${fileKey}/nodes?ids=${encodeURIComponent(nodeId)}`)
+  const node = data.nodes[nodeId]?.document
+  if (!node) throw new Error(`Node ${nodeId} not found in file ${fileKey}`)
+  writeFileSync(cacheFile, JSON.stringify(node))
+  return node
+}
+
+function topFrames (section) {
+  return (section.children || []).filter(n => n.type === 'FRAME')
+}
+
+function writeAgentPack (dir, spec, targetKey) {
+  const target = targets[targetKey] || targets.generic
+
+  const prompt = `# Implement: ${spec.name}
+
+Read the attached spec (\`spec.json\`) and implement this screen in the target project.
+
+## Screen
+- **Name:** ${spec.name}
+- **Node ID:** ${spec.nodeId}
+- **Size:** ${spec.size?.width}×${spec.size?.height}
+
+## Background
+${spec.background ? `- ${spec.background.hex}${spec.background.tokenMatch ? ` (${spec.background.tokenMatch})` : ''}` : '- (none detected)'}
+
+## Texts
+${(spec.texts || []).map(t => `- "${t.text}" — ${t.fontSize}px / weight ${t.fontWeight}${t.color?.tokenMatch ? ` — ${t.color.tokenMatch}` : t.color?.hex ? ` — ${t.color.hex}` : ''}`).join('\n') || '- (none)'}
+
+## Buttons
+${(spec.buttons || []).map(b => `- "${b.label || b.name}" — radius ${b.radius ?? '?'}${b.fill?.tokenMatch ? ` — ${b.fill.tokenMatch}` : b.fill?.hex ? ` — ${b.fill.hex}` : ''}`).join('\n') || '- (none)'}
+
+## Target framework: ${target.label}
+${target.guidance.map(g => `- ${g}`).join('\n')}
+${target.skeleton ? `\n## Component skeleton\n\`\`\`\n${target.skeleton}\n\`\`\`\n` : ''}
+## Rules
+1. Match colors and typography from the spec; prefer tokenMatch variables when present.
+2. Do not invent UI elements not listed in the spec.
+3. Use the project's existing component patterns (buttons, headers, inputs).
+`
+
+  const checklist = `# Checklist: ${spec.name}
+
+- [ ] Background color matches spec
+- [ ] All text copy matches spec
+- [ ] Typography (size, weight, line-height) matches spec
+- [ ] Buttons: shape, colors, labels match spec
+${spec.progress ? '- [ ] Progress bar: track, fill, radius match spec' : ''}
+- [ ] Dark/light mode handled per project conventions
+`
+
+  writeFileSync(join(dir, 'prompt.md'), prompt)
+  writeFileSync(join(dir, 'checklist.md'), checklist)
+  writeFileSync(join(dir, 'spec.json'), JSON.stringify(spec, null, 2) + '\n')
+}
+
+async function main () {
+  if (flag('version')) {
+    console.log(pkg.version)
+    return
+  }
+
+  if (flag('help') || !args.length) {
+    printHelp()
+    process.exit(args.length ? 0 : 1)
+  }
+
+  const token = process.env.FIGMA_TOKEN
+  if (!token) {
+    console.error('FIGMA_TOKEN is missing. Copy .env.example to .env and add your token.')
+    process.exit(1)
+  }
+
+  const fileKey = opt('file-key') || process.env.FIGMA_FILE_KEY
+  const nodeId = opt('node') || process.env.FIGMA_NODE
+  if (!fileKey || !nodeId) {
+    console.error('--file-key and --node are required (or set FIGMA_FILE_KEY / FIGMA_NODE in .env)')
+    process.exit(1)
+  }
+
+  const targetKey = opt('target') || 'generic'
+  if (!targets[targetKey]) {
+    console.error(`Invalid --target "${targetKey}". Valid values: ${targetNames.join(', ')}`)
+    process.exit(1)
+  }
+
+  const cacheDir = opt('cache') || defaultCache
+  const specsDir = opt('out') || defaultSpecs
+  const tokensPath = opt('tokens') || null
+
+  const section = await getSection({ token, fileKey, nodeId, cacheDir, refresh: flag('refresh') })
+  const frames = topFrames(section)
+
+  if (flag('list')) {
+    for (const f of frames) {
+      const b = f.absoluteBoundingBox || {}
+      console.log(`${f.id.padEnd(14)} ${f.name}  ${Math.round(b.width)}x${Math.round(b.height)}`)
+    }
+    return
+  }
+
+  if (!flag('extract')) {
+    console.error('Use --list or --extract. Run with --help for usage.')
+    process.exit(1)
+  }
+
+  let selected
+  if (flag('all')) {
+    selected = frames
+  } else if (opt('ids')) {
+    const ids = opt('ids').split(',').map(s => s.trim())
+    selected = frames.filter(f => ids.includes(f.id))
+  } else if (opt('frames')) {
+    const names = opt('frames').split(',').map(s => s.trim().toLowerCase())
+    selected = frames.filter(f => names.some(n => f.name.toLowerCase().includes(n)))
+  } else {
+    console.error('Pass --frames "name1,name2", --ids id1,id2, or --all')
+    process.exit(1)
+  }
+
+  if (!selected.length) {
+    console.error('No frames matched. Run --list to see available frames.')
+    process.exit(1)
+  }
+
+  mkdirSync(specsDir, { recursive: true })
+  const tokens = loadTokens(tokensPath)
+  const used = new Set()
+  const frameSlugs = new Map()
+
+  for (const frame of selected) {
+    const spec = parseFrame(frame, tokens)
+    let slug = slugify(frame.name)
+    if (used.has(slug)) slug += `-${frame.id.replace(':', '-')}`
+    used.add(slug)
+    frameSlugs.set(frame.id, slug)
+
+    if (flag('agent-pack')) {
+      const packDir = join(specsDir, slug)
+      mkdirSync(packDir, { recursive: true })
+      writeAgentPack(packDir, spec, targetKey)
+      console.log(`✓ ${frame.name} → ${slug}/ (agent pack)`)
+    } else {
+      writeFileSync(join(specsDir, `${slug}.json`), JSON.stringify(spec, null, 2) + '\n')
+      console.log(`✓ ${frame.name} → ${slug}.json`)
+    }
+  }
+
+  if (flag('images')) {
+    const imgDir = join(specsDir, 'img')
+    mkdirSync(imgDir, { recursive: true })
+    const ids = selected.map(f => f.id).join(',')
+    const { images } = await api(token, `/v1/images/${fileKey}?ids=${encodeURIComponent(ids)}&format=png&scale=2`)
+    for (const frame of selected) {
+      const url = images[frame.id]
+      if (!url) { console.warn(`No image for ${frame.name}`); continue }
+      const buf = Buffer.from(await (await fetch(url)).arrayBuffer())
+      const slug = frameSlugs.get(frame.id)
+      writeFileSync(join(imgDir, `${slug}.png`), buf)
+      console.log(`✓ img ${frame.name}`)
+    }
+  }
+}
+
+main().catch(e => { console.error(e.message); process.exit(1) })

package/src/parse.mjs

@@ -0,0 +1,132 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+/**
+ * Load hex → token map from an optional SCSS variables file.
+ * Matches lines like `$dm-bg: #121212;`
+ */
+export function loadTokens (scssPath) {
+  const map = {}
+  if (!scssPath || !existsSync(scssPath)) return map
+
+  const src = readFileSync(scssPath, 'utf8')
+  for (const [, name, hex] of src.matchAll(/(\$[\w-]+)\s*:\s*(#[0-9a-fA-F]{3,8})\b/g)) {
+    const h = normalizeHex(hex)
+    if (!(h in map)) map[h] = name
+  }
+  return map
+}
+
+function normalizeHex (hex) {
+  let h = hex.slice(1).toUpperCase()
+  if (h.length === 3) h = h.split('').map(c => c + c).join('')
+  return '#' + h
+}
+
+function toHex (color) {
+  const c = v => Math.round(v * 255).toString(16).padStart(2, '0').toUpperCase()
+  return `#${c(color.r)}${c(color.g)}${c(color.b)}`
+}
+
+function solidFill (node) {
+  const f = (node.fills || []).find(f => f.type === 'SOLID' && f.visible !== false)
+  return f ? toHex(f.color) : null
+}
+
+function withToken (hex, tokens) {
+  if (!hex) return null
+  const out = { hex }
+  if (tokens[hex]) out.tokenMatch = tokens[hex]
+  return out
+}
+
+function walk (node, fn) {
+  fn(node)
+  for (const child of node.children || []) walk(child, fn)
+}
+
+function firstText (node) {
+  let found = null
+  walk(node, n => { if (!found && n.type === 'TEXT') found = n })
+  return found
+}
+
+export function parseFrame (frame, tokens) {
+  const spec = {
+    name: frame.name,
+    nodeId: frame.id,
+    size: { width: frame.absoluteBoundingBox?.width, height: frame.absoluteBoundingBox?.height },
+    background: withToken(solidFill(frame), tokens),
+    texts: [],
+    buttons: [],
+    bars: []
+  }
+  const origin = frame.absoluteBoundingBox || { x: 0, y: 0 }
+  const box = n => n.absoluteBoundingBox && {
+    x: Math.round(n.absoluteBoundingBox.x - origin.x),
+    y: Math.round(n.absoluteBoundingBox.y - origin.y),
+    width: Math.round(n.absoluteBoundingBox.width),
+    height: Math.round(n.absoluteBoundingBox.height)
+  }
+  const claimed = new Set()
+
+  walk(frame, node => {
+    if (node === frame || node.visible === false) return
+
+    const isNamedButton = node.type === 'INSTANCE' && /bot[aã]o|button/i.test(node.name)
+    const isDrawnButton = node.type === 'RECTANGLE' && (node.cornerRadius ?? 0) >= 16 &&
+      node.absoluteBoundingBox?.height >= 30 && node.absoluteBoundingBox?.height <= 80
+    if (isNamedButton || isDrawnButton) {
+      const label = isNamedButton ? firstText(node) : null
+      if (label) claimed.add(label.id)
+      spec.buttons.push({
+        name: node.name,
+        label: label?.characters ?? null,
+        fill: withToken(solidFill(node) || deepFill(node), tokens),
+        radius: node.cornerRadius ?? null,
+        box: box(node)
+      })
+      return
+    }
+
+    if (node.type === 'RECTANGLE' && node.absoluteBoundingBox?.height < 8 && (node.cornerRadius ?? 0) > 0) {
+      spec.bars.push({ name: node.name, color: withToken(solidFill(node), tokens), radius: node.cornerRadius, box: box(node) })
+    }
+  })
+
+  walk(frame, node => {
+    if (node.type !== 'TEXT' || node.visible === false || claimed.has(node.id)) return
+    const s = node.style || {}
+    spec.texts.push({
+      text: node.characters,
+      fontFamily: s.fontFamily,
+      fontSize: s.fontSize,
+      fontWeight: s.fontWeight,
+      lineHeight: s.lineHeightPx ? Math.round(s.lineHeightPx * 100) / 100 : undefined,
+      color: withToken(solidFill(node), tokens),
+      box: box(node)
+    })
+  })
+
+  if (spec.bars.length === 2 && Math.abs(spec.bars[0].box.y - spec.bars[1].box.y) <= 2) {
+    const [a, b] = spec.bars
+    const [track, fill] = a.box.width >= b.box.width ? [a, b] : [b, a]
+    spec.progress = { track: track.color, fill: fill.color, radius: track.radius, height: track.box.height }
+    delete spec.bars
+  } else if (!spec.bars.length) {
+    delete spec.bars
+  }
+  if (!spec.buttons.length) delete spec.buttons
+
+  return spec
+}
+
+function deepFill (node) {
+  let hex = null
+  walk(node, n => { if (!hex && n.type !== 'TEXT') hex = solidFill(n) })
+  return hex
+}
+
+export function slugify (name) {
+  return name.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+}

package/src/targets.mjs

@@ -0,0 +1,135 @@
+export const targets = {
+  generic: {
+    label: 'Generic (framework-agnostic)',
+    guidance: [
+      'Use the target project\'s existing component library and styling conventions.',
+      'Prefer design tokens (tokenMatch) over raw hex values when present.',
+      'Build a responsive layout; do not rely on absolute positioning from box coordinates unless the project already uses that pattern.'
+    ]
+  },
+  react: {
+    label: 'React + CSS Modules',
+    guidance: [
+      'Create a functional component with a named export matching the screen name.',
+      'Use the project\'s existing styling approach (CSS Modules, Tailwind, or styled-components).',
+      'Map buttons to the project\'s Button component or a styled <button>.',
+      'Use CSS custom properties or theme tokens for colors when tokenMatch is present.',
+      'For progress bars, use a div-based track/fill or the project\'s existing Progress component.'
+    ],
+    skeleton: `// ScreenName.tsx
+export function ScreenName() {
+  return (
+    <div className="screen">
+      {/* background: use tokenMatch or hex from spec.background */}
+      <h1>{/* text from spec.texts[0] */}</h1>
+      <button>{/* label from spec.buttons[0] */}</button>
+    </div>
+  )
+}`
+  },
+  vue: {
+    label: 'Vue 3 (Composition API)',
+    guidance: [
+      'Create a single-file component (.vue) using <script setup>.',
+      'Use scoped CSS or the project\'s existing SCSS variables for colors.',
+      'Prefer tokenMatch SCSS variables over raw hex values.',
+      'Map buttons to native <button> or the project\'s existing button component.',
+      'Use flexbox/grid for layout rather than absolute positioning from box coordinates.'
+    ],
+    skeleton: `<script setup>
+// props/emits as needed by the project
+</script>
+
+<template>
+  <div class="screen">
+    <!-- background: use tokenMatch or hex from spec.background -->
+    <h1><!-- text from spec.texts[0] --></h1>
+    <button><!-- label from spec.buttons[0] --></button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* use tokenMatch variables from the project */
+</style>`
+  },
+  quasar: {
+    label: 'Quasar Framework (Vue 3)',
+    guidance: [
+      'Create a page or component using <script setup> and Quasar components.',
+      'Use q-btn for buttons; match label, color, and border-radius from the spec.',
+      'Use q-linear-progress for progress bars when spec.progress is present.',
+      'Apply colors via SCSS variables from quasar.variables.scss (prefer tokenMatch).',
+      'Use q-page for full-screen layouts and Quasar spacing utilities where appropriate.'
+    ],
+    skeleton: `<script setup>
+// import composables as needed
+</script>
+
+<template>
+  <q-page class="screen">
+    <!-- :style or class using tokenMatch from spec.background -->
+    <div class="text-h5"><!-- spec.texts[0].text --></div>
+    <q-btn unelevated rounded><!-- spec.buttons[0].label --></q-btn>
+  </q-page>
+</template>
+
+<style scoped lang="scss">
+@use 'src/css/quasar.variables' as *;
+</style>`
+  },
+  'react-native': {
+    label: 'React Native',
+    guidance: [
+      'Create a functional screen component using StyleSheet.create for styles.',
+      'Use Pressable or TouchableOpacity for buttons.',
+      'Box coordinates in the spec are px at the design width — scale proportionally to device width.',
+      'Map hex colors to StyleSheet color values or theme constants.',
+      'Use a View-based progress bar (track + fill) when spec.progress is present.'
+    ],
+    skeleton: `import { View, Text, Pressable, StyleSheet } from 'react-native'
+
+export function ScreenName() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>{/* spec.texts[0].text */}</Text>
+      <Pressable style={styles.button}>
+        <Text>{/* spec.buttons[0].label */}</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1 /* backgroundColor from spec.background */ },
+  title: { /* fontSize, fontWeight from spec.texts[0] */ },
+  button: { /* borderRadius, backgroundColor from spec.buttons[0] */ }
+})`
+  },
+  swiftui: {
+    label: 'SwiftUI',
+    guidance: [
+      'Create a SwiftUI View struct matching the screen name.',
+      'Use Button for CTAs and Text for copy with font modifiers from the spec.',
+      'Use ProgressView or a custom Capsule-based bar when spec.progress is present.',
+      'Map hex colors to Color(hex:) extensions or asset catalog color sets.',
+      'Prefer VStack/HStack/ZStack over absolute positioning from box coordinates.'
+    ],
+    skeleton: `import SwiftUI
+
+struct ScreenName: View {
+  var body: some View {
+    ZStack {
+      // background: Color from spec.background hex or asset
+      VStack {
+        Text(/* spec.texts[0].text */)
+          .font(.system(size: /* spec.texts[0].fontSize */))
+        Button(/* spec.buttons[0].label */) { }
+          .buttonStyle(/* match radius and fill */)
+      }
+    }
+  }
+}`
+  }
+}
+
+export const targetNames = Object.keys(targets)