From Idea to App: Peter Yang's Six-Step AI Design Workflow

Peter Yang demonstrates a six-step process for designing and building Tastemaker, a site for sharing favorite films, television and games. The tutorial is presented in about 25 minutes, but he says the actual project took a few hours and may still contain bugs.

First, define the user problem. Yang wants one page for his tastes across media rather than separate lists. He asks AI to clarify the audience and find relevant evidence, while noting that a commercial product would require more research into demand and revenue.

Second, gather visual inspiration and create a design.md. Yang supplies screenshots of an interface he likes and asks for principles covering color, typography and spacing: a quiet UI that lets cover art carry the color. He distinguishes learning from a visual direction from directly copying another product.

Third, explore key screens. Yang gives Claude Design the design file and requests two variations each of a public profile and a logged-out landing page. He answers questions about layout, content and visual style, then compares the alternatives.

He edits unwanted text and controls directly, and gives further feedback on favorites, full-width reviews and navigation. The preferred result takes several iterations. His point is that human attention to detail and specific feedback shape the design; it is not a one-prompt result.

Fourth, turn the problem, mockups and requirements into an HTML specification. Yang prefers seeing key screens before writing the detailed spec because visuals help him understand the product. His example has product, design and technical tabs, including a component library and proposed data schema.

He asks readers to inspect and refine the specification rather than assume the generated requirements are correct. He discloses that his own spec skill is available through a paid membership and says a similar workflow can be created with AI without buying it.

Fifth, use the reviewed specification to design the remaining core screens. These include a creator profile, edit controls, empty states, item details and onboarding. Yang recommends checking default and edge cases, then commenting, editing or iterating before exporting the design.

Sixth, give both the specification and design artifacts to a coding agent. Yang asks it to identify ambiguities before implementation. He emphasizes that planning and changing mockups early can make later changes to a database and other parts of the stack easier to avoid.

The build still requires a long feedback loop. Yang runs the app locally, shares screenshots, requests changes to missing review sections and navigation, and asks the agent to keep plans and designs synchronized with code. The demonstration includes a Supabase database and authentication.

Yang shows the resulting live app with a landing page and profile functions. He estimates that reaching this state took a few hours, acknowledges remaining bugs and recommends validating the problem and business case more deeply when building for real customers.