Skip to content
Code Generation
Skill

/figma-canvas-authoring

Create or update native, editable Figma designs with TemPad Dev MCP: screens, flows, components, and requested local design-system resources, including on an empty canvas. Use for Design in Figma work, not Figma-to-code, critique without edits, or raw Plugin API automation.

From plugin
tempad-dev
4992 skills1 MCP
Install
$ npx -y skills add ecomfe/tempad-dev --skill figma-canvas-authoring --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/figma-canvas-authoring

Context preview

The summary Claude sees to decide when to auto-load this skill.

Create or update native, editable Figma designs with TemPad Dev MCP: screens, flows, components, and requested local design-system resources, including on an empty canvas. Use for Design in Figma work, not Figma-to-code, critique without edits, or raw Plugin API automation.

SKILL.md

figma-canvas-authoring.SKILL.md
name: figma-canvas-authoring
description: >-
  Create or update native, editable Figma designs with TemPad Dev MCP: screens,
  flows, components, and requested local design-system resources, including on
  an empty canvas. Use for Design in Figma work, not Figma-to-code, critique
  without edits, or raw Plugin API automation.

Design in Figma

Deliver the smallest complete native Figma result that serves the user's situation. Keep the working experience in view as you research, compose, and repair. A successful tool call establishes a document change; the rendered result and its editable structure establish whether that change served the task.

Establish the task

Use the user's exact target and constraints. For an existing design, inspect `get_code` and its pixels before changing the composition; use `get_structure` for hierarchy, geometry, stable keys, or selected native facts. Write to a known page directly. Create or activate a page only when the task calls for it. Infer low-consequence gaps; ask when a missing decision would materially change the result. Keep unrelated account, filesystem, task, and page metadata out of product identity and content.

Require an editable Figma Design file and the intended tab's active MCP connection. Use the host's TemPad MCP tools for all canvas reads and writes. If unavailable, report the integration problem and stop. Do not launch the CLI, recreate its transport, use browser automation to set up the canvas, or emit raw Plugin API operations. Research and asset acquisition use the host's appropriate tools; website research uses the in-app browser when available unless the user selected another browser.

For new design work, call `begin_design` before research or canvas work with a short task title and a fresh UUID `requestId`; reuse that UUID only to retry the same begin. Carry the returned `taskId` on related TemPad tool calls. The runtime handles status and placement feedback: do not report progress, send heartbeats, or choose coordinates for a placeholder. Use `list_design_sessions` when the intended Figma target is unclear, then pass its exact `sessionId` to `begin_design`. Pausing a turn preserves the design task. Follow-up comments continue the same task, including after a completed pass while its review remains open. After completion, pause, or lease expiry, use `resume_design` with its latest `epoch`, carry the returned epoch as `taskEpoch`, and reread the affected canvas with `get_structure` or `get_code` before writing. Use `get_design_task` only when recovery needs the current state or epoch. Never replay a stale write. Stop in TemPad Dev permanently cancels the current task after any running operation settles. Never resume that cancelled task or automatically replace it. If further design work is necessary or the user requests it, explicitly call `begin_design` with a fresh requestId. No separate Figma unlock or new user turn is required. Done closes the review; a closed or replaced task cannot resume. Do not automatically begin a replacement for comments on such a task. Element feedback arrives as a numbered batch. Each item retains its file, page, and node identity from draft creation. Reread every target before applying the batch; do not substitute the current selection. Supported hosts receive submitted feedback through native conversation messages. Do not poll for it or set up a helper process or host control endpoint.

Begin without waiting to choose a canvas location. Once an existing design region is known, use `set_design_anchor` with its exact Frame node ID and `taskId`. Otherwise the first created top-level Frame anchors automatically. The region stays stable across reads and writes; call this tool again only to explicitly change design regions.

Ground and compose

For net-new or materially redesigned interfaces without an established system, read [style-grounding.md](references/style-grounding.md) and inspect relevant real product screens or a permitted implementation before the first Canvas write. The evidence must expose the interface relationships informing the new work. Search snippets, URLs, failed retrievals, and generated concepts do not establish a precedent. Subject imagery establishes its depicted content, not its surrounding application's design. Try another permitted source when retrieval fails; if none is inspectable, disclose the gap and stop. Supplied source pixels or implementation can satisfy this boundary; mechanical edits do not require unrelated research.

Resolve what the person needs to recognize or change, which content and states carry that work, and how the interface makes their consequences perceptible. Choose the screen or flow, visual language, density, and scrolling model from that situation. Use [visual-composition.md](references/visual-composition.md) when forming or reconsidering a composition. Familiar structures and distinctive ones both need a reason in the task. Research informs an independent solution; it does not authorize copying a composition or placing reference pixels on the canvas unless the user requested that treatment.

When selecting or changing fonts, or when script coverage is uncertain, read [typefaces.md](references/typefaces.md) to resolve candidates and native identities.

Choose representations by their role in the work. Once an image, icon, diagram, or visualization matters to the direction, read [visual-assets.md](references/visual-assets.md) and its selected branch. Do not silently replace the chosen content or medium to simplify sourcing or markup. For content-bearing graphics, preserve meaningful marks and editable relationships with native shapes, vectors, text, and groups; styled FRAME lookalikes do not acquire drawing semantics. Read [document-geometry.md](references/document-geometry.md) for that construction. Ordinary UI panels, controls, backgrounds, and separators remain Canvas HTML.

Choose resources from the task, not repetition alone:

  • **
Read more
Ships withtempad-dev

Open handoff tooling for Figma

Get the whole plugin
Stats
499
Stars
39
Forks
Active
Maintenance
TypeScript
Language
MIT
License
1d ago
Last commit
2y ago
Created

Repo: ecomfe/tempad-dev

Other skills on tempad-dev.