---
title: The best Figma UI kits for AI coding agents in 2026
description: For an agent building an iOS and Android app from Figma, Appetite UI; for coded components, other kits. Six Figma UI kits checked for Claude Code and Cursor.
author: Bob Poláček
topic: Comparison
published: 2026-10-30
updated: 2026-10-30
verified: 2026-10-30
source: https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents
---

# The best Figma UI kits for AI coding agents in 2026

For an agent building an iOS and Android app from Figma, Appetite UI; for coded components, other kits. Six Figma UI kits checked for Claude Code and Cursor.

By Bob Poláček, updated October 30, 2026, last verified October 30, 2026.

The best Figma UI kit for an AI coding agent that builds an iOS and Android app from your Figma file is Appetite UI, because it ships the instructions the agent reads: a Claude Code skill, Cursor rules and an AGENTS.md that tell it which token to use, on Apple's and Material's components. When you want the agent to install coded components instead, the kits that sell them come first: gluestack UI for React Native, Dynamic Layer for Flutter, Untitled UI for the web.

I design Appetite UI, so the first entry is my own product. It is first because this list is ranked for one case, an agent building a phone app from a Figma design with your tokens; for an agent that should assemble components from a code library, the other kits on this page are ahead, and their sections say so.

**TL;DR**

- **An agent building an iOS and Android app from your Figma file:** Appetite UI. Its Core Skill, Cursor rules and AGENTS.md tell Claude Code or Cursor to use the tokens by name.
- **A Flutter app that Claude Code customizes:** Dynamic Layer. Its homepage is "Built for Claude Code workflows" on a Figma and Flutter foundation.
- **A React Native app from coded components:** gluestack UI. It publishes an llms.txt and an MCP server that generates code with its components.
- **A web app through the kit's own MCP server:** Untitled UI. Its server lets Claude Code and Cursor search and install its React components.
- **Apple's or Google's exact components:** their official kits. Neither page names anything for agents; Figma's MCP server reads them like any file.

**At a glance: Figma UI kits for AI coding agents and what they cost**

