---
title: How Appetite UI works with AI agents: Claude, Cursor and the Core Skill
description: The Appetite UI Core Skill, included in the file you buy, tells Claude, Cursor and other agents which token to use, so a generated screen reads your values.
author: Bob Poláček
topic: AI
published: 2026-09-16
updated: 2026-09-26
source: https://www.appetiteui.com/blog/appetite-ui-ai-agents-core-skill
---

# How Appetite UI works with AI agents: Claude, Cursor and the Core Skill

The Appetite UI Core Skill, included in the file you buy, tells Claude, Cursor and other agents which token to use, so a generated screen reads your values.

By Bob Poláček, updated September 26, 2026.

The Appetite UI Core Skill is an instruction file for AI coding agents, included in the file you buy. It tells Claude, Cursor or any agent that reads project instructions which token to reach for and which platform pattern to pick, so a generated screen uses names such as brand/base instead of a guessed hex. 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. The Core Skill points an agent at that same source.

Nothing is installed in Figma. The Core Skill is a Markdown file your agent reads beside the rest of your project instructions.

**In short**

- The Appetite UI Core Skill is one Markdown file, included with the purchase. It arrived in release 2.3, in August 2026.
- The Core Skill names the token layers, the naming logic and the platform rules, so an agent reaches for brand/base and never types a hex.
- The Core Skill works with Claude, Cursor and the Figma MCP server, and with any tool that reads project instructions.
- In Appetite UI, light and dark are two values of one token, so an agent that reads the token file has no second palette to invent.
- Without the purchase, an agent can still read /tokens.json (the token values the docs previews draw), /llms.txt and every docs page as Markdown.

## Your decisions are the part an agent cannot infer.

Ask an agent for a settings screen and you get one in seconds. Every value in it is a guess unless something in your project says otherwise: which spacing step you use, what your error state is called, how your brand maps onto Material roles. None of that can be read off a picture of a button, and none of it is in a model's training, because it belongs to your product.

A design system exists to record those decisions, and the Core Skill writes them down where an agent reads them. An agent cannot stop halfway through a screen to ask which gray you meant. It either has the decision or it substitutes one.

## The Core Skill ships with Appetite UI as one Markdown file.

