Skip to content
Get packs

React Native from Stitch Designs

Turns Stitch HTML designs into React Native StyleSheet components and keeps them in sync

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
7 files

What it does

Once installed, the agent takes web designs exported from Google's Stitch design tool and rebuilds them as React Native mobile screens using StyleSheet and native primitives like View, Text and Pressable instead of HTML and Tailwind. It downloads each screen's HTML and screenshot with a bundled script, pulls colour and typography tokens into a theme file, and can update existing native components when the Stitch design changes. The skill also includes a validation script that checks components against its architectural rules.

Great for

  • Mobile developers turning Stitch prototypes into a React Native app
  • Teams that want existing native screens re-aligned with an updated Stitch design
  • Designers who want a faithful first-pass implementation to review

Skip it if

  • Projects not using Stitch designs or React Native, since the workflow is specific to both (wasted effort)
  • Production use without human review, because the generated code still needs testing on real devices and the skill's own steps can drift from the design

Try asking

  • “Convert my Stitch project's home and login screens into React Native components”
  • “Sync the existing native checkout screen with the latest Stitch design”
  • “Extract the Tailwind theme from my Stitch HTML into src/theme.ts”
Step-by-step guide: how to use React Native from Stitch DesignsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the Apache-2.0 licence and an attribution note.

    react-native.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip react-native.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip react-native.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Answer the agent's prompt about refreshing existing designs deliberately, since re-downloading overwrites local files.
  • Review the downloaded screenshots and generated theme.ts against the original design before accepting code.
  • Run the validate script after generation to catch hex colours inside StyleSheet and disallowed HTML elements.

What's inside

  • package-lock.json
  • package.json
  • README.md
  • resources/architecture-checklist.md
  • scripts/fetch-stitch.sh
  • scripts/validate.js
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.