What is the geist-figma-skill?
The geist-figma-skill is an unofficial agent skill for the unofficial Geist component library in Figma. Working through the Figma MCP server, it tells an agent which component and properties fit a job, binds values to variables and styles, wires prototypes that run in Present, and runs a seven-group audit against the library's own documentation.
Geist is Vercel's design system. The Geist Figma library this skill targets is an unofficial recreation of it, built by a separate author, with real variants and properties, Light and Dark variables, text and effect styles, icons and prototypes.
The skill is unofficial too: it is not affiliated with, endorsed by or sponsored by Vercel. It gives an agent working through the Figma MCP server the same library knowledge in a queryable form, plus a method for building and checking the result.
Three modes
- Advise: names the component and set, the exact properties and values, the default, required labels and the Figma page.
- Build: places library instances and sets them through properties rather than overrides, binds fills and text to variables and styles, and wires each overlay to its own boolean variable.
- Review: runs the audit on a frame, takes screenshots of each state, and checks every component against its documentation.
The audit's seven groups
scripts/figma/audit.js reads a frame, section or instance without changing it, and reports errors, warnings and info across seven groups: values, geometry, overlays, instances, look-alikes, prototype wiring and theme mode.
A method on top of the knowledge
Beyond naming components, the skill frames the job, checks for failure classes such as clipping or off-screen overlays, inspects the document before setting values, builds in small steps and reports with evidence of what was built.
Who the geist-figma-skill is for
Best for
- Designers and agents building inside a Figma document that already has the unofficial Geist library enabled.
- Getting exact component, property and variable names before placing or editing an instance.
- Auditing a finished frame against the library's own documentation before handoff.
Not for
- Generating a brand new Figma screen from code or a text description, where Figma Generate Design Skill builds it section by section from a published design system.
- Pushing Figma tokens and approved components into a code repository or Storybook, where sb-figma Skill builds the Code Connect mapping instead.
- Making safe low-level edits to any Figma document with no knowledge of a specific library, where Figma Edit MCP validates each change through its own plugin before it runs.
- Writing a brand-new three-tier token model and typed component APIs for a library still being designed, where Design System Architecture Skill documents its tiers and templates.
How to install Geist Figma Skill: An Unofficial Agent Guide to Geist
npx skills add eyexzy/geist-figma-skill -a claude-codeInstall the skill
Run the command above, or clone the repository with git clone https://github.com/eyexzy/geist-figma-skill and copy it into the agent's skills path.
Add the Figma MCP server
In Claude, run claude plugin install figma@claude-plugins-official to add the Figma MCP server with canvas write access and Figma's own figma-use skill.
Open a document with the library
Work in the Geist library document itself, a copy of it, or any document with the published library enabled under Assets and Libraries.
Install Node.js
Node.js 18 or newer is needed to run scripts/lookup.mjs, the offline search the skill uses for component, token and rule lookups.
Check that it loaded
Ask which Button properties fit a destructive action. The reply should name the exact component set, property values and label text, pulled from the library's own documentation rather than a guess.
Key features
- Component lookup by needfind, choose and list commands return which component fits a need and the pick between similar ones, by category.
- Full component briefsbrief and component commands print public sets, properties, defaults, best practices and assembly, read from the Figma document's own layers.
- Guides, layout and motionguide, layout and motion commands return written guidelines, exact bindings and reactions with their timing and easing curve.
- Tokens and styles lookupuse, token, ramp, style and collections commands find the variable, text style, material or spacing value for a job instead of a guess.
- Icon search by meaningThe icon command finds icon names by meaning, such as delete or settings, rather than requiring the exact library name.
- Plan validation before buildingThe check command validates a planned set, part, property and value combination before the agent places anything on the canvas.
- Seven-group auditThe audit command runs scripts/figma/audit.js across values, geometry, overlays, instances, look-alikes, prototype wiring and theme mode, printed in parts if needed.
- Freshness check against the live documentkeys and fresh commands generate the search to run and compare a stamp against the document, so stale data gets refreshed before advice is given.
Frequently asked questions
What is the geist-figma-skill?
It is an unofficial Agent Skill for the unofficial Geist component library in Figma, a community recreation of Vercel's design system. Working through the Figma MCP server, it tells an agent which component and properties fit a request, places and configures instances, wires prototypes, and audits a finished frame against the library's own documentation.
Is geist-figma-skill an official Vercel or Figma product?
No. The README states plainly that the Geist Figma library it targets is an unofficial recreation, and the skill itself is not affiliated with, endorsed by or sponsored by Vercel. It is a community project built by one author on top of Figma's public MCP server.
How do I install geist-figma-skill?
Run npx skills add eyexzy/geist-figma-skill -a claude-code, or clone the repository and copy it into the agent's skills path by hand. You also need the Figma MCP server with canvas write access and Figma's own figma-use skill, plus Node.js 18 or newer for the bundled lookup script.
Does geist-figma-skill write code?
No. The README states that it does not turn designs into code and does not create new library components. It places and configures existing Geist instances inside the Figma canvas, and for anything the library lacks, such as a sidebar, it builds from frames and tokens and says so.
What does the geist-figma-skill audit check?
Seven groups: values such as hex fills instead of variables, geometry such as off-pixel positions, overlays that open outside the screen, instances with hand-restyled parts, look-alike frames mimicking a real component, prototype wiring problems, and the color mode set on each screen.
Does geist-figma-skill read the Figma document before answering?
Yes. The skill carries a snapshot of the library's data but compares it with the live document before giving exact values, and reads any changed part directly from that document rather than trusting a stale snapshot.
Which agents can run geist-figma-skill?
The README names testing with one agent that supports skills and does not list other named agents. Any requirement beyond that, including support for the Figma MCP server's write access, is best confirmed in your own setup before a Build or Review pass runs on real work.
Can I use geist-figma-skill without the Figma library enabled?
No. The skill needs the Geist library in the document you work in, whether that is the library document itself, a copy, or a document with the published library turned on under Assets and Libraries, as its lookups are built from that library's own data.