MDX Limo
Claude Code on your Phone - full guide

Ship Real Products From Your iPhone With Claude Code

A practical guide to building and deploying software entirely from an iPhone using Claude Code on mobile device.

What This Is

Claude Code is Anthropic's agentic coding tool. It reads your repo, writes code, runs commands, and pushes commits. The web version at claude.ai/code runs in any browser — including Safari on iPhone. You can also use the Claude mobile app for iOS (available on the App Store) to access Claude Code directly from a native app on your iPhone or iPad. That means you can build full applications, push to GitHub, and deploy to production without ever opening a laptop.

This guide covers the full workflow: account setup, pricing, connecting repos, deploying, and starter prompts to get shipping immediately.

Pricing Tiers

Claude Code usage is tied to your Anthropic plan:

PlanPriceWhat You Get
Pro$20/monthAccess to Claude Code with standard usage limits. Good for side projects and light daily use. You will hit rate limits on heavy sessions.
Max 5x$100/month5x the usage of Pro. Enough for sustained daily building — multiple repos, longer sessions, bigger codebases.
Max 20x$200/month20x the usage of Pro. For power users shipping multiple products or working on large codebases all day.
Team$30/user/month (billed monthly)Pro-level usage per seat plus collaboration features. For teams shipping together.
EnterpriseCustom pricingSSO, audit logs, higher limits, dedicated support.

Which should you pick? Start with Pro ($20). If you're regularly hitting rate limits mid-session, upgrade to Max 5x. Most individual builders find Max 5x is the sweet spot for serious daily use.

Step 1: Create a GitHub Account

If you don't have one yet:

  1. Open Safari on your iPhone
  2. Go to github.com
  3. Tap Sign up
  4. Enter your email, create a password, choose a username
  5. Verify your email
  6. You now have a GitHub account with unlimited public and private repos

If you already have an account, just make sure you're signed in to GitHub in Safari before proceeding.

Step 2: Create a Repository

Still in Safari on your iPhone:

  1. Go to github.com/new
  2. Enter a Repository name (e.g., my-landing-page, data-dashboard, smart-contract)
  3. Add a short description
  4. Choose Public or Private
  5. Check Add a README file — this gives the repo an initial commit so Claude Code can connect to it
  6. Tap Create repository

Keep the repo URL handy. It looks like: https://github.com/yourusername/your-repo-name

Step 3: Connect Claude Code to Your Repo

  1. Open Safari and go to claude.ai
  2. Sign in with your Anthropic account (or create one and pick a plan)
  3. Start a new conversation and select Claude Code — or go directly to claude.ai/code
  4. Claude Code will prompt you to connect a GitHub repository
  5. Authorize the GitHub integration when prompted — this lets Claude Code read and write to your repos
  6. Select the repository you just created
  7. Claude Code now has access to your codebase

Step 4: Set Environment Privileges

When Claude Code needs to run commands (installing packages, running builds, executing scripts), it will ask for permission. On the web:

  • You'll see prompts like "Claude wants to run: npm install" — tap Allow or Allow All for the session
  • For build and deploy commands, Claude Code needs shell access — grant it when prompted
  • If you're using environment variables (API keys, secrets), you can set them through the session or instruct Claude to create .env files (make sure .env is in your .gitignore)

Tip for iPhone: The permissions flow is the same as on desktop. The main difference is screen size — rotate to landscape when reviewing longer diffs if it helps.

Deploying to Production

Option A: GitHub Pages (Free, From Main Branch)

When to use it: Static sites. Landing pages, documentation, portfolios, marketing sites, reports, simple apps built with vanilla HTML/CSS/JS or static site generators.

How it works:

  1. Tell Claude Code to build your site with the output in the root or a /docs folder
  2. Push to main
  3. Go to your repo on GitHub → Settings → Pages
  4. Under Source, select Deploy from a branch → pick main and /root (or /docs)
  5. Your site is live at https://yourusername.github.io/your-repo-name

What you'd tell Claude Code:

"Build a landing page for [product]. Use vanilla HTML, CSS, and JS. Put all files in the root directory. Make sure index.html is the entry point. Push to main when done."

