How to vibe code a mobile app in 2026: the complete setup for iOS and Android

To vibe code a mobile app in 2026, pick a stack the agent already knows well, give it written rules and tools so it can build, run and look at the app, start from coded components instead of an empty screen, and keep the store requirements and the security pass as steps you run yourself. Expo with React Native is the shortest path to one app on iOS and Android. SwiftUI and Jetpack Compose are the path to two fully native apps.

I build Appetite UI Code this way. Agents in Claude Code write and maintain the same components in React Native, SwiftUI, Flutter and Jetpack Compose, and I review what ships. This guide is the setup that held up in that work, with the data behind each choice and the commands to reproduce it.

What does vibe coding a mobile app mean in 2026?

Vibe coding means describing what you want in plain language and letting an AI model write the code. Andrej Karpathy named it in February 2025, and Collins Dictionary made it Word of the Year in November 2025. By late 2026 the word covers a wide range: a founder who never opens a source file, and a developer who runs three agents at once and reads every diff.

On mobile, where you sit on that range matters more than on the web. A phone app is a compiled binary signed with your identity, reviewed by Apple and Google, installed on devices you never see and updated through a store. A model writes a screen in a minute. It does not sign the app, pass App Review or decide how your app should feel.

The 2026 Stack Overflow Developer Survey shows where developers draw that line. Of more than 30,000 respondents, 66% of AI users work in coding agents, and 73% of people who use AI coding assistants use them every day. Claude Code is used by 66% of AI users and GitHub Copilot by 59%.

67% use AI to generate code in areas they already know and 61% to debug. Only 20% let it deploy, operate or troubleshoot production systems. Developers let agents write and fix code, and keep the release for themselves. This guide follows the same split.

The speed question is still open. METR's randomized trial from 2025 found experienced open-source developers 19% slower with AI tools while they believed they were faster. METR's February 2026 update says developers are likely sped up by now, but calls its own new data only very weak evidence for how much. Plan your project around review time, not around typing time.

What changed between February 2025 and November 2026?

Why does the setup matter more than the prompt?

Because there are more apps than ever, and downloads did not follow. Sensor Tower counted about 600,000 new App Store apps in 2025, up 30%, and about 560,000 in the first half of 2026 alone. Downloads grew 3% to 35.4 billion in 2025 and 2% to 17.6 billion in the first half of 2026.

An agent removed the cost of writing the code. It did not remove the cost of standing out in a store with twice the supply. Two things decide that, and both come from the setup, not from the prompt: whether the app works on real devices, and whether it looks like a product someone designed. The full numbers, including Apple's own review data, are in More apps, same downloads.

Which stack should an agent build your app in?

Choose the stack before the tool. The stack decides what the agent knows, how you preview on a phone, which store rules you meet by default and how hard it is to leave.

Cross-platform is no longer a niche. Appfigures found that 15% of new apps and games released on the App Store and Google Play in 2024 used React Native or Flutter, up from 7% in 2020. Among the top 10,000 App Store apps by monthly downloads, 1,350 use React Native, 1,184 use Flutter and 218 use Kotlin Multiplatform.

If you have no stack yet, start with Expo. Four reasons, each one checkable:

1. One TypeScript codebase for both stores. React Native apps are native apps, not web views, and Expo SDK 58 targets React Native 0.88 and iOS 27.
2. The agent files are already there. create-expo-app writes AGENTS.md, which Expo's docs list as read by Claude Code, Codex and Cursor, and with Claude Code installed a .claude/settings.json that turns on the Expo plugin. One command installs Expo Skills and the Expo MCP server.
3. A phone preview without Xcode. Expo Go opens the app from a QR code. For store builds, EAS Build runs iOS builds on macOS machines in Expo's cloud.
4. Native views when you need them. The @expo/ui packages let you use SwiftUI and Jetpack Compose views inside the same app.

Go fully native when the app lives on Apple frameworks such as HealthKit, widgets and Live Activities, or when you need the newest platform UI on day one. Then run two apps, SwiftUI and Jetpack Compose, and keep them in step with shared tokens. How one design system reads the same token names in four languages is in One design system in React Native, SwiftUI, Compose and Flutter.

