Prototyping has always been the heart of HCI practice: you sketch an idea, build something just real enough to test, and learn from how people react to it. What has changed is the cost of getting from a wireframe to something clickable. AI coding assistants and design-tool integrations can now take a rough layout, a screenshot, or a written description and produce working component code in minutes, which shifts the bottleneck from "can we build it?" to "should we build it this way?"
This topic walks through the practical side of that shift. You will look at how a low-fidelity scaffold becomes code, how to generate and reuse components rather than one-off screens, how to iterate on a prototype through conversation with an assistant, and how to fold these tools into a team's existing workflow without creating chaos. Throughout, keep the trade-off in view: speed is only valuable if the artifact you produce is still testable, accessible, and consistent with your design system.
As you watch, pay attention to three things. First, what the human provides as input — the prompt, the frame, the existing design tokens — because output quality tracks input specificity closely. Second, where the demonstrator stops and corrects the AI, since those moments show you the judgment the tool cannot supply. Third, what is missing from the generated result: states, error handling, keyboard focus, responsive behavior. Those gaps are exactly where your HCI training earns its keep.
This walkthrough covers Figma's integration with AI agents such as Claude and Cursor, showing how UI can be generated directly on the canvas rather than being hand-drawn frame by frame. Expect a demonstration of the setup, the prompting process, and the handoff between design surface and code. It is a good illustration of the wireframe-to-code path in a tool students are likely already using.
It directly addresses the "From Wireframe to Code with AI" subtopic using current, widely adopted tools, and the presenter works through a real design task rather than a toy example.
A follow-up video focused on generating design system components with Claude, and on the distinction between running an AI assistant in the terminal versus working inside the design tool. It should cover how existing component libraries and conventions shape what the AI produces. The emphasis on systems rather than single screens is the key takeaway.
Component generation and design-system consistency are central to balancing speed with quality, so this video extends the previous one from one-off screens to reusable, maintainable building blocks.
A beginner-oriented tutorial on Cursor, the AI-native code editor, covering installation, the core interface, and the main ways of asking the assistant for code. Expect coverage of inline edits, chat-based requests, and giving the model context from your project files. This is the practical foundation for iterating on a prototype once code exists.
Tech With Tim is a well-established programming channel, and this widely viewed tutorial gives students the baseline editor skills needed to iterate on AI-generated prototypes and to work alongside teammates using the same tooling.
Together these videos move from concept to practice across the module outcomes. The Figma and Claude demonstrations show where AI tools sit in a contemporary design and development pipeline, supporting MO1, while the component-generation and Cursor tutorials give you concrete procedures for producing layout suggestions and code scaffolding from project requirements, which is MO2. For MO3, treat every generated artifact in these videos as a draft to be critiqued: as you watch, note the accessibility, consistency, and usability gaps that the demonstrations gloss over, and practice articulating what you would change before such a prototype reached a user test.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.