| Kit | Best for | Starts at | Price read on |
| --- | --- | --- | --- |
| [Appetite UI](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#appetite-ui-tells-the-agent-which-token-to-use-on-ios-and-android) | An agent building a native iOS and Android app from your Figma file | $129 once, Solo (one person) | appetiteui.com/pricing |
| [Dynamic Layer](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#dynamic-layer-is-built-for-claude-code-and-flutter) | A Flutter app that Claude Code customizes from ready components | Free plan; Personal €149 once (one user) | dynamiclayer.io/pricing |
| [gluestack UI](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#gluestack-ui-gives-an-agent-react-native-components-and-an-llms-txt) | A React Native app an agent assembles from coded components | MIT library; no Pro price on its homepage | gluestack.io |
| [Untitled UI](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#untitled-ui-has-its-own-mcp-server-for-the-web) | A web app an agent builds through the kit's own MCP server | Free version; PRO Solo $129 (one user); React from $349 | untitledui.com/pricing |
| [Google's Material 3 Design Kit](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#google-s-material-3-kit-is-read-through-figma-s-mcp-server) | An Android app on Google's baseline, read through Figma's MCP server | No price on its page; CC BY 4.0 | figma.com/community/file/1035203688168086460 |
| [Apple's iOS and iPadOS 27 UI kit](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#apple-s-ios-27-kit-states-nothing-for-agents) | Mock-ups in Apple's exact components; nothing stated for agents | No price on its pages | developer.apple.com/design/resources |

Prices as each maker's page printed them on October 30, 2026, the lowest tier first, with the page each was read on; "once" is a one-time payment.

## How this list was made.

- **Who wrote it.** Bob Poláček, who designs Appetite UI with the bpolacek.cz studio team and external collaborators. Appetite UI is the author's product, and this page says so before the list.
- **What was checked.** Five checks for an agent that builds a phone app from a Figma file, below. Each one is a sentence a maker's public page either states or does not.
- **When.** Every page was read on October 30, 2026, prices included, and every quote was matched in the page's text that day. The pages are listed under Sources.
- **The rules.** Only a maker's own words; prices only as the maker's page printed them, with the day; where a page is silent the scorecard says Not stated, never No. Kits whose pages name nothing for agents and no iOS or Android case, such as Nucleus UI and AlignUI, are left out.

**Figma UI kits for AI coding agents, ranked for an iOS and Android app built from a Figma file**

| Kit | Best for | Why |
| --- | --- | --- |
| [Appetite UI](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#appetite-ui-tells-the-agent-which-token-to-use-on-ios-and-android) | An agent building a native iOS and Android app from your Figma file | Ships a Claude Code skill, Cursor rules and an AGENTS.md over Apple and Material components on one token source |
| [Dynamic Layer](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#dynamic-layer-is-built-for-claude-code-and-flutter) | A Flutter app that Claude Code customizes | Names a Claude Code workflow on its Figma kit and Flutter code |
| [gluestack UI](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#gluestack-ui-gives-an-agent-react-native-components-and-an-llms-txt) | A React Native app from coded components | Publishes an llms.txt and an MCP server for its components |
| [Untitled UI](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#untitled-ui-has-its-own-mcp-server-for-the-web) | A web app built through the kit's own MCP server | Its MCP server and CLAUDE.md serve React components, for the web |
| [Google's Material 3 Design Kit](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#google-s-material-3-kit-is-read-through-figma-s-mcp-server) | An Android app on Google's baseline | The Android reference; its page names nothing for agents |
| [Apple's iOS and iPadOS 27 UI kit](https://www.appetiteui.com/blog/best-figma-ui-kits-for-ai-agents#apple-s-ios-27-kit-states-nothing-for-agents) | Mock-ups in Apple's exact components | The iPhone reference; its pages name nothing for agents |

## The list is ranked for an agent that builds a phone app from a Figma file.

Any Figma file can reach an agent: Figma's MCP server "gives AI agents the design context they need to generate code from your Figma files", in Figma's words, and it reads a frame of any kit the same way. What a kit adds is what the agent does with that context. An agent that knows the kit's token names writes `brand/base` where it would otherwise type a hex value it read off the frame, and an agent with a component library installs a component where it would otherwise draw one.

So the checks below ask what a maker ships for the agent itself, beside the Figma file. The case is a phone app on iOS and Android, so the first check is the platforms; the last one, coded components, is where Appetite UI has nothing to offer, and the scorecard says so.

**What to check in a Figma UI kit before an agent builds from it**

| Check | What to look for |
| --- | --- |
| iOS and Android | The maker's page names both platforms, or a stack that runs on both. |
| Instructions for agents | A skill, a rules file, a CLAUDE.md or AGENTS.md, or an llms.txt from the maker, saying how to use the kit. |
| Token names to look up | The values come with names an agent can find in a file, so it writes the token, not the number. |
| Its own MCP server | A server from the maker that lets the agent search or fetch the kit, beside Figma's own. |
| Coded components | Components the agent can install or import, by stack. |

**Six Figma UI kits against the checks for an AI coding agent**

| Kit | iOS and Android | Instructions for agents | Token names | Own MCP server | Coded components |
| --- | --- | --- | --- | --- | --- |
| Appetite UI | Yes | Yes: a Claude Code skill, Cursor rules, an AGENTS.md | Yes: tokens.md and a token file | No | No: token values only |
| Dynamic Layer | Yes | Not stated: a Claude Code workflow is named | Yes: a token-driven Flutter library | Not stated | Yes: Flutter |
| gluestack UI | Yes: Expo and React Native | Yes: an llms.txt | Yes: semantic tokens in code | Yes | Yes: React Native and React |
| Untitled UI | Not stated | Yes: a CLAUDE.md in its starter kits | Yes: CSS variables | Yes | Yes: React |
| Google's Material 3 Design Kit | Not stated | Not stated | Yes: Theme Builder exports | Not stated | Not stated |
| Apple's iOS and iPadOS 27 UI kit | No: iPhone and iPad | Not stated | Not stated | Not stated | Not stated |

Checked on October 30, 2026 against each maker's own public pages. Not stated means the page does not say it, which is not the same as the kit lacking it.

## Appetite UI tells the agent which token to use on iOS and Android.

This is the entry I make, so here is what it does and what it does not.

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 file you buy includes an AI-context folder. The Core Skill, appetite-core, is a Markdown skill that opens by telling the agent to read the tokens first and to apply semantic tokens only, never a typed hex; a second skill, appetite-slop-linter, audits a diff for the values that slipped through. For Cursor the same rules come as a block for `.cursor/rules`, and for any other agent as an AGENTS.md at the project root. Beside them sit tokens.md and the token source, so the agent finds a value by its name ([Claude Code](https://www.appetiteui.com/works-with/claude-code), [Cursor](https://www.appetiteui.com/works-with/cursor)).

With the Figma MCP server connected, the agent reads a frame of the file and gets its variables by their code names, so a chip arrives as `var(--ap-bg-strong-950)` and `var(--ap-radius-full)` rather than as a gray and a number; [Figma MCP for mobile: make your agent build with your components](https://www.appetiteui.com/blog/figma-mcp-for-mobile-apps) shows that output and [Claude Code and Figma: one screen from Appetite UI, step by step](https://www.appetiteui.com/blog/claude-code-figma-one-screen) follows one screen from frame to SwiftUI. The components behind those frames are drawn twice, to Apple's conventions on 20 pages and to Material's on 17, and both read the same tokens through the [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge), so the agent that builds the Android screen uses the same names as the one that built the iPhone screen. Figma Make takes the same skill as an attachment, SKILL.md with tokens.md ([Figma Make](https://www.appetiteui.com/works-with/figma-make)).

![The Finance History screen with the All chip selected in Figma, beside the get_design_context output for that chip: a button whose classes read var(--ap-bg-strong-950), var(--ap-space-3) and var(--ap-radius-full), with the Chip description at the end, For navigation use Tabs](https://www.appetiteui.com/images/blog/figma-mcp-for-mobile-apps--01.webp)

*What the Figma MCP server returns for one chip of the file: the variables by their code names.*

What it leaves out: no coded components, so the agent builds each component in your stack from the tokens and the frame; no MCP server of its own, so Figma's does the reading; and the skills come with the purchase, with no download link. The public files an agent can read without buying are [/llms.txt](https://www.appetiteui.com/llms.txt), [/tokens.json](https://www.appetiteui.com/tokens.json) and the docs as Markdown. Figma's MCP server is Figma's: Figma lists it for "a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan".

### Where other kits beat Appetite UI

- **Coded components.** gluestack UI gives an agent React Native components, Dynamic Layer Flutter code and Untitled UI React components; Appetite UI gives token values, and the components are drawn in Figma for your team or your agent to build.
- **A kit's own MCP server.** Untitled UI and gluestack UI run servers of their own that search or generate with their components. Appetite UI relies on Figma's.
- **Free to try with an agent.** gluestack UI's library is MIT, and Untitled UI's MCP server serves its free components without signing in. Appetite UI's skills come with a paid license.
- **The web.** Untitled UI is built for web apps and dashboards. Appetite UI has no web layouts.
- **Apple's or Google's exact components.** For an app that has to look exactly like iOS or exactly like Material, the official kits are the reference.

**Pick it when** the agent builds a phone app from your Figma file, on iOS, Android or both, and every color, size and radius should arrive as one of your tokens.

## Dynamic Layer is built for Claude Code and Flutter.

**Use Dynamic Layer if** the app is built in Flutter and you want Claude Code to start from ready components.

Dynamic Layer's homepage carries the heading "Built for Claude Code workflows" and puts it in one line: "Use Dynamic Layer as your Figma & Flutter foundation, then let Claude Code customize screens, connect flows, and build working app prototypes faster." Its docs call the Flutter library "token-driven", with "Token-based foundations (colors, spacing, radius, typography)". The pages read name no MCP server, rules file or skill of its own; the workflow is Claude Code working on its Figma kit and its Flutter code. Its pricing page shows a free plan with selected components and a one-time Personal license. The two kits side by side are on [Appetite UI vs Dynamic Layer](https://www.appetiteui.com/compare/dynamic-layer).

![Dynamic Layer's homepage: the headline Build mobile apps faster with Figma & Flutter, a line about ready-made Figma components, app templates and Flutter code, and links to Preview in Figma and Preview in Github](https://www.appetiteui.com/images/blog/kits/kit-page--dynamic-layer--2026-10-30.webp)

*Dynamic Layer: dynamiclayer.io, captured October 30, 2026.*

## gluestack UI gives an agent React Native components and an llms.txt.

**Use gluestack UI if** you build in React Native or Expo and want the agent to assemble screens from coded components.

gluestack's llms.txt opens with "Universal React & React Native component library with Tailwind CSS v4" and "Copy-paste components for web (Next.js) and mobile (Expo / React Native)". The same file links an MCP Server page, which describes "A server that generates complete, consistent codebases using gluestack-ui v2 components". Its tokens are "a semantic color token system inspired by shadcn/ui", defined in code rather than exported from a Figma file, and its Figma Community design kit follows the v2 configuration while the library has moved on, so the Figma file and the code an agent writes are not the same version (both read October 14, 2026). The library is MIT. More on [Appetite UI vs gluestack UI](https://www.appetiteui.com/compare/gluestack-ui).

![gluestack's homepage in its dark theme: the headline React & React Native UI Components & Patterns, a Get Started button, an install command and a QR code for its Kitchensink demo app](https://www.appetiteui.com/images/blog/kits/kit-page--gluestack-ui--2026-10-30.webp)

*gluestack UI: gluestack.io, captured October 30, 2026.*

## Untitled UI has its own MCP server, for the web.

**Use Untitled UI if** the agent builds a web app, a dashboard or a marketing site in React.

Of the kits on this page, Untitled UI ships the most for an agent. Its MCP page says "The Untitled UI MCP server enables AI assistants like Claude Code and Cursor to directly access our component library", and lists seven tools, from search_components to search_icons. Its Claude page says "Our starter kits include a CLAUDE.md file that provides Claude Code with context about the Untitled UI component library." All of it serves Untitled UI React, a web library "built with Tailwind CSS and React Aria", and its pages do not name iOS or Android. For a phone app it is the wrong library; for a web product beside the app it is a strong one. More in [Appetite UI vs Untitled UI for a mobile app, screen by screen](https://www.appetiteui.com/blog/appetite-ui-vs-untitled-ui).

![Untitled UI's homepage: the headline The ultimate Figma UI kit and React component library beside a collage of web page layouts, with Untitled UI React, Untitled UI Figma and Buy now buttons](https://www.appetiteui.com/images/blog/kits/kit-page--untitled-ui--2026-10-30.webp)

*Untitled UI: untitledui.com, captured October 30, 2026.*

## Google's Material 3 kit is read through Figma's MCP server.

**Use Google's kit if** you ship an Android app on Google's baseline.

The Material 3 Design Kit is Google's own drawing of Material, and its latest changelog entry says "Material Android is Compose-first. Use this design kit for Jetpack Compose." Its page names no instructions for agents and no MCP server, so an agent reaches it the way it reaches any file, through Figma's MCP server. The Material Theme Builder plugin generates your theme "as Figma styles" and exports it as code, which gives an agent values to work from. More on [Appetite UI vs the Material 3 Design Kit](https://www.appetiteui.com/compare/material-3-kit).

![The Figma Community page of Google's Material 3 Design Kit: a purple cover reading Material 3 Design Kit, an Open in Figma button and the kit's introduction under About](https://www.appetiteui.com/images/blog/kits/kit-page--material-3--2026-10-30.webp)

*Google's Material 3 Design Kit: figma.com/community/file/1035203688168086460, captured October 30, 2026.*

## Apple's iOS 27 kit states nothing for agents.

**Use Apple's kit if** you design for iPhone and iPad only and want Apple's exact components.

Apple's Design Resources page lists the iOS and iPadOS 27 UI kit as a Figma and a Sketch download, and neither it nor the Figma Community file says anything about agents, skills or MCP servers. Its license grants use "solely for creating mock-ups of user interfaces designed for use in software products that run only on Apple's" platforms, in the words of the License Agreement for Apple Design Resources. It stays on this list as the reference for how iOS looks. More on [Appetite UI vs Apple's iOS 27 UI kit](https://www.appetiteui.com/compare/apple-ios-kit).

![The Figma Community page of Apple's iOS and iPadOS 27 UI kit: its cover reading iOS and iPadOS 27 UI Kit, an Open in Figma button, and the line Updated October 28, 2026 under About](https://www.appetiteui.com/images/blog/kits/kit-page--apple-ios-27-figma--2026-10-30.webp)

*Apple's iOS and iPadOS 27 UI kit: figma.com/community/file/1651309003795292092, captured October 30, 2026.*

## The token test shows what the agent will write.

The scorecard reads the makers' pages. This test reads what an agent does with a kit, and it takes one prompt.

1. **Connect Figma's MCP server**
Add it to Claude Code or Cursor, as Figma's guide describes, and open a screen of the kit in Figma.

2. **Ask for one screen**
Copy the link to a frame, paste it and ask the agent to build that screen in your stack, with whatever the kit ships for agents loaded.

3. **Search the diff for numbers**
Look for hex values, literal spacing and hand-set font sizes. Each one is a value the agent read off the frame instead of a token, and each one is a place a rebrand will miss.

4. **Switch to dark and to the other platform**
Ask for the same screen in dark mode and on the other platform. If the agent reaches for the same token names, the kit has given it a system; if it types new values, it has given it a picture.

## Pick by the app the agent is building.

Answer three questions and the picker names the kit to start with and two more to look at. Appetite UI comes up only where its traits answer: it has no coded components, and that answer sends you elsewhere.

**Which kit should your agent build from?**

- An app on iPhone and iPad only: start with Apple's iOS and iPadOS 27 UI kit, then Appetite UI or Dynamic Layer.
- An app on Android only: start with Google's Material 3 Design Kit, then Appetite UI or Dynamic Layer.
- A Flutter app with coded components: start with Dynamic Layer, then gluestack UI or Appetite UI.
- A React Native app with coded components: start with gluestack UI, then Dynamic Layer or Appetite UI.
- A web app or a dashboard: start with Untitled UI, then gluestack UI.

**Bob's take:**
I built the Core Skill after watching agents rebuild Appetite UI screens with the right layout and the wrong numbers: every gray was a hex, every gap was a literal. The frame was fine; nobody had told the agent the names. If your developers want an agent to snap components together, buy a library with an MCP server. If the agent is building your own components for a phone app, give it your tokens and a rule to use them, and check the diff anyway.

This page is one of three rankings for one case. [The best Figma UI kits with dark mode for mobile apps in 2026](https://www.appetiteui.com/blog/best-figma-ui-kits-with-dark-mode) ranks the kits by how dark mode is built, and [The best Figma UI kits with variables for mobile apps in 2026](https://www.appetiteui.com/blog/best-figma-ui-kits-with-variables) by what lives in variables and what reaches code. For every kit against the checks for one app on iOS and Android, see [The best Figma UI kits for mobile apps in 2026](https://www.appetiteui.com/blog/best-figma-ui-kits-for-mobile-apps), and for the same decision on one page, [Appetite UI alternatives](https://www.appetiteui.com/compare/alternatives). What the Core Skill holds is in [How Appetite UI works with AI agents: Claude, Cursor and the Core Skill](https://www.appetiteui.com/blog/appetite-ui-ai-agents-core-skill), and the [AI page](https://www.appetiteui.com/ai) shows it at work.

## Questions

### Which Figma UI kit works best with Claude Code for a mobile app?

For an iOS and Android app built from your Figma file, Appetite UI. The file includes a Core Skill for `.claude/skills` that tells Claude Code to use semantic tokens only, a slop linter skill and an AGENTS.md, and the Figma MCP server hands Claude Code the frames with their variables by name. For a Flutter app, Dynamic Layer describes its kit as "Built for Claude Code workflows" and ships Flutter code.

### What is Appetite UI?

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.

### Which Figma UI kits have their own MCP server?

Of the kits on this page, Untitled UI and gluestack UI. Untitled UI's server "enables AI assistants like Claude Code and Cursor to directly access our component library", with seven tools, and gluestack UI's MCP server "generates complete, consistent codebases using gluestack-ui v2 components". Appetite UI has no server of its own; an agent reads its file through Figma's MCP server.

### Does Appetite UI work with Cursor?

Yes, through rules. The file you buy includes a rules block for `.cursor/rules/appetite-ui.mdc` and an AGENTS.md, and both tell the agent which token to use. Cursor needs the .mdc extension for project rules.

### Is Appetite UI a Figma Make kit?

This page does not claim that. Figma describes Make kits as built from "npm packages for code context" and "Variables and styles from published Figma Design libraries"; Appetite UI's route into Figma Make is the Core Skill, SKILL.md with tokens.md, attached to the chat.

### Do I need a paid Figma plan for an agent to read a kit?

For Figma's MCP server, yes. Figma's guide says it "requires a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan". Appetite UI's public token file, /tokens.json, and its /llms.txt need no Figma account.

### Does Appetite UI include coded components for an agent to use?

No. Appetite UI ships token values for SwiftUI, Jetpack Compose, Flutter and CSS, and the components are drawn in Figma. For components as code, gluestack UI covers React Native, Dynamic Layer Flutter and Untitled UI React for the web.

**What changed in this update:**
October 30, 2026: first published, with every maker's page read that day.

## Sources

1. [Guide to the Figma MCP server, Figma Learn](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server), read October 30, 2026
2. [Get started with Make kits, Figma Learn](https://help.figma.com/hc/en-us/articles/39241689698839-Get-started-with-Make-kits), read October 30, 2026
3. [Dynamic Layer](https://www.dynamiclayer.io/), read October 30, 2026
4. [Dynamic Layer docs, introduction](https://www.dynamiclayer.io/docs/introduction), read October 30, 2026
5. [Dynamic Layer pricing](https://www.dynamiclayer.io/pricing), read October 30, 2026
6. [gluestack UI llms.txt](https://gluestack.io/llms.txt), read October 30, 2026
7. [gluestack UI MCP Server](https://gluestack.io/ui/docs/mcp-server/mcp-server), read October 30, 2026
8. [gluestack](https://gluestack.io/), read October 30, 2026
9. [Untitled UI MCP server](https://www.untitledui.com/react/integrations/mcp), read October 30, 2026
10. [Untitled UI and Claude Code](https://www.untitledui.com/react/integrations/claude), read October 30, 2026
11. [Untitled UI pricing](https://www.untitledui.com/pricing), read October 30, 2026
12. [Material 3 Design Kit, Google's kit on Figma Community](https://www.figma.com/community/file/1035203688168086460/material-3-design-kit), read October 30, 2026
13. [Material Theme Builder, Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder), read October 30, 2026
14. [Apple Design Resources](https://developer.apple.com/design/resources/), read October 30, 2026
15. [iOS and iPadOS 27, Apple's UI kit on Figma Community](https://www.figma.com/community/file/1651309003795292092/ios-and-ipados-27), read October 30, 2026
16. [License Agreement for Apple Design Resources, PDF](https://developer.apple.com/support/downloads/terms/apple-design-resources/Apple-Design-Resources-License-20230621-English.pdf), read October 14, 2026