How to Make AI-Generated React Native Apps Look Like One Product

The design context you set up before you start prompting is what separates “cool prototype” from “real product.”

Photo by Balázs Kétyi on Unsplash

The first React Native app I built with Claude Code looked like it had been designed by six different people. Every screen had slightly different fonts, spacing, button styles. The AI was doing its best, but I hadn’t given it the context it needed to be consistent.

This is fixable. Since figuring out how, every React Native project I’ve worked on with Claude Code has looked cohesive from screen one, and I want to share the pattern.

Why AI-generated apps look inconsistent by default

Claude Code, out of the box, will make reasonable design choices per screen. The problem is that “reasonable” for a login screen might land on a different button style than “reasonable” for a settings screen.

Each choice is defensible in isolation. The composition is chaotic.

This isn’t a limitation of the AI. It’s a symptom of the AI having no design system to follow. Given one, it becomes remarkably good at staying within it.

The design-token file that changes everything

The single most impactful file to add to a React Native project you’re building with AI is a theme.ts that defines every design token in one place:

export const theme = {
  colors: {
    background: '#0A0A0B',
    surface: '#141416',
    text: '#F5F5F5',
    accent: '#7C3AED',
    danger: '#EF4444',
  },
  spacing: {
    xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48,
  },
  radius: {
    sm: 4, md: 8, lg: 16, full: 9999,
  },
  fonts: {
    body: 'Inter_400Regular',
    heading: 'Inter_700Bold',
  },
  fontSize: {
    xs: 12, sm: 14, base: 16, lg: 20, xl: 28,
  },
};

Then in every prompt, tell Claude Code: “Use tokens from theme.ts. Never inline colors, spacing, or font sizes."

From that point on, every screen the AI generates uses theme.colors.text instead of #F5F5F5, and theme.spacing.md instead of 16. The visual coherence emerges automatically.

The component-library-first prompt pattern

The second lever is building a small component library first, then prompting Claude Code to compose it.

Ship <Button variant='primary'>, <Card>, <Screen>, <Text variant='heading'> first. Six or eight components. Simple, well-styled, using your tokens. Get them right.

Then every subsequent prompt is “build a settings screen using components from ~/ui." Claude Code composes existing components rather than inventing new ones.

This is essentially the same pattern that makes designers reach for a design system in the first place. Applied to AI, it removes the guesswork.

The Figma-to-tokens workflow that scales

For teams working with a real design system: export your Figma variables as JSON, then have a codegen step turn that JSON into your theme.ts. Whenever the design system updates, the token file regenerates, and every screen picks up the new values.

Tools like Style Dictionary, Tokens Studio, or a simple custom script can do this. The point is: your design system is the source of truth, and Claude Code reads from it.

This means designers can iterate on the visual system without engineers manually updating theme values, and the AI-generated screens stay in sync.

The pattern I use for every new project

Every new React Native project I set up with Claude Code now starts with the same first-day tasks:

1. Write a theme.ts with all design tokens
2. Build 6–8 core components that use those tokens
3. Write an AGENTS.md at the project root that says: "Always use theme tokens. Always compose from ~/ui/*. Never inline styles."
4. Add a Storybook or a visual test harness so you can see every component in isolation

Total time: half a day. Payoff: every screen Claude Code generates from that point on looks like part of the same product.

For anyone building a React Native app with AI as their primary coding tool, this is the design workflow that makes the difference between “cool prototype” and “looks like a real product.”

It’s not more prompting. It’s the design context you set up before you start prompting.

If you’d rather start from a project that already has the tokens, components, and agent instructions wired up, *Applighter ships Expo templates with exactly this structure in place.*

If this saved you a redesign, a clap helps it reach the next person staring at six mismatched screens. What’s in your AGENTS.md?