Full Tutorial: Build a Beautiful Mobile App with Claude Code in 16 Minutes

Yang started by asking Claude to help specify three core screens: workout editing, live workout tracking, and a calendar. He answered Claude’s follow-up questions about rest timers, failed sets, units, and data storage, then refined the spec with defaults such as three working sets of eight reps and a dark theme.

Yang pasted the design requirements into Pencil and used Claude Opus with six design agents. In under five minutes, Pencil generated screens for workouts, exercise selection, live tracking, a calendar, exercise history, and settings. He describes the .pen file as text instructions for visual details such as fonts, spacing, and color.

After adding the designs to the technical spec, Yang split development into three milestones: the app skeleton, live workout tracking and a rest timer, then the calendar and exercise history. Claude Code used Pencil MCP to inspect the designs and build the screens. Yang tested the app on an iPhone with Expo Go and resolved a compatibility issue by downgrading from Expo SDK 55 to SDK 54.

Yang iterated on interface problems, including a dial pad that covered controls, then asked Claude to review the app for spacing and usability issues. He says the finished project had eight screens and about 6,400 lines of code, which he committed to GitHub. He recaps the workflow as defining requirements, generating designs, and building and testing in phases.