The file names the layers of the system, how its tokens are named and the rules that tie them to each platform. It opens on one instruction: pick the value the system already decided rather than invent a new one. The rules follow: read tokens.md or tokens.json before producing anything; apply semantic tokens such as brand/base and text/strong-950, never a Foundations primitive, a typed hex or a platform/ios/* or platform/m3/* baseline; take every size from the 4 point spacing scale, where spacing/6 is 24; take every radius from the radius scale, md for buttons and inputs and lg for cards; and take every text setting from the text styles.

![The first lines of the Appetite UI Core Skill, skills/appetite-core/SKILL.md: read the tokens before you produce anything, apply semantic tokens only, and take every size, radius and text setting from its scale](https://www.appetiteui.com/images/blog/appetite-ui-ai-agents-core-skill--01.webp)

*The Core Skill's first rules: read the tokens, use semantic tokens only, and take sizes, radii and text settings from their scales.*

The setup takes four steps, and the [AI page](https://www.appetiteui.com/ai) walks through the same four:

1. **Open the Core Skill in the file you buy.**
It comes with the purchase, beside the context pack, tokens.md and tokens.json.

2. **Add it to your agent.**
Claude, Cursor, Figma Make, ChatGPT, Stitch or any tool that reads project instructions. No plugin, no setup call and no account to connect.

3. **Ask for screens.**
The agent picks brand/base instead of guessing a hex, because the file tells it which token that is.

4. **Ship what it builds.**
The screen reads your tokens, and the same W3C Design Tokens source generates SwiftUI, Compose, Flutter and CSS for the build.

## One prompt shows what the Core Skill changes.

The run on the [AI page](https://www.appetiteui.com/ai) starts from one sentence: "Build a balance card with a large amount and a label." With the Core Skill in its instructions, the agent answered with a card in which every value is a token of the file.

| Part of the card | Token the agent used |
| --- | --- |
| Fill | brand/base |
| Label color | text/on-color/subtle |
| Amount color | text/on-color/strong |
| Padding | spacing/4 |
| Corners | radius/lg |

Without the file, the same prompt has nothing to name, so the answer carries literal values: a hex for the fill, a number of points for the padding, a radius someone matches by eye. Each of those is right on the day and wrong after the first rebrand. A token name moves with the brand, because the build reads the same token.

## The export reads each code name off the variable.

Every variable in the library stores its own code name for web, iOS and Android, and the export reads the name off the variable. [Code output](https://www.appetiteui.com/docs/code-output) shows one variable arriving in four languages under the names it was given. Every component carries a written description an agent can parse, and every value traces back to a decision, a primitive behind a semantic alias, so a model can follow the reasoning and not just copy a result.

The token file follows the W3C Design Tokens format, which reached its first stable version, 2025.10, on October 28, 2025, and Style Dictionary compiles it to CSS custom properties, SwiftUI, Jetpack Compose and Flutter. A generated screen and a compiled build therefore read the same names from the same place, which is the only arrangement where the two cannot quietly disagree. The [tokens page](https://www.appetiteui.com/tokens) explains the architecture, and [how one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css) follows one variable all the way.

## Dark mode is a second value on the same token.

This is where most generated screens fall apart. Asked for dark mode, an agent that has only seen light values invents a second palette, and the second palette is wrong in the places nobody checks. An agent that reads the token file sees both values on one token.

**One token, two modes, what each mode resolves to**

| Token | Mode | Resolves to |
| --- | --- | --- |
| brand/base | Light | colors/blue/500 |
| brand/base | Dark | colors/blue/400 |
| M3/sys/color/primary | Brand | brand/base |
| M3/sys/color/primary | System | platform/m3/primary |

From the modes table on [Code output](https://www.appetiteui.com/docs/code-output). Light and Dark sit on the color tokens, Brand and System on the platform mirrors, and three device modes on the platform metrics. One source carries all of them.

The agent does not have to be told that your dark blue is a step lighter than your light blue, because the file already says so. The [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge) does the same for Material and Apple values through its Brand and System modes. How the two color modes are set up in Figma is in [Dark mode with Figma variables, not duplicate frames](https://www.appetiteui.com/blog/dark-mode-figma-variables).

![The Color Tokens collection in the Figma variables panel with the brand base row selected: colors/blue/500 in Light and colors/blue/400 in Dark, between lighter, light, dark, darker and three alpha steps](https://www.appetiteui.com/images/blog/appetite-ui-ai-agents-core-skill--02.webp)

*One token, one row, a value for each mode.*

## The Figma MCP server gives the agent the frame, and the Core Skill gives it the rules.

Figma describes its MCP server as a way to "Get design context and code from your Figma designs". Its guide lists the remote server for all seats and plans, and the desktop server for a Dev or Full seat on a paid plan. Connected to an agent, the server tells the agent what is on the canvas you point it at. The Core Skill tells the agent which token to use when it builds that screen in code, and which pattern belongs on iOS or on Android. Release 2.3 named the pair: the Core Skill works with Claude, Cursor and the Figma MCP.

## Each tool reads the file from its own place.

The Core Skill is a Markdown file, so it goes wherever your tool already reads instructions.

| Tool | Where it reads project instructions |
| --- | --- |
| Claude Code | `./CLAUDE.md` or `./.claude/CLAUDE.md`, plus any file a `CLAUDE.md` imports with an `@path` line. An `AGENTS.md` is read when the project has no `CLAUDE.md`. Skills, each a folder with a `SKILL.md`, live in `.claude/skills/` and load when a task calls for them. |
| Cursor | Project rules in `.cursor/rules` as `.mdc` files, or an `AGENTS.md` at the project root. A plain `.md` file inside `.cursor/rules` is ignored. |

From each tool's own documentation, read September 26, 2026, and linked under Sources.

## An agent can read the docs and their token values without the Figma file.

Public files describe the system as text. [/tokens.json](https://www.appetiteui.com/tokens.json) holds the token values the docs previews draw, in the W3C Design Tokens format; the full source, with its SwiftUI, Compose, Flutter and CSS outputs, comes in the file you buy. [/llms.txt](https://www.appetiteui.com/llms.txt) lists the documentation and the product pages with a line on each, and [/llms-full.txt](https://www.appetiteui.com/llms-full.txt) holds every docs page in one file. Every docs page also has a Markdown twin at its own address plus .md, such as [/docs/button.md](https://www.appetiteui.com/docs/button.md). The [documentation](https://www.appetiteui.com/docs/introduction) is the human version of the same material, which is the point: an agent and a person read one source.

## Code Connect maps a snippet, and the snippet was never the missing part.

I replaced Figma Code Connect with the Core Skill in release 2.3. Code Connect maps one component to one code snippet. A perfect snippet of a button still leaves the agent to decide what color the button is, how much space sits under it, and what the same button looks like on Android in dark mode with a customer's brand applied. Those are token questions, and I wanted their answers written where an agent reads them.

## The screen the agent returns tells you whether it read anything.

The test takes about a quarter of an hour. Add the Core Skill to your agent, ask for a screen you already have in the file, and compare the two. Check three things: whether the values are token names or literals, whether the dark version came from the same tokens, and whether the platform conventions match the platform you asked for.

If the answers are names, the setup works. If they are literals, the agent is guessing, and more prompting will not fix it, because what is missing is the source. The [install page](https://www.appetiteui.com/docs/install) covers getting the library into a project, and [pricing](https://www.appetiteui.com/pricing) lists what the file you buy includes.

## Questions

### What is the Appetite UI Core Skill?

The Appetite UI Core Skill is an instruction file for AI coding agents, included in the file you buy. It tells Claude, Cursor or any agent that reads project instructions which Appetite UI token to use and which platform pattern to pick, so a generated screen reads token names.

### Is the Core Skill free?

No. The Core Skill is included in the file you buy, with the rest of Appetite UI. The token values the docs previews draw (/tokens.json), the llms.txt index and the docs as Markdown are open for any agent to read.

### Does the Core Skill work without the Appetite UI file?

The Core Skill comes with the Appetite UI file and names its tokens, so it pays off in a project built on them. Without the Figma file, an agent can still read every docs page as Markdown and the token values the docs previews draw, in /tokens.json.

### Does the Core Skill work with Claude Code, Cursor and Figma Make?

Yes. The Core Skill is a Markdown file, so any tool that reads project instructions can use it, Claude Code, Cursor and Figma Make among them. Release 2.3 named Claude, Cursor and the Figma MCP server.

### How is the Core Skill different from Figma Code Connect?

Figma Code Connect maps one component to one code snippet. The Appetite UI Core Skill tells an agent which token and which platform pattern to use, which is the part a snippet does not decide.

### Does the agent see my Figma file?

An agent sees your Figma file only through a tool you connect. The Core Skill is a text file and does not open Figma. With Figma's MCP server connected, an agent can read design context from the frames you point it at.

## Sources

1. [Figma Learn, Guide to the Figma MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server), read September 26, 2026
2. [Claude Code documentation, How Claude remembers your project](https://code.claude.com/docs/en/memory), read September 26, 2026
3. [Claude Code documentation, Extend Claude with skills](https://code.claude.com/docs/en/skills), read September 26, 2026
4. [Cursor documentation, Rules](https://cursor.com/docs/context/rules), read September 26, 2026
5. [W3C Design Tokens Community Group, Design Tokens specification reaches first stable version](https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/), read September 26, 2026
6. [Style Dictionary, Design Tokens Community Group format](https://styledictionary.com/info/dtcg/), read September 26, 2026