---
title: Figma UI kit for Claude Code: Appetite UI
source: https://www.appetiteui.com/works-with/claude-code
---

# 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.

## What the file gives

- 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.

## How to wire it up

1. 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.
2. 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.
3. 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.
4. Start the prompt with the skill. Begin with /appetite-core so the skill loads, describe the screen and paste the link.
5. 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.

### Setup (once per project, with APPETITE pointing at the unpacked files)

```bash
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" .
```

## What to check

- 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

### Does Appetite UI work with 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.

### Does Appetite UI use Figma Code Connect?

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 (30 October 2026)

- [How Claude remembers your project, Claude Code docs](https://code.claude.com/docs/en/memory), read 30 October 2026

## On this site

- [Claude Code and Figma, from one frame to one screen](https://www.appetiteui.com/blog/claude-code-figma-one-screen)
- [The Core Skill for AI agents](https://www.appetiteui.com/blog/appetite-ui-ai-agents-core-skill)
- [Appetite UI and AI agents](https://www.appetiteui.com/ai)