Designers have been conspicuously underserved by the first wave of ClawHub skills. The marketplace is bursting with tooling for databases, DevOps, messaging, and crypto, but until recently there was no obvious answer to the question “what does an AI agent actually do with a Figma file?” Maddie Dreese’s figma-design-toolkit skill is quietly becoming that answer — and it deserves more attention than it is getting.
Available in the official OpenClaw skills registry and mirrored across ClawHub, the toolkit turns a Figma file into something your agent can reason about: components, tokens, accessibility issues, exported assets, and documentation. It is read-only by design, which is part of why it has landed well with design leads who do not want an LLM silently moving layers around in their production libraries.
What the skill actually does
At its core, figma-design-toolkit wraps the Figma REST API and exposes a set of structured operations your OpenClaw agent can call conversationally. Four capability groups stand out.
1. File inspection and component extraction
Point the agent at a Figma file and it can return a structured JSON representation of the document: pages, frames, components, component sets, variants, and the styles attached to them. Instead of clicking through Figma’s layer tree looking for the button component, you ask “what variants exist on Button/Primary, and which are actually used across the product?” The skill answers with counts, file paths, and node IDs you can paste back into Figma.
2. Design token extraction
This is the feature that design system teams care about most. The toolkit pulls colors, typography, spacing, radii, and shadows out of a file and serializes them as CSS variables, JSON tokens in the W3C Design Tokens format, or plain lists suitable for pasting into Slack. If you are trying to keep a Tailwind config or a Style Dictionary pipeline in sync with a Figma source of truth, the skill can generate a diff between the tokens in the file and the tokens in your repo in a single agent call.
3. Asset export
Batch exports of frames, components, or arbitrary nodes as PNG, SVG, PDF, or WebP. The agent handles scale factors and naming conventions, so “export every icon in the Icons page as 1x and 2x SVG and PNG, kebab-cased” becomes a single instruction instead of a fifteen-minute click-fest.
4. Audits and documentation
The skill ships with two kinds of audits. A consistency audit flags style drift — off-palette colors, one-off font sizes, spacing values that do not match the 4px grid. An accessibility audit calculates WCAG contrast ratios for text layers and warns on anything below AA. On top of that, the toolkit can generate a Markdown or Notion-ready component spec from any frame: props, variants, dimensions, and usage notes, ready to drop into your design system docs.
Who it is for
Three audiences are getting the most out of this skill today. Design system maintainers use it to keep tokens, components, and docs in sync across Figma, GitHub, and their documentation site. Front-end engineers use it to shorten the loop between “designer updated the spec” and “PR merged” — pulling the latest tokens and exporting new icons becomes a scripted step instead of a handoff meeting. Product managers and founders without a dedicated designer use it to turn rough Figma sketches into a rolling audit of what is consistent, what is drifting, and what still needs a real component behind it.
Installing it
npx clawhub@latest install maddiedreese/figma-design-toolkitYou will need a Figma personal access token with read scope on the files you want to inspect. The skill stores the token in OpenClaw’s standard credential vault; it never writes to Figma, so a read-only token is sufficient and is what the docs recommend.
A note on scope and safety
Design files often contain unreleased product, pricing, and internal roadmaps. Before you point an agent at an enterprise Figma team, confirm two things: that the personal access token is scoped to the specific files or team you want readable, and that the LLM backend you have configured in OpenClaw matches your organization’s data handling policy. Because the toolkit is strictly read-only, the blast radius is smaller than most integrations in ClawHub — but “read-only” still means “the model saw your unreleased designs.” Treat the token like any other CMS credential.
Where to find it
The source lives in the official OpenClaw skills repo at github.com/openclaw/skills/tree/main/skills/maddiedreese/figma-design-toolkit, with a mirrored listing on ClawHub. If you want a gentler on-ramp, the Oh My OpenClaw setup guide walks through connecting the skill and wiring it into a design review workflow.
ClawHub has plenty of loud skills. This one is quiet, narrow, and unusually well-scoped — and if your team ships a product, there is a good chance it will earn its keep in a week.
Leave a Reply