GitHub Pages is ideal when:

  • Your site is purely static (no server, no database, no API routes)
  • You want zero cost and zero configuration
  • You're publishing reports, docs, or simple marketing sites
  • You want automatic deploys on every push to main

Option B: Vercel (Free Tier Available)

When to use it: Dynamic apps. Anything with server-side rendering, API routes, serverless functions, databases, authentication, or a framework like Next.js, SvelteKit, or Nuxt.

How it works:

  1. Go to vercel.com and sign in with your GitHub account
  2. Click Import Project and select your repo
  3. Vercel auto-detects the framework and configures the build
  4. Every push to main triggers an automatic deploy
  5. You get a URL like https://your-project.vercel.app

What you'd tell Claude Code:

"Build a Next.js app with [features]. Set up the project with the app router. Push to main when ready — I have Vercel connected for auto-deploy."

Vercel is ideal when:

  • You're using a framework (Next.js, SvelteKit, Remix, Nuxt, Astro)
  • You need API routes or serverless functions
  • You need server-side rendering or dynamic content
  • You want preview deployments on pull requests
  • You need environment variables managed through a dashboard

Option C: Other Platforms

  • Netlify — Similar to Vercel, good for Jamstack sites and serverless functions
  • Railway — Good for full-stack apps with databases, background jobs, cron tasks
  • Fly.io — Good for containerized apps that need to run in specific regions
  • Cloudflare Pages — Fast, free tier, good for static and edge-rendered sites

For most people starting out: GitHub Pages for static, Vercel for everything else.

Generative UI on GitHub Pages

One of the most powerful things you can do from your iPhone is have Claude Code generate rich, interactive UI — and deploy it for free on GitHub Pages. You don't need React, a build step, or a framework. There are lightweight libraries designed exactly for this.

json-render and Similar Tools

json-render lets you define UI components as JSON and render them as HTML. This is a natural fit for Claude Code workflows because:

  • Claude is excellent at generating structured JSON
  • The output is static HTML that works on GitHub Pages with no build step
  • You can iterate on the UI by tweaking the JSON — no need to rewrite templates

What you'd tell Claude Code:

"Create an interactive dashboard using json-render. Define the layout as a JSON structure with cards, tables, and charts. Use vanilla HTML with the json-render library loaded from CDN. Output everything in the root directory with index.html as the entry point. Push to main."

Other Generative UI Options for Static Hosting

  • json2html — Convert JSON data into HTML tables and lists. Good for data-heavy pages
  • Handlebars.js (precompiled) — Generate HTML from templates and JSON data, outputting static files
  • Lit HTML — Lightweight templating that runs client-side with no build step
  • Alpine.js — Add interactivity to static HTML with minimal JavaScript, directly in your markup
  • Vanilla Web Components — Have Claude Code generate custom elements that render from JSON config files

The pattern is the same in all cases: Claude Code generates structured data (JSON, config objects), a lightweight library renders it in the browser, and GitHub Pages serves it for free. No server, no build pipeline, no framework overhead.

Why this matters: You can describe a complex UI in plain English, Claude Code generates the data structure and rendering code, and you see the result live on GitHub Pages within minutes — all from your phone.

Publishing Markdown Reports on mdx.limo

mdx.limo renders MDX files directly from GitHub as clean, readable web pages. This is useful for publishing research, analysis, reports, or documentation without setting up a site.

How to use it:

  1. Have Claude Code create a .mdx file in your repo (e.g., report.mdx)
  2. Push it to main
  3. Your report is viewable at: https://mdx.limo/yourusername/your-repo-name/main/report.mdx

What you'd tell Claude Code:

"Write up the analysis as an MDX file called report.mdx. Include charts using inline components if needed. Push to main."

This is great for one-off reports, research summaries, weekly updates, or sharing structured analysis without building a full site.

Starter Prompts

Here are tested prompts you can paste directly into Claude Code on your iPhone to start building immediately.

Product Landing Page

1Build a responsive landing page for a product called [Your Product Name]. 2 3It should have: 4- A hero section with headline, subheadline, and a CTA button 5- A features section with 3-4 feature cards 6- A pricing section with 3 tiers 7- A footer with links 8- Clean, modern design using vanilla HTML, CSS, and JS 9- Mobile-first responsive layout 10- index.html as the entry point in the root directory 11 12Use a color scheme based on [color]. Make it production-ready. 13Push to main when complete.

