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.

This self-paced course teaches you how to design a website with AI, not just build one. You learn the design concepts behind a site that works, including visual hierarchy, typography, color, spacing, layout, and consistency, then use them to direct Claude Design with specific references instead of settling for generic results.

You carry one project from a blank canvas to a tested site. Pick one of three fictional businesses, plan it with a sitemap and user flows, explore three distinct design directions before committing to one, and build a design system that keeps AI consistent across pages. Hand the design to an AI coding tool to build, refine the phone version, forms, and interface states, then test what you made: a QA pass in DevTools, accessibility checks by keyboard, contrast, zoom, and screen reader, and a usability test with a real person.

Course Reviews

From our hands-on training style to world-class instructors and custom-crafted curriculum, we deliver results our alumni are proud of.

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

Learn the Skills Guarantee™

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

Hands-on training

Work on projects proven to boost retention

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

Time-tested curriculum

Refined over many cohorts for an optimal learning experience

The teaching method at Noble Desktop is perfect and the classes provide you with infinite knowledge that makes you eager to take everything they offer. I love Noble!
—Ivonne Ackerman

Learn from experts

Experienced educators who are driven to help you succeed

Retake for free

Refresh the materials for free within one year

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 Noble 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

Direct AI with specific references and constraints instead of accepting generic results
Use visual hierarchy, typography, color, spacing, and layout to judge what AI gives you
Plan a site with a sitemap, user flows, and a heading outline before you prompt
Keep AI consistent across pages with a design system, then hand the design to an AI coding tool
Design for phones, forms, interface states, interface copy, and motion
Test for accessibility by keyboard, contrast, zoom, and screen reader, and run a usability test with 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

Frequently Asked Questions

Is this course open to beginners?

Yes, this course is open to beginners. Students must be comfortable using a computer. No other prior knowledge is required.

Do you offer payment plans or student financing for this course?

This course does not qualify for payment plans or student financing. See our Payment Plan FAQ to find related programs that qualify.

How long do I have access to the course materials?

This course is available for 30 days. You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.

What is the cancellation and refund policy for this single course?

For this course, you are entitled to a 90% refund (your payment less the nonrefundable 10% registration fee) within 30 days of purchase if you have not accessed the course materials.

What’s included with my tuition?

A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement
Expert instructors who are industry professionals and experienced educators that are driven to help you succeed
Expert support with answers to your questions from real instructors throughout your learning journey
Top-notch curricula that have been tried and tested over many years and are consistently improved for an optimal learning experience
30-day access to class recordings to review material at your own pace
A certificate of completion to verify your accomplishment

Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

However, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.

Do you offer any discounts for this course?

We don’t currently offer discounts as we do our best to affordably price our courses.

This course includes

Course Reviews

Tuition

Full Tuition

This course includes

Learn the Skills Guarantee™

Hands-on training

Time-tested curriculum

Learn from experts

Retake for free

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

Frequently Asked Questions

Is this course open to beginners?

Do you offer payment plans or student financing for this course?

How long do I have access to the course materials?

What is the cancellation and refund policy for this single course?

What’s included with my tuition?

Are there any additional fees or expenses?

Do you offer any discounts for this course?

Related Courses: Compare to AI Coding for Product and UX (Self-Paced)

AI Coding for Systems and Architecture (Self-Paced)

How does it compare?

AI Coding for Security (Self-Paced)

How does it compare?