This course includes

60 hours of project-based training from experts
Answers from real instructors
Retake for free within 1 year
Access to class recordings (30 days)
Verified digital certificate of completion

This course is self-paced. For live online or in-person instruction, take AI Coding for Product and UX.

Discover how to design a site with AI on your own schedule, and how to tell good output from generic output. This course covers visual hierarchy, typography, color, spacing, layout, and consistency, then uses them as the vocabulary for directing Claude Design toward the result you actually want.

Everything is built around a single project. Choose one of three fictional businesses, plan the site with a sitemap and user flows, generate three distinct design directions and commit to one, then turn it into a design system that keeps AI consistent from page to page. Hand the design to an AI coding tool, refine the phone version, forms, and interface states, then test it: a QA pass in DevTools, accessibility checks by keyboard, contrast, zoom, and screen reader, and a usability test with a real person.

AI Software Engineering Bootcamp (Self-Paced)

Tuition

Full Tuition

$2,999
Due before the class starts

This course includes

60 hours of project-based training from experts
Answers from real instructors
Retake for free within 1 year
Access to class recordings (30 days)
Verified digital certificate of completion

Learning Experience Highlights

Learn from world-class creators

Classes taught by leading photographers, designers, and artists who share real workflows and insights

Several students, sitting at computers, looking at the front of the classroom

Watch anywhere, on your schedule

Stream on-demand video lessons at your own pace. Rewatch anytime, on any device, whenever inspiration strikes

Shabang! I'm really enjoying the class. This course feels like a workshop with step by step demo on every piece of theory and with tons of details."
— Gerald B.

Comprehensive course materials

Downloadable guides & practice files crafted to support your creative journey

Join a global creative community

Connect with thousands of fellow learners and get inspired by creators from around the world

100% Online. Start Anytime

24/7 access to our premium course videos and projects.
Industry experts are assigned as your course instructor. Message your instructor with any questions.
Participate in CreativeLive online discussion forums — share ideas and receive additional support.
Hands-on quizzes and mini projects to test and reinforce concepts.

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of AI Coding for Product and UX (Self-Paced)

AI Coding for Product and UX (Self-Paced) Curriculum

What You'll Learn at a Glance

Push AI past its generic defaults with specific visual references
Use hierarchy, type, color, spacing, and layout to judge what AI produces
Plan a site before you prompt, with a sitemap and user flows
Create a design system that keeps every page consistent
Refine the phone version, forms, interface states, interface copy, and motion
Test your site with DevTools, accessibility tools, and a real person

Course Syllabus

Download Syllabus PDF

First Design Project

Ways to start a design: a text prompt, screenshots, rough sketches, your own designs, or an existing design system
Creating a first design and judging what AI produced
Asking for distinctly different directions rather than slight variations

Designing with AI

Visual hierarchy: what leads the eye, and primary versus secondary calls to action
Typography: serif, sans-serif, and display typefaces, pairing fonts, and building a type scale
Color: harmonies, building from one base color, giving every color a job, and keeping text legible
Why AI output can look generic, and how to show it references instead of describing in words
Sourcing images that do not look generic, including edited stock and AI-generated images
Getting useful feedback on a design from other people
Planning before you prompt: sitemaps, main navigation, and user flows
Heading outlines, and writing headings that match what people search for
Exploring three distinct directions for your project, then committing to one

Layout & Images

How pages are built from sections, and hero sections with one clear action
Common page layouts, and describing a layout section by section
The 12-column grid, when to break it, and the spacing scales that create rhythm
Wireframing structure before style, and why low fidelity comes first
How photos set the mood, cropping for the layout, and keeping text on photos readable
Where images come from, icon families, labeling icons, and respecting a client's logo

Design Consistency

Spotting where AI has drifted between pages
Keeping design decisions in one place, named by role rather than by value
What belongs in a design system, including shape and corner radius
Components and patterns, and starting from a component library
Navigation on phones, cards, lists, tabs, accordions, and see-more controls

Critique & Build

Getting a fresh-eyes critique before you build
Handing a design to an AI coding tool, with shared tokens and reusable components
Writing an instructions file so every later page reuses the same system
Making one change at a time without losing work that already works

Responsive Design

Breakpoints, reflow, and mobile-first design
Fluid, adaptive, and combination layouts, and type that scales
Mobile navigation, tap target size and spacing, and designing without hover

Forms & Interface States

Visible labels, asking only what you need, and a logical one-column order
Choosing the right control for each kind of choice
Empty, loading, error, success, hover, focus, and disabled states
Keeping states in shared components rather than fixing one page at a time

Words in the Interface

Buttons that say what will happen
Headings and links that make sense on their own
Error messages without blame, empty states that invite action, and confirmations that reassure
Picking one word for a thing and keeping it everywhere

Motion

Giving every animation a job to do
Micro-interactions, and keeping motion short and subtle
Respecting reduced-motion preferences

Test Your Site

Inspecting a problem in browser developer tools before re-prompting
Checking built values against your design system
Comparing the finished build against your design
Stress-testing a layout with real content

Accessibility & Usability Testing

What accessibility means in practice, and what WCAG asks for
Keyboard navigation and visible focus
Contrast ratios, and not relying on color alone to carry meaning
Zoom and text size, and the fixed heights that usually break them
Screen readers, and confirming AI's findings with real tools
Running a usability test: writing tasks rather than instructions, and thinking aloud
Watching without helping, grouping what you saw into themes, and ranking issues by severity

This course includes

Take this class as part of a certificate program and save:

Tuition

Full Tuition

This course includes

Learning Experience Highlights

Learn from world-class creators

Watch anywhere, on your schedule

Comprehensive course materials

Join a global creative community

100% Online. Start Anytime

Earn a Certificate of Completion

AI Coding for Product and UX (Self-Paced) Curriculum

What You'll Learn at a Glance

Course Syllabus

First Design Project

Designing with AI

Layout & Images

Design Consistency

Critique & Build

Responsive Design

Forms & Interface States

Words in the Interface

Motion

Test Your Site

Accessibility & Usability Testing