Your agent writes the code. Your app still looks designed.
A UI kit for iOS and Android, in Figma and in code, built like a design system. In Figma the agent reads the file through MCP. With Appetite UI Code it reads the agent kit and the tokens, in React Native, SwiftUI, Flutter or Jetpack Compose.
- Claude
- Cursor
- Figma Make
- ChatGPT
- Stitch
The problem
Code got cheap. Apps started to look the same.
An agent fills every decision you did not write down with its own default, so screens built from a prompt converge on the same colors, the same cards and the same spacing. More apps now compete for the same downloads, and more of them are built by agents that can read a design file. The numbers in full.
- new App Store apps in the first half of 2026, about double the year before
- 560,000new App Store apps in the first half of 2026, about double the year beforeSensor Tower estimate, via 9to5Mac
- more new iOS apps in the first quarter of 2026 than a year earlier
- 80%more new iOS apps in the first quarter of 2026 than a year earlierAppfigures, via TechCrunch
- growth in App Store downloads over the same half year
- 2%growth in App Store downloads over the same half yearSensor Tower estimate, via 9to5Mac
- weekly users of the Figma MCP server in Figma Design, first quarter of 2026 over the one before
- 5xweekly users of the Figma MCP server in Figma Design, first quarter of 2026 over the one beforeFigma, first quarter 2026 results
Side by side
One prompt, sent twice.
The same agent got the prompt “Build the wallet home screen in dark mode” twice: once on its own, once with the Core Skill and the Appetite UI tokens. Switch both to a larger text size and see which one holds.
Build the wallet home screen in dark mode.
Claude as the coding agent, SwiftUI, the iOS 27 simulator on an iPhone 18 Pro. Without: October 7, 2026, a project that held only the app shell. With: October 14, 2026, a project that held the Core Skill, AGENTS.md, design.md, tokens.md and AppetiteTokens.swift, and the kit's Finance Dashboard screen as a reference picture. Neither run used Figma. Larger text is the Accessibility Extra Large setting (AX3).
The thesis
Agents do not need a bigger library. They need one that explains itself.
That is what a system is: the context layer where your decisions are written down. A bigger library gives an agent more to guess between. Named tokens give it less.
Which blue is the button?
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Nothing says which step a button takes, so the agent fills the gap with its own default.
brand/base
- 50
- 100
- 200
- 300
- Dark400
- Light500
- 600
- 700
- 800
- 900
- 950
Primary buttons, active states, links. Maps to iOS tint and M3 primary.
What the agent reads
Written to be read by something that cannot ask a follow-up question.
Four things an agent reads before it draws a screen. The specs and the token names are public, so you can check them now.
brand/base
Color variable
Primary buttons, active states, links. Maps to iOS tint and M3 primary.
- Light
- colors/blue/500#155DFC
- Dark
- colors/blue/400#2B7FFF
- Web
- var(--ap-brand-base)
- iOS
- Color
.apBrandBase - Android
- AppetiteTheme
.colors .brandBase
Variables
Every variable knows its code name.
How do I install the library?
Open the Figma file, duplicate it into your team, then publish it as a library from the Assets panel.
- Description in the Figma file
- Collapsible content row. FAQ lists and grouped settings. Do not nest. iOS: DisclosureGroup. Android: expandable ListItem.
Descriptions
Components describe themselves.
accordion.md/docs/accordion.md
Accordion
Accordion hides an answer or a detail under a one-line title until someone taps the row, so a long screen stays short.
Which states does Accordion have?
Three states on one shape: Default is bg/white-0 with a 1 border/soft-100 edge and a shadow, and Pressed drops both and fills bg/weak-50.
Specs
Every docs page has a Markdown twin.
tokens.jsonW3C DTCG, Figma names
"bg": { "weak-50": { "$value": "#F4F5F5", "$extensions": { "com.appetiteui": { "modes": { "light": "#F4F5F5", "dark": "#242427" }, "codeSyntax": { "web": "var(--ap-bg-weak-50)", "ios": "Color.apBgWeak50", "android": "AppetiteTheme.colors.bgWeak50" } } } }}Tokens
One name from Figma to code.
Tools
Which agents can use the Core Skill?
Any agent that reads files. Where the rules go depends on the tool; the rules are the same.
The rules
SKILL.md
- Tokens
- Color
- Spacing
- Radius
- Type
Claude Code
- Where the rules go
- The Core Skill in .claude/skills, the rules in CLAUDE.md
- What it reads before a screen
- tokens.md and design.md in the project
Cursor
- Where the rules go
- .cursor/rules/appetite-ui.mdc, or Rules for AI in Cursor Settings
- What it reads before a screen
- tokens.md and design.md in the project
Windsurf and Codex
- Where the rules go
- AGENTS.md at the root of the repository
- What it reads before a screen
- tokens.md and design.md in the project
Figma Make and ChatGPT
- Where the rules go
- SKILL.md attached to the chat
- What it reads before a screen
- What you attach: SKILL.md and tokens.md
Any agent on Figma MCP
- Where the rules go
- The Figma file, connected through Figma MCP
- What it reads before a screen
- The components, the variables with their code names and the specs, from the Figma file
Install
One file briefs the agent.
AI can draw a button. It cannot invent your decisions: which spacing step you use, what your error state is called, how your brand maps onto Material roles. The Core Skill writes those decisions down where an agent can read them.