Should you use an app builder, a coding agent or an IDE agent?

There are three ways to turn a prompt into a mobile app in 2026. They differ in where the code lives and how much of it you own.

In March 2026 Apple stopped updates of the Replit and Vibecode iPhone apps and pulled Anything from the App Store for a few days, citing guideline 2.5.2, which forbids apps that download or run code that changes their features. Apple told MacRumors there are no specific rules against vibe coding. The rule hits builder apps that run generated apps inside their own iPhone app. It does not hit the app you build with an agent and submit like any other app.

Whichever way you start, end with code in a git repository you own. The rest of this guide assumes a coding agent in your repository, because that setup works with every stack and every tool.

What is the complete setup, step by step?

Open larger:

1. Accounts, fees and hardware

Open the Google Play account on day one. A personal account created after November 13, 2023 has to run a closed test with at least 12 testers for 14 continuous days before it can apply for production access.

2. Create the project

npx create-expo-app@latest my-app --template default@sdk-58
cd my-app
npx expo start

Scan the QR code with Expo Go. The template writes the files the agent reads:

Expo SDK 58 needs Node.js 22.13 or newer on the 22 line, 24.3 or newer on the 24 line, or Node.js 26 and later.

3. Install the agent and the Expo plugin

curl -fsSL https://claude.ai/install.sh | bash
claude plugin install expo@claude-plugins-official
claude

The plugin installs Expo Skills and registers the Expo MCP server in one step. Run /mcp inside the session to sign in to your Expo account. Cursor and Codex read AGENTS.md directly. For them, install Expo Skills and the Expo MCP server separately, as Expo's docs describe.

4. Give the agent eyes through MCP

An agent that only edits files is guessing. An agent that can build the app, open it, take a screenshot and tap a button checks its own work. That is what the Model Context Protocol servers below add.

claude mcp add xcodebuildmcp -- npx -y xcodebuildmcp

Xcode 27 builds the same idea into the IDE. Apple says its agents can write and run tests, check visual changes in previews and interact with the simulator in the new Device Hub. On Android, the AI New Project flow in Android Studio builds the app, reads the errors, fixes them and walks through each screen in the emulator.

5. Write the rules

AGENTS.md is where you write down the decisions the agent would otherwise make for you. Keep it short enough to read in a minute. Write decisions, not descriptions.

# Habit Loop

A habit tracker for people who forget their routines. iOS and Android, light and dark.

## Components
- Build screens from the components in `components/`. Do not create a new control when one exists.
- Use the component names from the Figma file: Top Bar, List, Segmented Control, Badge.

## Values
- Colors, spacing, radius and type come from the theme. No hex values, no literal sizes, no fontFamily set by hand.

## Platforms
- Follow iOS conventions on iOS and Material 3 on Android: back navigation, sheets, tab bar.
- Touch targets at least 44 pt on iOS and 48 dp on Android.

## Before you finish
- Run `npx tsc --noEmit` and `npx expo lint`.
- Open the changed screen in the simulator in light and dark mode and take a screenshot.
- Search the diff for hex values, literal numbers and keys. Replace or remove them.

Rules are context the agent follows most of the time, not a lock. That is why step 9 exists.

6. Start from components, not from an empty screen

Ask an agent for "a clean, modern habit screen" in an empty project and it fills every open decision with the most common value it has seen: the same blue, the same 16-point radius, the same card. That is why so many generated apps look alike, and it is the subject of Why vibe-coded apps all look the same.

Put the decisions in the repository before the first screen: components the agent can import by name, and tokens for color, spacing, radius and type in light and dark mode. That can be your own design system, or a coded UI kit like Appetite UI Code. The connection is in How do you connect Appetite UI Code to your agent?

7. Prompt for content and behavior, not for style

A weak prompt hands the design back to the model:

Make a beautiful, modern habit tracker home screen with a nice purple accent.

A prompt that works names the parts, the states and the data, and leaves the values to the system:

