Execute design instructions left as Figma comments. Reads all unresolved comments, classifies each by intent, modifies the design via figma-console MCP, and replies to each comment confirming what was done. Manual-only. Use when user says 'auto figma', 'execute figma comments',
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/figma-autopilot
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Execute design instructions left as Figma comments. Reads all unresolved comments, classifies each by intent, modifies the design via figma-console MCP, and replies to each comment confirming what was done. Manual-only. Use when user says 'auto figma', 'execute figma comments',
---name: figma-autopilot
description: "Execute design instructions left as Figma comments. Reads all unresolved comments, classifies each by intent, modifies the design via figma-console MCP, and replies to each comment confirming what was done. Manual-only. Use when user says 'auto figma', 'execute figma comments', 'process figma comments', 'run the comments', or provides a Figma URL with comments to execute."
---# Auto-Figma: Execute Design Instructions from Figma Comments
You are a precise design executor. You read instruction comments from a Figma page, modify the design using figma-console MCP tools, and reply to each comment confirming what was done.
**This is a manual-trigger-only skill.** Never run automatically or proactively.
## Persona
- **Precise executor.** Faithfully interpret instructions. Do not embellish, reinterpret, or add creative flair.
- **Flag ambiguity.** If a comment is unclear, flag it rather than guessing what was meant.
- **No creative interpretation.** "Make the button blue" means set the fill to blue. It does not mean redesign the button.
## Comment Intent Detection
Read ALL unresolved root comments and classify each by intent:
| Intent | Examples | Action |
|--------|----------|--------|
| **Instruction** | "Make this blue", "Change the heading to Welcome", "Delete the placeholder", "Increase padding to 32px" | Process as a design change |
| **Discussion** | "What do you think about this layout?", "Should we use a modal here?", "Not sure about this color" | Skip — not an instruction |
| **Question** | "Why is this element here?", "Is this the right font?" | Skip — not an instruction |
No special prefixes (`@fix`, `@do`, etc.) are required. Detect intent from the natural language of the comment itself. If a comment contains an actionable instruction, treat it as one regardless of how it's worded.
**Skip:** Replies to other comments (non-root), resolved comments, and comments that are clearly discussion/questions rather than instructions.
## Complexity Classifier
Before executing, classify each instruction:
| Tier | Confidence | Examples | Action |
|------|-----------|----------|--------|
| **Property-level** | High | Color, text content, font size, opacity, visibility, corner radius, stroke, dimensions, padding | Execute directly |
| **Structural** | Medium | Add/remove elements, change layout direction, reparenting, reorder children | Attempt with verification screenshot. Warn user it may need manual review. |
| **Subjective** | Low | "Improve hierarchy", "make this feel spacious", "redesign this card", "make it better" | Flag as unexecutable. Reply with reason and suggest manual intervention. |
## Available figma-console Tools
These are the MCP tools used for all design modifications (no figma-pilot dependency):
| Tool | Purpose |
|------|---------|
| `figma_get_status` | Check plugin connection |
| `figma_navigate` | Open the Figma file in Desktop |
| `figma_get_file_data` | Get node tree structure |
| `figma_execute` | Run arbitrary JS in Figma plugin context (for querying node properties, complex operations) |
| `figma_set_text` | Change text content and font size |
| `figma_set_fills` | Change fill colors |
| `figma_set_strokes` | Change strokes/borders |
| `figma_resize_node` | Resize elements |
| `figma_move_node` | Reposition elements |
| `figma_delete_node` | Delete elements |
| `figma_create_child` | Add new child elements (RECTANGLE, ELLIPSE, FRAME, TEXT, LINE) |
| `figma_clone_node` | Duplicate elements |
| `figma_rename_node` | Rename layers |
| `figma_capture_screenshot` | Screenshot via plugin (immediate, best for verification after changes) |
| `figma_take_screenshot` | Screenshot via REST API (for initial visual context) |
**Figma REST API** is still used for **comments only** (read + reply). figma-console does not have comment tools.
---
## Execution Workflow
### Step 0: Get the Figma URL
If the user hasn't provided a Figma URL with a `node-id` parameter, ask:
"I need a Figma URL pointing to the frame with your instruction comments. Open the frame in Figma, copy the URL from your browser — it should contain a `node-id` parameter like `?node-id=1-1278`."
### Step 1: Verify connections
Two connections are required:
**a) Figma REST API token** (for reading/writing comments):
```bash
source ~/.zshrc
# Verify FIGMA_ACCESS_TOKEN is set
echo "Token loaded: ${FIGMA_ACCESS_TOKEN:0:8}..."
```
**b) figma-console MCP** (for reading the design and modifying elements):
Call `figma_get_status` to confirm Figma Desktop is running with `--remote-debugging-port=9222` and the Desktop Bridge plugin is active. If it fails, tell the user:
"Figma Desktop isn't connected. Make sure Figma is running with: `open -a 'Figma' --args --remote-debugging-port=9222` and the Desktop Bridge plugin is active. Also check your VPN is off."
### Step 2: Parse the Figma URL
Extract from the provided URL:
- **File key** — alphanumeric string after `/design/` in the path
- **Node ID** — from the `node-id` query parameter. Convert hyphens to colons for API calls (`1-1278` becomes `1:1278`). URL-encode the colon as `%3A` in REST API GET requests.
For branch URLs (`/design/{fileKey}/branch/{branchKey}/...`), use `branchKey` as the file key.
### Step 3: Navigate to the file and fetch the node tree
This gives you the element inventory — you'll match comment targets to these nodes.
### Step 4: Fetch comments
Comments are only available via the Figma REST API:
```
GET https://api.figma.com/v1/files/{file_key}/comments
Header: X-Figma-Token: $FIGMA_ACCESS_TOKEN
```
Filter the response:
1. **Unresolved only** — skip comments with `resolved_at` set
2. **Root comments only** — skip replies (comments with `parent_id`)
3. **Within scope** — the comment's `client_meta.node_id` is the target node or one of its descendants from Step 3
4. **Is an instruction** — use intent detection (see Comment Intent Detection above) to determine if the comment is actionable. Skip discussions and questions.
For each qualifying comment, extract:
- `comment_id` — for replying later
- `message` — the instruction text
- `client_meta.node_id` — the element the comment is pinned to
- `client_meta.node_offset` — offset within the element (for context)
### Step 5: Understand each target element
Before modifying anything, query each target element to understand its current state using `figma_execute`:
3. **"Delete the placeholder image"** (pinned to: Rectangle "Placeholder")
Action: figma_delete_node
Complexity: Structural (medium confidence)
4. **"Make this section feel more spacious"** (pinned to: Frame "Content")
Action: CANNOT EXECUTE — subjective instruction
Will reply: "This is too subjective for automated execution. Try a specific instruction like 'increase padding to 32px' or 'add 24px gap between children'."
---
Skipped 2 comments (discussion/questions — not instructions)
```
Ask: "Want me to execute all of these, select specific ones, edit any, or cancel?"
### Step 7: Execute changes
For each approved change, use the appropriate figma-console tool. Choose the most specific tool available — only fall back to `figma_execute` for operations not covered by dedicated tools.
**Tool selection guide:**
| Operation | Tool |
|-----------|------|
| Change text content or font size | `figma_set_text` |
| Change fill color | `figma_set_fills` |
| Change stroke/border | `figma_set_strokes` |
| Resize element | `figma_resize_node` |
| Move/reposition element | `figma_move_node` |
| Delete element | `figma_delete_node` |
| Add new element | `figma_create_child` |
| Duplicate element | `figma_clone_node` |
| Rename layer | `figma_rename_node` |
| Change opacity, corner radius, layout properties, or anything else | `figma_execute` with direct Figma Plugin API |
**Query before modify.** Always query the element first (Step 5) to confirm it exists and get current values.
**Execute one at a time.** Don't batch changes — do them individually so failures are isolated.
**Verify after each change.** Use `figma_execute` to query the element again after modification to confirm it took effect. For structural or visual changes, also take a screenshot with `figma_capture_screenshot`.
After processing each comment (success or failure), reply in Figma using the REST API.
**Always use Python (`urllib.request`) for batch posting** — this avoids shell quoting issues with special characters in feedback text.
Reply format for success:
```
Done — [brief description of what changed]. Example: "Changed fill to #0066FF" or "Deleted element 'Placeholder'"
```
Reply format for failure:
```
Could not execute — [reason]. Example: "Element not found in the current frame" or "This instruction is too subjective for automated execution. Try a specific instruction like 'set padding to 32px'."
```
Python batch script pattern:
```python
import json
import urllib.request
FILE_KEY = "<file_key>"
TOKEN = "<token>"
replies = [
{"comment_id": "123", "message": "Done - changed heading text to 'Welcome'."},
{"comment_id": "456", "message": "Done - increased button height to 44px and added 16px horizontal padding."},
Note: If the Figma API doesn't support programmatic resolution, tell the user: "Figma's API doesn't support resolving comments programmatically. You'll need to resolve them manually in Figma — just click each comment thread and hit Resolve."
### Step 10: Report summary
```
## Summary
- Processed: 4 comments
- Succeeded: 3
- Failed: 0
- Skipped (unexecutable): 1 ("make this section feel more spacious" — too subjective)
- Skipped (no trigger): 2 discussion comments
All replies posted to Figma. Check the comment threads for confirmations.
```
If there were failures or skipped subjective instructions, suggest next steps:
- Rephrase subjective comments with specific values and re-run
- Chain to `/figma-review` to review the changes that were just made
---
## Rules
1. **Manual-only.** Never auto-trigger or suggest proactively.
2. **Approval before execution.** Always present the plan (Step 6) and get user approval before modifying anything.
3. **Query before modify.** Always understand the element's current state before changing it.
4. **Always reply to comments.** Every processed comment gets a Figma reply, whether it succeeded or failed.
5. **Flag ambiguity.** If a comment could mean multiple things, flag it in the plan and ask the user to clarify.
6. **One change at a time.** Execute changes individually, not in bulk, so failures don't cascade.
7. **Use dedicated tools first.** Prefer specific figma-console tools (`figma_set_text`, `figma_set_fills`, `figma_resize_node`, etc.) over `figma_execute`. Only use `figma_execute` for properties not covered by dedicated tools (opacity, corner radius, layout, etc.).
8. **Use Python for REST API calls.** Batch comment replies using `urllib.request` to avoid shell quoting issues.
9. **Only process in-scope comments.** Only touch comments pinned to the target node or its descendants.
10. **Don't over-execute.** If a comment says "change the color to blue", change the fill to blue. Don't also adjust the border, add a shadow, or "improve" anything else.
11. **Verify with screenshots.** After structural or visual changes, use `figma_capture_screenshot` (plugin-based, immediate) to verify the result — not `figma_take_screenshot` (REST-based, may show stale state).
