Full Tutorial: From Idea to App with Claude Design and Claude Code in 25 Minutes

Yang starts with his own frustration: IMDb tracks movies, TV shows, and games as a list, but he wants one page to show his taste across all three. He uses online research to frame the problem, then draws visual inspiration from Monogram and asks Claude to create a design.md covering the app’s style.

Yang uses Claude Design to explore variations of a public taste profile and a logged-out landing page. He compares layouts, edits the mockups directly, and gives feedback on details such as six cards across, full-width reviews, and a left navigation. He says the designs took several iterations and required his own judgment.

After choosing key screens, Yang turns them into an HTML spec with product requirements, design guidance, a component library, a tech stack, and a data schema. He recommends reviewing the spec and clarifying requirements before generating the remaining core screens, including empty states and onboarding.

Yang exports the full designs and shares them with Claude Code alongside the spec. He asks the model to surface ambiguities before coding, then reviews the running app and provides screenshot-based feedback. The finished Tastemaker app uses Supabase and authentication; Yang says it took a few hours and may still have bugs.

Yang recaps the process: define the problem, find visual inspiration, prototype key screens, write an integrated spec, design the remaining screens, and then build. He argues that planning makes changes easier before database and application code are in place, while the build itself still needs substantial back and forth.