AI Prototyping - Designing Transaction Detail with Claude | #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 build the NOVA Transaction Detail screen. Using our existing project context, banking UI analysis and Aurora design system, we use Claude to assemble the screen from existing components. We look at how to structure the information, establish hierarchy, present transaction metadata and provide relevant follow-on actions. We also review the AI-generated output in Figma, identify issues and use Claude to revise the design. In the next video, we'll move on to building the Transfer screen. Video chapters 00:00 Introduction 00:18 Reviewing the component inventory and banking UI analysis 01:19 Reviewing the NOVA designs and recent design system updates 01:50 Prompting Claude to build the Transaction Detail screen 02:55 Reviewing Claude's proposed screen structure 05:00 Reviewing the generated screen in Figma 06:42 Refining the design with Claude 08:25 Reviewing Claude's revised response 10:49 Reviewing the updated Transaction Detail screen 12:44 Summary and next steps 13:20 Outro