Data Collection App

1Build a simple data collection web app using Next.js and the app router. 2 3It should have: 4- A form where users can submit [type of data, e.g., "feedback", "survey responses", "email signups"] 5- Form validation on the client side 6- An API route that receives submissions and stores them in a JSON file (or logs them — keep it simple) 7- A /submissions page that displays all collected data in a table 8- Clean UI using Tailwind CSS 9- Mobile-friendly layout 10 11Initialize the project, install dependencies, and push to main.

Solidity Smart Contract

1Write a Solidity smart contract for [describe what it does, e.g., "an ERC-20 token called MyToken with symbol MTK and 1 million supply"]. 2 3Include: 4- The contract code in contracts/MyToken.sol 5- A Hardhat project setup with hardhat.config.js 6- A deployment script in scripts/deploy.js 7- A basic test in test/MyToken.test.js 8- A README explaining how to compile, test, and deploy 9 10Use OpenZeppelin contracts where appropriate. Target Solidity ^0.8.20. 11Push everything to main.

Dashboard / Internal Tool

1Build a dashboard that displays [describe data, e.g., "sales metrics", "user analytics", "project status"]. 2 3Use Next.js with the app router and Tailwind CSS. Include: 4- A sidebar navigation 5- A main content area with cards showing key metrics 6- A chart or graph section (use recharts or chart.js) 7- A data table with sorting 8- Mock data that's easy to replace with real API calls later 9- Dark mode support 10 11Push to main when complete.

Markdown Report / Analysis

1Create a detailed MDX report analyzing [topic]. 2 3Structure it with: 4- An executive summary 5- Key findings with supporting data 6- Methodology section 7- Conclusions and recommendations 8- Clean formatting with headers, bullet points, and tables 9 10Save it as report.mdx in the root of the repo. 11Push to main so I can view it on mdx.limo.

iPhone-Specific Tips

  • Use the Claude iOS app — Download the Claude app from the App Store. It gives you native access to Claude Code without juggling Safari tabs. The app supports the same Claude Code features as the web version, with a smoother mobile experience
  • Use landscape mode when reviewing diffs or reading longer code blocks
  • Use Safari's tab groups if working in the browser — keep GitHub, Claude Code, and your deployed site in separate tabs
  • Copy-paste prompts from your Notes app — write detailed prompts in Notes first, then paste into Claude Code
  • Bookmark your deploy URL to your home screen for quick checking
  • Use GitHub Mobile app alongside Claude for managing issues, PRs, and notifications
  • Session management — Claude Code sessions on the web can be long-running. If you get disconnected, you can resume where you left off

Iterating Through Features: The PR Workflow

The most effective way to build from your iPhone is one feature at a time. Don't try to describe the entire app in one prompt. Instead, use a cycle: chat, branch, merge, view, repeat.

The Cycle

  1. Start a Claude Code session — Open the Claude iOS app or go to claude.ai/code. Connect your repo
  2. Ask for one feature — Be specific. "Add a contact form to the landing page" is better than "make the site better"
  3. Claude Code works on a branch — Tell it to create a feature branch and push there: "Create a branch called add-contact-form, make the changes, and push"
  4. Review the PR on GitHub — Open the GitHub Mobile app or github.com in Safari. You'll see the pull request with a clear diff of what changed
  5. Merge the PR — If it looks good, merge it to main right from GitHub. One tap
  6. View the result on GitHub Pages — Your site rebuilds automatically. Open your yourusername.github.io/repo-name bookmark and see the change live
  7. Start the next feature — Go back to Claude Code and describe the next thing you want

Why This Works

Each cycle is small, self-contained, and visible. You're never staring at a giant diff wondering what changed. You're never debugging three features at once. You see exactly one change, confirm it works, and move on.

Example session — building a product site over a few hours:

  • Chat 1: "Create a landing page with a hero section and navigation. Push to a feature branch." → Merge PR → View on GitHub Pages ✓
  • Chat 2: "Add a pricing section with three tiers. Push to a feature branch." → Merge PR → View on GitHub Pages ✓
  • Chat 3: "Add a contact form that stores submissions in localStorage and shows a thank-you message. Push to a feature branch." → Merge PR → View on GitHub Pages ✓
  • Chat 4: "Add dark mode toggle that respects system preferences. Push to a feature branch." → Merge PR → View on GitHub Pages ✓

