Spec Layer
Spec Layer is a Figma plugin that turns components, variables, and styles into
design-system documentation—on the canvas, on the clipboard, or pulled straight
into your repository as structured context for an AI coding agent.
Open in Figma ·
Visit spec-layer.com
What it does
- Component documentation. Generate measurements, anatomy, properties,
states, variants, tokens, and theming in a connected canvas frame.
- Foundation documentation. Turn variable collections, text styles, and
effect styles into readable references: number tokens drawn to scale, text
styles set as specimens, effect styles cast on a card, and any code syntax
a token defines in Figma beside it.
- Copy for AI. Copy a component as a compact YAML brief or a readable
Markdown page, or a Foundation as a DTCG resolver document, with the facts
an implementation agent needs. Foundation and component copies retain their
canonical v5 content hashes; component copies include only the exact token
and style dependency closure they use.
- Library and updates. Track generated documents, detect source changes, and
rebuild outdated frames in one click.
- Publish and pull. Publish a library from the plugin, then pull it into a
repository with the
spec-layer CLI, so a coding
agent reads the same component and token facts your designers see in Figma.
Every changed publish gets a semantic version, and the plugin can also
download the library as a self-contained agent skill with no publish at all.
- Optional AI writing. Draft an overview, when to use it, do's and don'ts,
and interaction notes for a component, and a line per colour group plus a
collection overview for a Foundation. Pro writes with Claude Sonnet 5.5 and the
free plan with Claude Haiku 4.5.
Extraction, rendering, drift detection, and Copy for AI are deterministic. Only
AI-written prose uses a model.
Free and Pro
Every documentation feature is free and works without an account. Publishing is
too, within a free allowance: one Figma file as a library and 10 changed
publishes a month. Pro raises that to 10 files with no fixed update cap.
Pulling one only needs the CLI and a pull key.
| Free | Pro |
|---|
| Canvas documentation and updates | Yes | Yes |
| Copy for AI | Yes | Yes |
| Publish a library for the CLI | 1 file, 10 updates a month | 10 files, unlimited updates |
| AI writing | 20 uses in the first month, then 10/month | No fixed monthly cap for normal individual use |
| Priority support | — | Yes |
Pro costs $7.99/month or $79.99/year. Purchase it on
spec-layer.com, then paste the emailed license key into
the plugin's License screen. Lemon Squeezy handles payments as merchant of
record.
A generation is counted only after a successful AI response. Failed calls do
not count, and retrying an unchanged request within the 24-hour cache window
does not use another generation. Pro is subject to the published fair-use
policy for automated, shared, or exceptionally high-volume use.
Privacy
Deterministic work stays inside Figma. Canvas documentation and clipboard
context (YAML, Markdown, or DTCG JSON) are produced locally.
When you request AI writing, the plugin sends a structured component summary
and, when it fits the export limits, a rendered image through the Spec Layer
proxy to Anthropic. If the image cannot be exported, the request continues with
text only. For a Foundation it sends token names and resolved values, and no
image. You do not provide an API key.
Publishing a library is the one feature that stores your content. The bundle
you publish is held on the proxy so the CLI can fetch it, and pulling it
requires a bearer pull key that only you hold: the proxy stores the key's
sha256 digest, never the key itself, so rotating it invalidates every command
already handed out. Publishing is explicit and per-file. Nothing leaves Figma
until you choose it.
The proxy never logs prompts, rendered images, generated text, or raw license
keys. Read the published Privacy Policy,
Security overview, and security policy
for the complete data flow and reporting instructions.
Install
Install the plugin from its
Figma Community listing.
To run a local build, you need Node.js 22 or newer, npm 10 or newer, and Figma
desktop:
npm ci
npm run build:plugin
In Figma, choose Plugins → Development → Import plugin from manifest, then
select packages/plugin/manifest.json.
Local builds use the production proxy at https://api.spec-layer.com. Keep the
plugin source and manifest network allowlist aligned when changing that host.
The CLI
Publishing a library from the plugin's Publish screen shows a setup command
to run once in your repository:
npx spec-layer setup --id lib_... --key sl_...
That records the library id, stores the key in a gitignored
speclayer.local.json, and writes .speclayer/, component-specs/, and, for
a web project, tokens/, so every later command needs no flags. npx needs no install step of its own, though a repo that pulls on a
schedule should pin the CLI as a dev dependency. The CLI is delivery only: it
never talks to Figma, re-derives nothing, and has no runtime dependencies.
| Command | What it does | Network |
|---|
setup --id lib_... --key sl_... | Records the id, stores the key, then pulls. The command the plugin copies. Needs 0.3.0 or later, or 0.10.0 when it carries --component-format md. | yes |
init --id lib_... | Writes speclayer.json only. No key. | no |
pull | Fetches the library and writes it into the output directory, default .speclayer/. | yes |
status | Checks freshness without writing. Exits 2 when the local copy is behind. | yes |
list | Lists every artifact in the last pull, with its file path. | no |
show foundation / show component NAME | Prints the Foundation's DTCG resolver document or one component's AI YAML or Markdown page, or the canonical JSON with --canonical. | no |
tools [--json] | Lists every command with what it reaches, needs, and writes. | no |
skill [--install] [--agent HOST] [--platform P] | Prints a guide for a coding agent, adapted to the repository's stack and the last pull; --install writes it for Claude Code, Cursor, Copilot, Windsurf, Gemini, or AGENTS.md. Needs 0.5.0 or later. | no |
Every command but tools takes --out DIR to point at a different output directory, and
the three that reach the network also take --api URL to override the API
origin. setup, init and pull additionally take a selection (--only foundation, --only components, or repeatable
--component NAME) to narrow what lands on disk. The pull key resolves from
--key, then SPEC_LAYER_KEY, then speclayer.local.json, and --key - reads
it from stdin so it never sits in shell history. See the
CLI README for the full flag reference, partial pulls,
what pull writes, and how the agent guide is built.
Development
Install dependencies and run the complete local quality gate:
npm ci
npm run check
npm run check runs linting, TypeScript checks, the NUL-byte scan, tests, the
plugin and CLI builds, browser-sandbox validation, and a dry-run proxy bundle.
Useful individual commands:
npm run lint
npm run typecheck
npm test
npm run test:coverage
npm run build:plugin
npm run build:cli
npm run check:proxy-dry-run
npm run audit
CI adds coverage thresholds and a full dependency audit on pushes to main and
on pull requests.
Architecture
Figma node
→ plugin serializer
→ plain IntermediateSpec data
├─→ canvas documentation + connected Library entry
├─→ YAML, Markdown, or DTCG context on the clipboard
├─→ published library bundle → proxy → spec-layer CLI → your repository
└─→ optional AI-writing proxy → Anthropic
The plugin owns all Figma API access. The extractor receives plain JSON and has
no Figma runtime dependency, which keeps the transformation layer testable with
synthetic fixtures. The Cloudflare Worker owns the Anthropic credential, quota
enforcement, Lemon Squeezy license validation, and published library bundles.
The CLI parses a bundle through the same extractor parser the proxy uses, so
neither end carries a second interpretation of the format.
See ARCHITECTURE.md for the full data flow, storage model, and
trust boundaries.
Repository layout
packages/plugin/ Figma serializer, canvas renderer, and plugin UI
packages/extractor/ deterministic extraction; YAML, Markdown, and DTCG context
packages/proxy/ Cloudflare Worker for AI writing, quotas, licensing, libraries
packages/cli/ spec-layer CLI: pulls a published library into a repo
packages/brand/ shared design tokens, identity assets, and the contrast gate
The marketing site, the product specs, plans, and reviews, and the internal
capture library are maintained in a separate private repository. The canonical
JSON Schemas ship here, in packages/extractor/src/v5/schema/, and are
published at spec-layer.com/schemas/.
Release history is in CHANGELOG.md.
Contributing
Read CONTRIBUTING.md, SECURITY.md, and
CODE_OF_CONDUCT.md before opening a change. Use only
synthetic or explicitly publishable fixtures, and never commit credentials,
private Figma URLs, customer data, or proprietary component exports.
License
Spec Layer is available under the MIT License.
