Writing Work About Newsletter Login
Module 5, Lesson 3: Designing the App

Module 5, Lesson 3: Designing the App

13 min read min

How do you design your actual app screens with Claude? With your design system saved, you point Claude Design at your roadmap so it generates screens phased to match your build order.

It asks a few questions, then produces a clickable prototype you can tap through like a real app. This is where you catch logic gaps before any code exists. The Product Path shows the prompt.

How do you turn a design system into real app screens?

You turn a design system into real screens by prompting Claude Design to generate them against your implementation roadmap, so the screens come out phased in the same order you plan to build.

Because the roadmap lives in the project folder you already attached, Claude reads it directly and scopes the right screens for each phase without you re-explaining them. The output is an interactive, high-fidelity prototype you can click through like a real app, which lets you spot logic gaps and refine flows with feedback before any code is written.

Before We Start

From previous lessons:

  • You have a saved default design system in Claude Design: color, typography, spacing, components, and sample screens. Module 5, Lesson 2
  • You have a feature/parameter matrix and an implementation roadmap (phased into things like "Phase 1: Foundation" and "Phase 2: Core MVP") set up in YouTrack. Module 3
  • Your project specs folder exists with all your scoping documents. Module 2 and 3

Tools / setup you'll need:

  • Claude Desktop, with the Design tab and your saved design system
  • Your implementation roadmap / feature matrix (in YouTrack or wherever you built it)
  • Your specs folder, with all your project documentation

By the end of this lesson, you'll:

  • Have used Claude Design to generate actual screens for your app, phased to match your roadmap
  • Have an interactive, clickable prototype you can click through like a real app
  • Have iterated on at least one flow (a paywall gate) by giving Claude feedback instead of accepting the first pass
  • Know how to generate a shareable, read-only link for feedback or handoff

Paid members

This content is for Paid Members

Unlock full access to Dele Tosh and see the entire library of members-only content.

Subscribe