AI Prototyping - Building Home Screen Components | #figma #claude #uidesign

🔗 Join the Community Courses, resources and live sessions for product designers. https://designwithmitch.com In this series, I design and prototype a minimal finance app (NOVA) using Claude and Figma, focusing on real-world product thinking, design systems, and AI-assisted UI creation. In this video, we use Claude to define the structure of each screen in the NOVA app before identifying the reusable components needed for the Home screen. From there, we generate and refine key UI components including the Balance Card, Quick Actions, and supporting elements using Aurora, Figma MCP, and our reusable prompting framework. Video Chapters: 00:00 Introduction 00:12 Planning for the components 01:43 Reviewing Claude's screen structure and refining the prompt 03:03 Using the screen structure as our implementation guide 06:03 Building the Balance Card component with Claude and Figma 08:18 Reviewing the Balance Card component 08:54 Refining the Balance Card with Claude 09:19 Reviewing the updated Balance Card 10:25 Building the Quick Actions component 10:49 Reviewing Claude's decisions and prompt iterations 12:36 Reviewing the Quick Actions component in Figma 12:52 Improving component reuse within Aurora 13:35 Building the remaining Home screen components 13:55 Reviewing the completed Home screen components 15:06 Summary and next steps 15:16 Outro