Specs - Prompt for Design to Code for Claude Code & Codex

About this plugin

What is Figma Specs?Figma Specs is an open-source plugin that converts any selected frame, component, or instance into two outputs:Visual spec frames placed directly on the canvas for human review.Compact structured YAML optimized for AI coding agents like Claude Code, OpenAI Codex, Cursor, and similar tools.The goal is simple: give your coding agent a clean, token-efficient brief instead of a noisy wall of raw layer data.Why use it?Design handoff to AI agents typically sends too much raw context. That inflates token usage, increases retries, and slows down delivery.Teams using Figma Specs commonly report moving from 80k+ tokens of raw handoff data down to roughly ~20k tokens of structured specs, depending on screen complexity. Less noise means fewer retries, lower cost, and faster builds.What does the plugin generate?Anatomy — full tree of elements, nesting, and relationships.Layout — auto-layout direction, spacing, alignment, sizing modes.Properties & Variants — variant dimensions, component properties, and behavior deltas.Inventory — colors, typography, effects used across the selection.Variables / Tokens — resolved Figma variables and design token values.Agent Payload — chunked YAML with resolved_tokens, repeat dedup, and compact schema.Agent Rules Snippet — ready-to-paste instructions for CLAUDE.md or AGENTS.md files.How it worksSelect a frame, component, or instance in Figma.Run the plugin and choose your output sections (anatomy, layout, properties, data, etc.).Generate — the plugin creates annotated spec frames on your canvas and prepares agent-ready YAML.Copy AI Specs — one click copies the structured YAML payload with implementation instructions, anatomy tree, and resolved tokens.Paste into your coding agent prompt (Claude Code, Codex, Cursor, etc.) and build.Key featuresToken-efficient output — compact YAML schema (v11 through v14) with progressive optimizations that keep payloads small.Instance dedup — fingerprints repeated instances and stores only the template plus meaningful diffs, avoiding duplicate noise.Resolved tokens — maps design token names to actual values (hex colors, font names) so agents don't need to look them up.Framework-aware instructions — select your target framework (React, Next.js, Flutter, Vue, Svelte, React Native, HTML/CSS) and the generated prompt includes framework-specific build guidance.Visual QA step — generated instructions include a pixel-comparison QA step with specific dimensions so agents self-verify against the design.Complexity-aware limits — automatically adjusts anatomy, layout, and data caps based on selection complexity (standard / large / enterprise tiers).Artwork preview — renders a visual preview of the selected component directly in the spec frame, with auto-scale fallback for large screens.Side-by-side anatomy + layout — anatomy and layout sections render next to each other for easier review.Multi-column layout — optionally generate specs in 2-4 column grids for wide components.Supported frameworksThe Copy AI Specs output includes framework-specific implementation instructions for:Next.jsReactFlutterVueSvelteReact NativeHTML/CSSAuto-detect (reads package.json)Who is this for?Designers and developers working together with AI coding tools — Claude Code, OpenAI Codex, Cursor, Windsurf, and similar AI-assisted development workflows.SetupInstall the plugin from Figma Community.Select any frame, component, or instance.Open the plugin and pick your sections.Click Generate to create canvas specs, or Copy AI Specs to copy the agent-ready YAML.Optionally, go to the Learn tab to copy a CLAUDE.md / AGENTS.md rules snippet into your project so your coding agent knows how to consume specs output.No migration or design system setup required. Works with any existing Figma file.Privacy & dataThe plugin runs entirely within Figma's sandbox.No network access — the manifest explicitly sets allowedDomains: ["none"].No data leaves your Figma file. No third-party accounts or services required.Open source — inspect the full implementation at the GitHub repo linked below.Open sourceThe full source code, tests (289+ unit tests), and architecture docs are available on GitHub. Every claim is auditable.LinksGitHub: https://github.com/antivirusakash/figma-ui-specs-generatorWebsite: https://figmaspecs.devCreated by Akash Solanki — https://www.linkedin.com/in/antivirusakash/