Add a Today screen to the app.
Top Bar with the date and an add action.
Segmented Control: Today, Week.
A List of habits. Each row: checkbox, habit name, streak Badge.
Empty State when there are no habits, with a button that opens the add sheet.
Use the existing components and theme tokens. No new colors, sizes or fonts.
When you finish, open the screen in the iOS simulator and the Android emulator, light and dark, and show me the screenshots.

8. Close the loop: build, run, look, fix

Open larger:

With step 4 in place, ask the agent to finish every task by opening the result. A screenshot of the Android emulator in dark mode finds problems a passing build does not: a label cut off at 412 dp, a white icon on a white surface, a sheet that covers the keyboard. When a run works, ask the agent to save the steps as a Maestro Flow, so the same check runs again after the next change.

9. Read the diff before the screen

Open the diff and look for five things:

1. A hex value or rgb( where a color token belongs.
2. A literal number where a spacing, radius or size token belongs.
3. A fontFamily or fontSize set by hand.
4. A key, token or password in a file that ships in the app.
5. A new dependency you did not ask for.

Each one is a place where the agent guessed. Ask it to replace the value with the token, or to move the secret to a server.

10. Build and ship

npm install -g eas-cli
eas build --platform all
eas submit --platform ios
eas submit --platform android

Send the iOS build to TestFlight and the Android build to a closed test on the same day. If you automate releases with EAS Workflows, keep its require-approval job in front of the stores: it adds a human check before a release goes to App Store or Play review.

How do you keep a vibe-coded app from looking generic?

Three things make a generated screen read as designed: components that exist before the prompt, tokens that hold every value, and platform rules the agent follows without being asked.

Components with the same names in design and code. When the Figma file calls it Segmented Control and the code exports SegmentedControl, a designer and an agent talk about the same thing. Figma's MCP server lets the agent read those components and variables straight from the file, and write work back into it. Figma reported that write-to-Figma MCP usage grew 75% quarter over quarter in Q2 2026. The setup with Appetite UI is in Figma MCP for mobile and Claude Code and Figma: one screen from Appetite UI.

Tokens for every value, in light and dark. A brand color, a radius scale and a type scale in one theme file mean a rebrand is one edit, not a search through every screen.

Platform conventions. iOS and Android differ in navigation, sheets, back behavior and touch targets: 44 points on iOS and 48 dp on Android. An agent that is not told uses one platform's pattern on both. The per-component list is in iOS vs Material 3 and the sizes in Touch target size on iOS and Android.

How do you connect Appetite UI Code to your agent?

Appetite UI Code gives your agent the components from the Appetite UI Figma kit in React Native, SwiftUI, Flutter and Jetpack Compose, with the same names, variants and tokens. React Native has every Appetite UI component and an App Starter on Expo Router with Tasks, Foodie and AI flows. SwiftUI, Flutter and Compose start with the core components, and every release adds more.

appetite-ui-code-1.0.0/
  README.md      what is inside, the install for each stack, the brand
  CLAUDE.md      instructions for coding agents, all four stacks
  AGENTS.md      the same instructions, for Codex and Cursor
  starter/       the Expo App Starter: Tasks, Foodie and AI examples
  react-native/  the core and tokens packages, component source
  swiftui/       Swift package AppetiteCore, components, tests
  flutter/       Dart package appetite_ui, components, tests
  compose/       Gradle modules :core and :components, tests
  tokens/        DTCG source and outputs for every stack and CSS
  agent/         CLAUDE.md, AGENTS.md, skill, Cursor rules
  docs/          install guide, one page per component, tokens
  figma.md       the Figma release and its names in code

Install it in your stack.

Point the agent at the kit. The agent kit holds AGENTS.md, CLAUDE.md, a skill and Cursor rules. AGENTS.md sends the agent to the kit's skills, so it maps every part of a screen to a component and a token by its Figma name. Then the prompt can stay about content:

Build the My work screen with Appetite UI components.
Segmented Control: Today, Upcoming, Done. A List of tasks with checkbox, title, project Badge and due date. Empty State when the list is empty.
No hex values, no literal sizes. Check light and dark on iOS and Android.

Set your brand once. Brand color, radius and font live in one theme value. In React Native that is the file brand.ts; SwiftUI, Flutter and Compose take the same values at the root of the app. Every component and the App Starter follow.

import type { AppetiteBrand } from '@appetite-ui/core';

export const brand: AppetiteBrand = {
  color: '#ca3500',
  radiusScale: 1, // radius/md is 8 at scale 1
  fonts: { body: 'Plus Jakarta Sans', heading: 'Plus Jakarta Sans' },
  fontFiles: {
    'Plus Jakarta Sans': {
      faces: {
        400: require('../../../assets/fonts/PlusJakartaSans-Regular.ttf'),
        500: require('../../../assets/fonts/PlusJakartaSans-Medium.ttf'),
        600: require('../../../assets/fonts/PlusJakartaSans-SemiBold.ttf'),
      },
      ascender: 1.038,
      descender: 0.222,
    },
  },
};

Keep iOS and Android honest. iOS and Material conventions sit behind one platform switch in the theme, like the platform layer in the Figma file. The agent builds one screen, and the theme decides how a sheet, a tab bar or a back action behaves on each platform.

Add the Figma file if someone designs. With Appetite UI Complete, the designer works in the Figma file and the agent builds with the same components in code. Without a designer, Code works alone and ships its own tokens.

What Code 1.0 does not do. The operating system draws the status bar, the keyboard, the Dynamic Island, widgets and Live Activities. The Apple and Material 3 reference components stay in the Figma file. SwiftUI, Flutter and Compose start with the core set, and the rest arrives in free updates.

Want to try the method before you buy? The free Appetite UI base on GitHub uses the same component names under the MIT licence, with the Appetite UI brand fixed. Run steps 5 to 9 with it and you will see whether the method fits your app.

What do App Store and Google Play check in 2026?

Stores do not ask how the code was written. They check what you upload, who you are and how the app behaves.

Apple reviewed 9,100,620 submissions in 2025 and rejected 2,093,244 of them. 415,532 rejections fell under the Design section, which covers copycats, minimum functionality and spam. Apple says it reviews 90% of submissions within 48 hours. On Google Play, a new personal account spends at least 14 days in the closed test before it can even apply for production.

The rules have no line about vibe coding. They have lines about copies, spam and code that changes after review, and a vibe-coded app meets them like any other. Screenshots are part of the listing too. The sizes are in the store screenshot size tool.

What breaks when nobody reads the code?

Security, first. A generated app can work in a demo and still expose every user's data.

of generated code samples chose an insecure implementation (Veracode)

45%

exposed secrets in more than 5,600 scanned vibe-coded apps (Escape)

400+

CVEs linked to AI-generated code through March 2026 (Georgia Tech)

74

iOS AI apps with security misconfigurations (CovertLabs)

196 of 198

A mobile app adds one rule that web developers forget: everything in the app bundle can be read by anyone who installs it. Expo's documentation says it plainly: values in EXPO_PUBLIC_ variables are visible in plain text in the compiled app. A key in the bundle is a published key.

Run these checks before every store build:

1. No secret keys in the app. Keys for payments, AI APIs and databases live on a server. Expo Router API routes, the files ending in +api.ts, run on the server, so a key read there never reaches the phone.
2. Every database table has access rules. With Supabase, turn on row level security for every table. With Firebase, write security rules before the first real user.
3. Auth tokens sit in secure storage, the Keychain on iOS and the Keystore on Android, not in plain local storage.
4. Every new dependency was asked for, and it exists. Agents sometimes add packages nobody needs.
5. Personal data in logs and analytics is off.
6. AI features that send user data to a third party are listed in Apple's privacy details and Google's Data safety form.
7. The agent's permissions are scoped: it runs in the project folder, and production credentials are not in its environment.

What does a first week look like?

A realistic plan for one person with an agent, from an empty folder to builds in TestFlight and a Google Play closed test.

The closed test then runs for 14 days. Use them: the testers are your first users.