Stats
Actions
Available In
Tags
More by tokyo-megacorp
autoimprove
2·
Autonomous codebase improvement loop — modify code, evaluate against benchmarks, keep or discard via git worktrees
1w
tokyo-megacorpSnapshot Figma canvases, diff design changes, compare to implementation, and notify Slack.
Diff every frame in a Figma file against stored snapshots
Diff a Figma node against its latest snapshot (structural + visual)
Discover and catalog all frames in a Figma file
Post the latest diff result to Slack
Surface unresolved Figma comments grouped by node
2 agent definitions for figma-differ diff operations. Each agent is a Markdown file with YAML frontmatter (`name`, `description`).
Compares two Figma node JSON snapshots and produces a structured diff. Use this agent when you have two node.json files (a baseline and current) and need to identify what changed between them — added nodes, removed nodes, renamed nodes, or property changes (fills, strokes, text content, layout). <example> Context: User has two Figma node snapshots and wants to see what changed user: "diff these two node.json snapshots" assistant: "I'll dispatch the structural-differ agent to compare the snapshots." </example> <example> Context: The figma-differ diff skill fetched current state and needs structural comparison user: (dispatched by diff skill after fetching current Figma state) assistant: "Dispatching structural-differ to compare baseline vs current node.json." </example>
Compares two images using Claude vision and produces a structured fidelity report. Use this agent when you have two screenshots (PNG files) — typically a Figma design snapshot and a live implementation screenshot — and need to identify visual divergence. <example> Context: User wants to compare a Figma design screenshot against an implementation screenshot user: "compare these two screenshots visually" assistant: "I'll dispatch the vision-analyzer agent to analyze design vs implementation fidelity." </example> <example> Context: The figma-differ diff skill needs visual comparison of two PNG snapshots user: (dispatched by diff skill for visual comparison) assistant: "Dispatching vision-analyzer to compare the design and implementation screenshots." </example>
Diffs every frame in a Figma file against stored snapshots. Runs structural diff locally (zero API calls), dispatches vision analysis only on changed frames, and computes comment deltas. Produces a tiered report. Use when the user runs /figma-differ:diff-all with a Figma file URL, or says "diff all frames", "what changed in this Figma file", "bulk diff", "check for design changes", or "run a full file diff".
Fetches the current state of a Figma node and diffs it against the latest stored snapshot. Runs both structural diff (JSON node tree) and visual comparison (PNG via Claude vision). Use when the user runs /figma-differ:diff with a Figma URL, or says "diff this Figma frame", "what changed in Figma", "compare to snapshot", or "check Figma for changes".
Re-fetch and enrich thin Figma frames that have shallow data (1 node, generic description like "dark mode screen", or description under 30 chars). Uses REST API to fetch full node JSON and regenerates frame.md for each thin frame. Use when the user runs /figma-differ:enrich, says "enrich thin frames", "improve frame descriptions", or "deep-fetch all frames".
Discovers and catalogs all frames in a Figma file at any depth. Creates a frame manifest for bulk operations. Use when the user runs /figma-differ:index with a Figma file URL, or says "index this Figma file", "list all frames", "catalog Figma screens", or "discover frames".
Posts diff results to Slack using persistent frame threads. Each tracked frame gets a permanent parent message; diffs and comments are thread replies. Use when the user runs /figma-differ:notify, or says "post the diff to Slack", "share the Figma diff", "notify the team about design changes", or "send diff to Slack".
Admin access level
Server config contains admin-level keywords
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
A Claude Code plugin that snapshots Figma nodes, diffs design changes structurally and visually, surfaces comments, and posts results to Slack.
Requires curl and jq on PATH.
Get a personal access token at figma.com/settings → Personal access tokens, then:
bash scripts/auth.sh set # prompts (input hidden), verifies, saves
bash scripts/auth.sh status # show active source + masked tail
bash scripts/auth.sh doctor # re-verify against /v1/me
bash scripts/auth.sh clear # remove the stored token
The token is stored at ~/.figma-differ/.env with mode 600. Lookup order:
$FIGMA_TOKEN env var (explicit override, per-invocation)~/.figma-differ/.envThis survives shell restarts and reboots, and is readable from the sandboxed subagent context. The old /tmp/.figma-token fallback has been removed — auth.sh set auto-migrates it on first run if found.
export FIGMA_DIFFER_SLACK_CHANNEL='#design-reviews' # for /figma-differ:notify
Takes a point-in-time snapshot of a Figma node — fetches its JSON structure and exports a PNG screenshot.
/figma-differ:snapshot <figma-url>
Stores to ~/.figma-differ/<fileKey>/<nodeId>/<timestamp>/:
node.json — full node treescreenshot.png — exported PNGThis is the baseline used by all diff operations.
If the URL points at a CANVAS/page node, figma-differ keeps the JSON snapshot but skips PNG export and warns that page-level snapshots are better handled by indexing child frames first.
Compares the current state of a Figma node against its latest snapshot. Runs two parallel analyses:
id, reports added/removed/changed nodes with field-level precision (colors, text, sizes, fills)/figma-differ:diff <figma-url>
/figma-differ:diff <figma-url> --notify
The --notify flag posts the result to Slack immediately after the diff completes.
Diff result is saved to ~/.figma-differ/<fileKey>/<nodeId>/latest-diff.md for later use with /figma-differ:notify.
Severity scale: low (cosmetic) → medium (visual) → high (structural) → critical (breaking)
Fetches all comments on a Figma file and surfaces the unresolved ones, grouped by node.
/figma-differ:review-comments <figma-url>
/figma-differ:review-comments <figma-url> --all-comments
By default shows only unresolved comments. Pass --all-comments to include resolved ones as well.
Posts the most recent diff result to Slack. Picks up whichever diff was run most recently — single-node or bulk.
/figma-differ:notify
/figma-differ:notify --channel #another-channel
Formats output differently for single-node vs bulk diffs. Includes severity, top changed nodes, and a summary line.
Requires FIGMA_DIFFER_SLACK_CHANNEL to be set, or --channel to be passed.
Discovers and catalogs every frame in a Figma file at any depth. Creates a frame manifest used by bulk operations.
/figma-differ:index <figma-file-url>
Writes ~/.figma-differ/<fileKey>/index.json — a flat list of all frames with their node IDs and names.
Run this before snapshot-all or diff-all if you want to inspect what frames exist first. The bulk skills will run it automatically if an index doesn't exist.
Snapshots every frame in a Figma file in a single pass. Efficient: fetches the full file tree in one API call, then batch-exports PNGs in chunks of 10 frame IDs.
/figma-differ:snapshot-all <figma-file-url>
Uses the same timestamp across all frames (atomic file-level snapshot). Also caches comments at ~/.figma-differ/<fileKey>/comments/<timestamp>.json.
API call budget: 1 tree fetch + ceil(frame_count / 10) image-export calls + 1 comments fetch.
Diffs every frame in a file against stored snapshots. Designed to be cost-efficient: only frames with actual changes get LLM analysis.
/figma-differ:diff-all <figma-file-url>
/figma-differ:diff-all <figma-file-url> --notify
/figma-differ:diff-all <figma-file-url> --notify --top 5
Pipeline:
structural-differ agent — analyze only changed framesvision-analyzer agent — visual comparison for structurally changed frames onlynpx claudepluginhub tokyo-megacorp/figma-differ --plugin figma-differAutonomous codebase improvement loop — modify code, evaluate against benchmarks, keep or discard via git worktrees
tokyo-megacorpMulti-model consensus engine integrating OpenAI Codex CLI, Gemini CLI, and Claude CLI for collaborative code review and problem-solving.
xrf9268-hueUltra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
JuliusBrusseeComprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
wshobsonMemory compression system for Claude Code - persist context across sessions
thedotmackStandalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
LucklyricWrite feature specs, plan roadmaps, and synthesize user research faster. Keep stakeholders updated and stay ahead of the competitive landscape.
anthropics