g761007

Figloo — Design skill for Claude Code

Design community

Chrome extension + local MCP server that lets coding agents like Claude Code and Codex read Figma designs through the web UI with view access: walk layers, inspect properties, take screenshots, export.

How to install Figloo

This entry records only its repository, not the path inside it, so there is no exact command to give. Open g761007/figloo and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Figloo does

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★

README

Figloo

English | [繁體中文](README.zh-TW.md)

Figloo is a Chrome extension plus a local MCP server that lets a coding agent detect an open Figma design tab, use the user's current selection as an anchor, and explore nearby layers and their properties through the Figma web UI, without scanning the whole document. It only reads what the DOM and web UI expose: no Figma REST API, official Figma MCP, Figma plugin, or private internal state. It may change the view and selection, but it never edits the design.

Status

The MVP (milestones M0 to M4 of the [plan](docs/plans/2026-09-30-figloo-mvp-plan.md)) is complete. An agent can list the pages of a Figma file, open a page or start from the user's selection, walk the layer tree one bounded page at a time, read what Figma's inspection panel shows, take screenshots, and export icons and images. To implement a page, `snapshot_layer` reads every layer of it at once, with a screenshot, and saves the result so that `query_snapshot` can look layers up without touching Figma again. Figloo targets engineers with view access to a file; it never edits the design.

docs/mcp-tools.md: every tool's parameters, results, and error codes.
docs/compatibility/: supported browsers and Figma settings, known limitations, and what was verified on real Figma pages.

Quickstart

Paste this into your coding agent, Claude Code or Codex:

Install Figloo for me by following https://raw.githubusercontent.com/g761007/figloo/main/docs/agent-install.md

The agent checks Node.js, downloads the latest release and verifies its checksums, registers the MCP server (as a plugin in Claude Code), and gives you a pairing token. It then walks you through the three steps only you can do:

Load the extension: on chrome://extensions (or arc://extensions), turn on Developer mode, click "Load unpacked", and pick the folder the agent names.
Paste the token and port into the extension's opt