AI Tools in HCI and Development

Introduction

Artificial intelligence has moved from a research curiosity into the everyday toolkit of designers and developers. Generative models now help teams brainstorm interface concepts, draft wireframes and copy, generate and refactor code, write tests, and summarize user research. In this topic we survey where these tools actually fit in the design and development workflow, what they do well, and where human judgment still has to carry the work.

This matters for CEN3722 because your course project will run through the same lifecycle these tools touch: scoping and planning, sketching and prototyping, building, and evaluating. Knowing which tasks an AI assistant can accelerate — and which ones it tends to make worse, such as understanding real users, justifying design decisions, or ensuring accessibility — will make you a faster and more credible team member. It also sets up the course policy on responsible use: AI assistance is a tool you disclose and verify, not a substitute for your own reasoning or a source you can cite blindly.

As you watch the videos below, pay attention to three things. First, which stage of the workflow is each tool being applied to (ideation, visual design, coding, documentation)? Second, what verification step does the presenter take — or fail to take — after the AI produces output? Third, notice how quickly specific tools and features change; the underlying workflow patterns will outlast any particular product shown on screen.

Video 1: 10 Ways To Implement AI Coding Assistants Into Your Workflow

Tiff In Tech · 12:25 · 12,060 views · 3y ago · captions — Watch on YouTube

About this video

A developer-focused walkthrough of practical ways to fold AI coding assistants into a day-to-day programming workflow, framed around building apps, websites and programs faster. The video is organized as a list of concrete use cases rather than a single tool demo, so you see several different jobs an assistant can take on. Expect coverage of things like generating boilerplate, explaining unfamiliar code, and speeding up routine implementation tasks.

Why this video

It maps directly onto the AI Coding Assistants and lifecycle subtopics by showing assistance applied at multiple points in development rather than as a novelty. The list format makes it easy to pick out which techniques you might realistically use on your team project.

Video 2: The “No Slop” AI Workflow | Full UI/UX Guide

AI Tooltip · 14:27 · 13,994 views · 4mo ago · captions — Watch on YouTube

About this video

A full UI/UX workflow guide built around avoiding low-quality, generic AI output — what the channel calls "AI slop." It positions AI as an automation layer for manual design work while the designer retains control over direction and quality. The video walks through a start-to-finish process rather than isolated tool tricks.

Why this video

This is the clearest fit for the Responsible Use subtopic: it frames AI as something to be steered and quality-checked, not trusted by default. It also connects AI support to a recognizable design process, which is useful as you plan your own project workflow.

Video 3: Figma AI Tutorial for Beginners

Aliena Cai · 8:02 · 294,879 views · 1y ago · captions — Watch on YouTube

About this video

A beginner-level tutorial on Figma's AI features, aimed at designers who already use or are learning Figma. It introduces the AI capabilities built into the tool and demonstrates how they speed up common design tasks. The short runtime keeps it focused on getting started rather than on advanced technique.

Why this video

Figma is the environment many student teams use for wireframing and prototyping, so this grounds the How AI Supports the Design Process subtopic in a tool you are likely to touch during the project. It is a widely viewed introductory tutorial, which makes it a reasonable first exposure for students new to design software.

How These Videos Support the Learning Outcomes

These videos sit alongside the module's conceptual material rather than replacing it. By showing where AI fits into ideation, visual design, and implementation, they help you see the distinction between surface-level interface polish and the deeper usability, user experience, and accessibility concerns that AI output does not automatically satisfy (MO2) — a gap you should be able to name after watching. The Figma and workflow guides are most directly useful for MO3: they give you a realistic sense of what your team can produce and how fast, which informs the scope, platform choice, and role assignments in your initial project plan. The coding-assistant video similarly helps you estimate development effort when dividing responsibilities. Throughout, treat the tools shown as current examples of a longer HCI trajectory of making interface work easier and more accessible (MO1), and apply the course's disclosure-and-verification expectations to anything you generate.

About These Videos

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.