Four focused conversations. Four clean PRs. A real product — built and deployed from your phone.

Tips for Iterating

  • Keep each PR focused on one thing. It's easier to review, easier to revert if something breaks, and keeps your git history clean
  • Check GitHub Pages after every merge. This is your feedback loop. If something looks off, your next prompt to Claude Code is just "the spacing on the pricing section looks wrong, fix it"
  • Use the GitHub Mobile app for PR reviews. It's faster than the browser for approving and merging
  • Don't be afraid to revert. If a merge breaks something, you can revert the PR on GitHub with one tap and try again
  • Name your branches descriptively. add-pricing-section, fix-mobile-nav, update-hero-copy — this helps when you look back at your history

You Don't Need All the Answers

If you're reading this and thinking "I don't know what tech stack to use" or "I'm not sure about the right architecture" or "I don't even know where to start" — that's fine. Seriously.

You do not need to have the full picture to make real progress.

Here's what actually matters: you need one clear next step. That's it. Not a roadmap. Not a system design. Not a database schema. Just one thing you want to exist that doesn't exist yet.

Start Before You're Ready

The biggest mistake people make isn't choosing the wrong framework — it's waiting to choose the "right" one. Start with what Claude Code suggests. If you tell it to build a landing page and don't specify a tech stack, it'll pick vanilla HTML/CSS/JS. That's fine. You have a deployed page. Now you can iterate.

If you later decide you need React, you can tell Claude Code to migrate it. If you realize you need a backend, you can add one. The point is: you're building, not planning to build.

Ask Claude Code When You're Stuck

Claude Code isn't just a code generator — it's a collaborator. You can ask it questions mid-session:

  • "What's the simplest way to add a database to this project?"
  • "Should I use localStorage or a backend for this?"
  • "What would you recommend for adding authentication?"
  • "Is this the right approach or is there a simpler way?"

You'll get a direct answer with trade-offs explained, and then you can decide. This is faster than researching for hours on your own.

Progress Over Perfection

A shipped page with imperfect code is worth infinitely more than a perfect plan that never gets built. You can always:

  • Refactor later (ask Claude Code to do it)
  • Swap out libraries (ask Claude Code to migrate)
  • Restructure the project (ask Claude Code to reorganize)
  • Add tests after the fact (ask Claude Code to write them)

The work compounds. Each feature you merge is permanent progress. Each deploy is proof that your thing is real. Don't let uncertainty about the "right way" stop you from building the thing at all.

The Only Rule

If you can describe what you want in a sentence, Claude Code can build it. Start there.

Typical Workflow on iPhone

Here's what the actual day-to-day looks like:

  1. Open the Claude app (or Safari → claude.ai/code)
  2. Connect your repo (or continue an existing session)
  3. Describe what you want built in plain English — be specific about tech stack, features, and file structure
  4. Review the changes Claude Code makes — read the diffs, approve the commands
  5. Tell Claude Code to push to a feature branch
  6. Merge the PR on GitHub — use the GitHub Mobile app or browser
  7. Check your deploy — GitHub Pages rebuilds automatically, Vercel redeploys automatically
  8. Iterate — describe the next feature, fix, or change

That's it. No IDE, no terminal, no laptop. Just your phone, clear prompts, and the merge button.

What You Can Realistically Build From an iPhone

This isn't a toy workflow. People are shipping real things:

  • Marketing sites and landing pages — GitHub Pages
  • Full-stack web apps — Next.js on Vercel
  • APIs and backends — Node/Python on Railway or Fly.io
  • Smart contracts — Solidity projects pushed to GitHub, deployed via Hardhat scripts
  • Data dashboards — React apps with chart libraries
  • Chrome extensions — built and packaged, ready for the Chrome Web Store
  • NPM packages — built, tested, and published
  • Reports and documentation — MDX on mdx.limo or GitHub Pages

The constraint isn't the device. It's how clearly you can describe what you want.

Built and pushed from an iPhone using Claude Code.

Created with MDX Limo