Works with
A Figma UI kit Claude Code can build from.
Appetite UI works with Claude Code through its Core Skill, an instruction file included with the purchase that tells the agent which token and pattern to use, so a screen reads from your tokens instead of a guessed value.Appetite UI is a Figma UI kit for iOS and Android apps, built like a design system. One token source drives Apple and Material components in light and dark mode, and exports to SwiftUI, Jetpack Compose, Flutter and CSS.
What you get
What the file gives Claude Code.
As the file ships today.
The Core Skill.
A Markdown skill, appetite-core, that opens by telling the agent to read the tokens first and to apply semantic tokens only, never a typed hex.
A slop linter skill and an AGENTS.md.
The file also includes appetite-slop-linter, which audits a diff, and an AGENTS.md for repositories.
The token names an agent can look up.
The tokens folder includes tokens.md and the token source, so the agent finds a value by name.
Set up
How to wire it up for Claude Code.
- 01
Connect the Figma MCP server.
Figma recommends its plugin, claude plugin install figma@claude-plugins-official, or claude mcp add --transport http figma https://mcp.figma.com/mcp. Then run /mcp, choose Authenticate and allow access. - 02
Copy the skills into the repository.
appetite-core and appetite-slop-linter go into .claude/skills/, each as a folder with a SKILL.md. Keep the tokens folder next to your code. - 03
Copy the link to a frame.
In the Figma file, right-click a frame and choose Copy link to selection. The server reads the node id from the link. - 04
Start the prompt with the skill.
Begin with /appetite-core so the skill loads, describe the screen and paste the link. - 05
Review the diff, then run the linter.
Look for hex values, literal spacing and hand-set fonts. Then start a message with /appetite-slop-linter to audit the changed files.
Sample
What it looks like.
In code.
Setup: once per project, with APPETITE pointing at the unpacked files.
claude mcp add --transport http figma https://mcp.figma.com/mcp
mkdir -p .claude/skills
cp -r "$APPETITE/AI-context/skills/appetite-core" .claude/skills/
cp -r "$APPETITE/AI-context/skills/appetite-slop-linter" .claude/skills/
cp -r "$APPETITE/tokens" .Watch for
What to check before you rely on it.
Instructions are context, not enforcement.
Claude Code treats CLAUDE.md as context it follows, not as configuration that blocks an action. Review the diff against the tokens every time.
AGENTS.md and CLAUDE.md.
Claude Code reads an AGENTS.md when the project has no CLAUDE.md. If you already have a CLAUDE.md, add an @AGENTS.md line to it.
Not free, and no download link.
The Core Skill is included with the file you buy. The public machine files are /tokens.json, /llms.txt and the docs as Markdown.
Figma MCP is Figma’s.
Seat and plan limits for the remote server are Figma’s, and Figma notes that some seats may have usage limits.
FAQ
Questions about Claude Code.
Yes. The Core Skill included in the file you buy goes into .claude/skills, and the Figma MCP server hands Claude Code a frame to build from.
No. Code Connect maps one component to one snippet. The Core Skill tells the agent which token to use, and the variables carry their code names.
Official documentation
Claude Code's own documentation.
Where the tool says how it works. The date is the day it was read or linked.
Read 30 October 2026
How Claude remembers your project, Claude Code docs
Check it against the tool.
This page states what the file does today and follows the documentation beside it. Where the two differ, the tool’s own page wins.
Keep reading
On this site.
Read
Claude Code and Figma, from one frame to one screen
Read
The Core Skill for AI agents
Read
Appetite UI and AI agents
Bring your own stack.
Find your tool on the list, then open the preview and see how the kit sits next to it.