ARTGR 4840/5840 | AI-Aided Product Design

make />

beyond prototyping

Create beautiful web applications with the power of AI

ARTGR4840-02 / 5840-02 by

Aaron Yang Ph.D. | aayang@iastate.edu

Start Learning

Start your journey on vibe coding

Week 1. Introduction

Course overview, how AI is reshaping UX design, generative AI concepts, prompting basics, and a first look at tools like Cursor.

Launch Lesson
Week 2. Descriptive User Flow and Interaction Logics

How to use flow logic to prompt AI for structured, multi-page app development.

Launch Lesson
Week 3. From Figma to ReactJS: Basics of Technology Stacks in Web Applications

When you make with FigmaMake or Lovable, what are you actually creating?

Launch Lesson
Week 4. Vibe Code the Styles

Learn practical techniques for controlling visual style in vibe coding workflows using moodboards and iterative prompts to build and refine a reusable DESIGN.md.

Launch Lesson
Week 5: API and Database Integration

Understand how UIs connect to live data through APIs and data binding.

Launch Lesson
Week 6: Version Control and GitHub

Learn Git and GitHub basics — commit, push, pull, and revert. Set up GitHub Desktop, connect your repository to Netlify for automatic deployment, and invite collaborators.

Launch Lesson
Week 7. Put them all together: Create a Lasting Portfolio

Learn how to generate a content-driven portfolio website from a Figma design using AI-assisted workflows, skills, and GitHub Pages deployment.

Launch Lesson
Week 8. Polish your Portfolio

This week focuses on refining and finalizing your portfolio website. No new lessons this week.

Project Finalization