AI UX & UI Design Bootcamp Online
- Difficulty
- Beginner
- Format
- Self-paced
- Delivery
- Online
- Time Commitment
- 312 hours
Enroll with Virtual Design and Construction Institute
View current tuition and secure enrollment options from the course provider.
View tuition & enrollLoading enrollment options…
Prefer to enroll directly? Open the course website.
Summary
This 312-hour certificate examines where AI fits across the UX and UI process: user research, synthesis, personas, journey maps, user flows, UX strategy, UI ideation, design critique, usability testing, accessibility review, UX writing, and documentation. Figma coursework covers the interface craft alongside it.
Practical work includes organizing research findings, identifying themes, drafting design artifacts, weighing interface options, condensing usability results, and turning observations into ranked recommendations. The program treats responsible use as part of the method, covering clear prompting, keeping a human in the loop, grounding decisions in evidence, and ethical UX standards, and finishes with portfolio development.
Who this course is for
UX and UI designers who want to work AI into their process, and career changers who want to learn the discipline and its current tooling together.
Preview the course
Watch free previews and explore the lessons included with enrollment at VDCI.
Figma Course Online
-
Overview & Setup
Lesson 1: Figma Fundamentals
1:10
Discover what this Figma design course covers and how to get the most out of the training videos and exercises.
This preview is temporarily unavailable. Please try again later.
-
Getting Started with Figma
Lesson 1: Figma Fundamentals
10:00
Learn how to create a Figma account and navigate the interface using either the browser or desktop app.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Designing on Grids & Layout Fundamentals
Lesson 1: Figma Fundamentals
29:43
Master grid-based design principles to keep content equally sized and consistently spaced across pages.
View enrollment options at VDCI -
Enrollment required
Working with Photos & Pixel Based Graphics
Lesson 1: Figma Fundamentals
27:16
Import photos and pixel-based images into your Figma designs using prepared layout files.
View enrollment options at VDCI -
Enrollment required
Vector Graphics, Colors & Effects
Lesson 1: Figma Fundamentals
30:11
Bring in vector graphics and apply colors, color styles, and effects like drop shadows to enhance your layouts.
View enrollment options at VDCI -
Introduction to Components & Auto Layout
Lesson 2: Components & Prototyping
10:00
Explore Figma's component system and get an introductory look at auto layout for reusable design elements.
This preview is temporarily unavailable. Please try again later.
-
Prototyping Interactive Designs
Lesson 2: Components & Prototyping
10:00
Turn static designs into clickable, interactive prototypes that simulate real user experiences.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Sharing, Exporting & Collaboration
Lesson 2: Components & Prototyping
29:42
Share finished designs with teammates, stakeholders, and developers using Figma's collaboration features.
View enrollment options at VDCI -
Understanding Auto Layout
Lesson 3: Deep Dives
10:00
Dive deeper into auto layout to understand how automatic sizing and spacing work in Figma.
This preview is temporarily unavailable. Please try again later.
-
Advanced Auto Layout Techniques
Lesson 3: Deep Dives
10:00
Master nested auto layout frames with different directions, padding, and spacing settings for complex layouts.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Prototype Scrolling & Hyperlinks
Lesson 3: Deep Dives
18:54
Configure vertical and horizontal scrolling within prototypes for long pages and scrollable sections.
View enrollment options at VDCI -
Enrollment required
Typography Styles & Sketch File Import
Lesson 3: Deep Dives
13:58
Create and manage reusable type styles to maintain consistent typography across your designs.
View enrollment options at VDCI -
Component Properties & Design Systems
Lesson 4: Advanced Features
10:00
Leverage component properties to build flexible, reusable elements that scale into a design system.
This preview is temporarily unavailable. Please try again later.
-
Hover States, Overlays & Smart Animate
Lesson 4: Advanced Features
10:00
Design hover effects and overlay interactions for desktop interfaces using Figma's prototyping tools.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Team Libraries & Shared Design Systems
Lesson 4: Advanced Features
20:23
Set up team libraries to share styles and components across multiple files and users in your organization.
View enrollment options at VDCI -
Enrollment required
Wrap Up & Next Steps
Lesson 4: Advanced Features
0:12
Review key takeaways from the Figma course and get encouragement to continue practicing.
View enrollment options at VDCI
AI Coding Bootcamp with Claude Code Online
-
Course Introduction
Lesson 1: Getting Started with Claude Code
5:45
Discover what to expect throughout this hands-on bootcamp, including the types of projects you'll build and how Claude Code empowers coders of all skill levels to create polished, production-ready applications.
This preview is temporarily unavailable. Please try again later.
-
What is Claude Code?
Lesson 1: Getting Started with Claude Code
5:55
Learn how Claude Code works as an AI coding agent, including understanding its LLM foundation, what tasks it can handle autonomously, and how to think of yourself as the manager guiding it rather than the coder doing the work.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Installing Claude Desktop
Lesson 1: Getting Started with Claude Code
7:19
Walk through downloading and installing the Claude Desktop application, setting up your account, and navigating the platform's key areas, including where to find Claude Code and how to connect it to a project folder.
View enrollment options at VDCI -
Enrollment required
Installing Claude in VS Code
Lesson 1: Getting Started with Claude Code
3:01
Set up the Claude Code extension directly inside VS Code, giving you a fully integrated AI coding assistant within the same professional development environment used by experienced developers.
View enrollment options at VDCI -
Git and GitHub Explained
Lesson 2: Setting Up Your Workflow
10:00
Understand how Git and GitHub work together as a version control system, including creating checkpoints, pushing code to the cloud, and cloning repositories, all with Claude handling the technical commands on your behalf.
This preview is temporarily unavailable. Please try again later.
-
Setting Up Your Claude.md File
Lesson 2: Setting Up Your Workflow
10:00
Configure a Claude.md file to give Claude a persistent set of rules and preferences that carry over between sessions, covering coding style, documentation habits, and how to test that your instructions are actually working.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Understanding Permission Modes
Lesson 2: Setting Up Your Workflow
18:26
Explore Claude's three permission modes, Ask, Auto Accept, and Plan, and learn when to use each one so you stay in control of your project while giving Claude the right level of autonomy for the task at hand.
View enrollment options at VDCI -
Enrollment required
Guided Lab: Build Your First Project
Lesson 2: Setting Up Your Workflow
16:15
Apply everything you've learned by forking a course repository, using Claude to explore and customize a working quiz website, and committing your finished project to GitHub, with an optional challenge to publish it live using GitHub Pages.
View enrollment options at VDCI -
Introduction to Prompt Engineering
Lesson 3: Prompting Claude Code Effectively
6:47
Master the core principles of prompt engineering, including how to communicate goals, define behaviors and constraints, and steer Claude back on track when it makes assumptions you did not intend.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Explore, Plan, Execute, Review
Lesson 3: Prompting Claude Code Effectively
7:02
Follow a four-step workflow for setting Claude up for success on any task, walking through how to explore a codebase, outline a plan, give Claude the green light to build, and review the output before moving on.
View enrollment options at VDCI -
Enrollment required
Managing Context and Session Length
Lesson 3: Prompting Claude Code Effectively
4:32
Recognize the signs that a Claude session has gone on too long, including contradictions, ignored constraints, and hallucinations, and learn how to start fresh sessions while preserving the rules and context Claude needs to keep working effectively.
View enrollment options at VDCI -
Enrollment required
Scaffolding Your First Project
Lesson 4: Scaffolding a New Project
15:20
Build a fully functional command line to-do list application in Python by scaffolding the project structure with Claude, defining core features upfront, testing the output, and progressively adding enhancements like color-coded terminal output.
View enrollment options at VDCI -
How the Internet Works
Lesson 5: Web Development Fundamentals
10:00
Discover what actually happens when you type a URL into a browser, from DNS lookups and request response cycles to HTTP status codes, so you can understand and troubleshoot the web infrastructure Claude builds on.
This preview is temporarily unavailable. Please try again later.
-
HTML and CSS Basics
Lesson 5: Web Development Fundamentals
10:00
Get a practical introduction to HTML structure and CSS styling by exploring real code in the browser dev tools, so you can read and understand the code Claude generates without needing to memorize syntax.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Introduction to JavaScript
Lesson 5: Web Development Fundamentals
9:16
Learn what JavaScript is, how it makes web pages interactive through variables, functions, and event listeners, and how to direct Claude to add JavaScript behavior to your projects without writing it yourself.
View enrollment options at VDCI -
Enrollment required
Frontend, Backend, and APIs
Lesson 5: Web Development Fundamentals
8:12
Understand the difference between frontend and backend development, how servers and databases work together behind the scenes, and what APIs are so you can confidently direct Claude when building more complex applications.
View enrollment options at VDCI -
Enrollment required
Development vs Production Environments
Lesson 5: Web Development Fundamentals
6:11
Learn the difference between development, testing, and production environments, including how error handling, API keys, and environment variables should be managed at each stage so your projects are secure and stable when they go live.
View enrollment options at VDCI -
How to Debug with Claude
Lesson 6: Debugging and Testing Your Code
10:00
Develop a detective approach to debugging by learning how to gather clues from the browser console, network tab, and URL bar, then communicate symptoms clearly to Claude so it can diagnose and fix the root cause.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Setting Up Automated Tests
Lesson 6: Debugging and Testing Your Code
7:11
Use Claude to build automated unit and integration tests for your projects, catching bugs before users do and creating living documentation that shows exactly how your program is supposed to work.
View enrollment options at VDCI -
Libraries, Packages, and NPM
Lesson 7: Modern App Architecture and Next.js
6:53
Understand what libraries and packages are, why developers use them, and how NPM works as the tool that installs and manages them, so you know what Claude is doing when it references or installs external code on your behalf.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Choosing the Right App Architecture
Lesson 7: Modern App Architecture and Next.js
14:02
Compare the three most common application architectures, static sites, server side rendering, and single page applications, and learn the strengths and limitations of each so you can make informed decisions when Claude asks how you want to build.
View enrollment options at VDCI -
Enrollment required
Anatomy of a Next.js Application
Lesson 7: Modern App Architecture and Next.js
15:19
Take a guided tour of a Next.js project built with Claude, exploring how routing, layouts, components, the public folder, and the package.json file all work together so you can confidently navigate your codebase and direct Claude as you build.
View enrollment options at VDCI -
Enrollment required
Landing Page Lab Walkthrough
Lesson 8: Building a Business Landing Page
10:41
Build a business landing page by choosing an architecture, crafting a detailed and well-constrained prompt, and using plan mode to guide Claude toward a polished result, then continue iterating to add new features and improvements.
View enrollment options at VDCI -
Skills and Slash Commands
Lesson 9: Advanced Claude Code Features
10:00
Create reusable skills and trigger them instantly with slash commands, so you can automate repeated tasks like building and running tests without rewriting complex prompts every time.
This preview is temporarily unavailable. Please try again later.
-
Running Parallel Sessions
Lesson 9: Advanced Claude Code Features
8:06
Speed up development by running multiple Claude sessions at the same time, learning how to assign separate tasks to each session while avoiding conflicts when both sessions might touch the same files.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Hooks and Sub Agents
Lesson 9: Advanced Claude Code Features
8:49
Automate follow up tasks in Claude using hooks that trigger automatically after certain actions, and use sub agents to handle closely related tasks in the background without creating a fully separate session.
View enrollment options at VDCI -
Enrollment required
Extending Claude with MCP Servers
Lesson 9: Advanced Claude Code Features
7:43
Install and use MCP servers to give Claude new capabilities beyond reading code files, including taking browser screenshots to visually evaluate pages and connecting to external tools like Figma and databases.
View enrollment options at VDCI -
Branching and Feature Development
Lesson 10: Advanced Git and GitHub Workflows
10:00
Learn how to create feature branches to develop new functionality in isolation, understand how branches protect your main codebase, and use Claude to build and commit changes on a separate branch before merging them back in.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Pull Requests, Merges, and Reverts
Lesson 10: Advanced Git and GitHub Workflows
9:29
Walk through the full GitHub pull request process, from pushing a feature branch and reviewing diffs to merging into main, deleting the completed branch, and using reverts to safely roll back changes when needed.
View enrollment options at VDCI -
Why Use a Database?
Lesson 11: Databases and User Authentication
9:48
Understand what databases are, how SQL and NoSQL differ, and why Supabase with Postgres is the recommended choice for this course, so you can make informed decisions when Claude asks how you want to store your data.
This preview is temporarily unavailable. Please try again later.
-
Database Schemas, Tables, and Relationships
Lesson 11: Databases and User Authentication
10:00
Design a visual database schema using DB Diagram and Claude, learning how tables relate to each other through foreign keys and how to choose the right data types for each field before writing a single line of database code.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Connecting Your Schema to Supabase
Lesson 11: Databases and User Authentication
25:04
Set up a Supabase project, connect it to a Next.js app using environment variables, and run database migrations to turn your schema blueprint into real working tables, then validate everything is live by inserting sample data.
View enrollment options at VDCI -
Enrollment required
Adding User Authentication
Lesson 11: Databases and User Authentication
16:50
Implement user authentication in a Next.js app using Supabase, including encrypted password storage, session and cookie management, and building signup and login pages so users can securely register and stay logged in.
View enrollment options at VDCI -
Enrollment required
Notes App Project Kickoff
Lesson 12: Building a Notes App
17:40
Scaffold a full stack notes application from scratch by setting up a Next.js project, connecting it to a Supabase database, generating a Claude.md file, and using plan mode to map out the full app architecture before writing a single line of feature code.
View enrollment options at VDCI -
Adding OAuth with GitHub
Lesson 13: OAuth, External APIs, and Caching
10:00
Set up GitHub OAuth through Supabase so users can sign into your app with their GitHub account, and learn the principle of least privilege so you give third-party providers only the permissions they actually need.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Working with External APIs
Lesson 13: OAuth, External APIs, and Caching
21:32
Integrate a free weather API into the notes app by obtaining an API key, storing it securely in an environment file, and prompting Claude to display live weather data, including how to debug when the widget does not appear as expected.
View enrollment options at VDCI -
Enrollment required
Caching API Data with Supabase
Lesson 13: OAuth, External APIs, and Caching
11:18
Implement a caching layer for external API data using a Supabase table so your app stores short-term results locally, reducing network requests, protecting against rate limits, and keeping the app functional even when the external API is unavailable.
View enrollment options at VDCI -
UX and UI Fundamentals
Lesson 14: Design, Accessibility, and UX
8:54
Apply the four core design principles of hierarchy, white space, consistency, and contrast to guide Claude toward building interfaces that are clear, readable, and visually effective, and learn where to find design inspiration to share directly with Claude.
This preview is temporarily unavailable. Please try again later.
-
Components and Design Systems
Lesson 14: Design, Accessibility, and UX
5:40
Speed up development and improve visual consistency by using a component library like Shadcn UI, which gives you pre-built tested components that Claude can install and customize directly inside your Next.js project.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Responsive Design
Lesson 14: Design, Accessibility, and UX
8:47
Ensure your app looks great on every screen size by understanding breakpoints and the mobile first approach, and learn how to use the browser's built in developer tools to test your layout across different devices and screen sizes.
View enrollment options at VDCI -
Enrollment required
Building for Accessibility
Lesson 14: Design, Accessibility, and UX
15:26
Build websites that work for all users including those with visual impairments or limited motor ability, by using semantic HTML, keyboard navigation, proper contrast ratios, and ARIA labels to meet accessibility standards with Claude's help.
View enrollment options at VDCI -
Enrollment required
Component States and Dev Tools
Lesson 14: Design, Accessibility, and UX
8:50
Design a better user experience by building out all six component states including loading, empty, error, success, disabled, and default, and learn how to use toasts, skeletons, and spinners to give users clear feedback at every stage.
View enrollment options at VDCI -
Six Attacks Every Developer Should Know
Lesson 15: Web Security Fundamentals
10:00
Get a practical overview of the six most common security threats your application will face, including cross-site scripting, SQL injection, CSRF, brute force attacks, insecure data handling, and vulnerable dependencies, so you know what to watch for and how to direct Claude to protect against them.
This preview is temporarily unavailable. Please try again later.
-
Input Validation
Lesson 15: Web Security Fundamentals
10:00
Protect your application from bad and malicious data by validating user input on both the client and server side, using allow lists, deny lists, and regular expressions to ensure only clean and expected data ever reaches your database.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Rate Limiting
Lesson 15: Web Security Fundamentals
11:22
Defend your application against brute force attacks, credential stuffing, denial of service attacks, and runaway API costs by implementing rate limiting on login, signup, password reset, and any endpoints that call external services.
View enrollment options at VDCI -
Enrollment required
Data Privacy and Legal Compliance
Lesson 15: Web Security Fundamentals
7:57
Understand your legal obligations under GDPR and the California Consumer Privacy Act and learn the practical steps needed to stay compliant, including writing a privacy policy, collecting only necessary data, encrypting your database, and giving users the ability to delete their information.
View enrollment options at VDCI -
How to Deploy Your App with Vercel
Lesson 16: Deployment, SEO, and Performance
10:00
Deploy your finished Next.js project to the internet by connecting your GitHub repository to Vercel, configuring your environment variables, and running your first production build, then test the live app to make sure everything works as expected.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
SEO and Performance Optimization
Lesson 16: Deployment, SEO, and Performance
15:25
Improve your deployed site's search engine ranking and load speed by adding metadata and semantic HTML, using Google Chrome's Lighthouse tool to identify issues, and applying targeted fixes like image sizing, skeleton loaders, and caching with Claude's help.
View enrollment options at VDCI
Curriculum
What you'll learn
- Put AI tools to work on UX research synthesis, spotting themes, and generating insights
- Build personas, journey maps, user flows, and project documentation with AI assistance
- Bring prompt engineering techniques to UX strategy, UI ideation, design critique, and UX writing
- Lean on AI to check interface designs for clarity, consistency, accessibility, and usability concerns
- Condense usability testing findings and shape observations into ranked recommendations
- Follow responsible AI practices while keeping your own judgment, evidence-based decisions, and ethical UX standards front and center
Course outline
-
Figma Course Online 12 hours
Start learning Figma for UI and UX design by building a strong understanding of what the tool can do. Learn how to create and manage files, design using grids, work with text, images, and color systems, build reusable components, create interactive prototypes, export assets, share designs, create simple animations, and more.
- Create UI and UX designs for websites, apps, and digital products
- Design complete layouts optimized for mobile, tablet, and desktop screens
- Work with grid-based layouts, extract image assets, and share designs with clients and developers
- Build interactive prototypes to demonstrate user flows and interactions
- Create animations using Smart Animate
- Use components and variants to streamline updates and maintain consistency
- Collaborate with Team libraries to share styles and reusable design elements
-
Figma Advanced Course Online 6 hours
Push your Figma skills further with this advanced prototyping course. You'll learn to work with variables, modes, and conditionals to bring more realistic interactivity to your prototypes.
- Explore Figma's advanced prototyping features
- Learn how to work with variables and variable modes
- Use conditionals to add advanced interactivity to your prototypes
- Create light and dark modes using variable collections
- Apply primitive and semantic layers when building a design system
-
UX Design Foundations Course Online 12 hours
Get to the heart of what UX design is all about. From UX versus UI through usability testing and prototyping, dig into the finer points of user experience design. Build practical skills in research, wireframing, and more. Advance your design skills with this comprehensive course.
- Understand what user experience design is and how it goes beyond visual design
- Learn how UX Designers work with teams to research, plan, test, and improve digital experiences
- Explore the overall UX design process, from discovery and research to concepts and presentation
- Practice UX research methods, including user interviews, observations, heuristics, and competitive analysis
- Learn common UX terminology and deliverables, such as personas, journey maps, scenarios, and user flows
- Use sketching and iteration to develop, refine, and improve design ideas
- Learn how to document your process and present UX work clearly and professionally
-
UX & UI Design Bootcamp Online 114 hours
Learn the applied UX and UI design process through hands-on projects. Practice user research, user flows, wireframing, responsive interface design, prototyping, usability testing, iteration, and UX case study development.
- Conduct user research through interviews, surveys, competitive analysis, and usability testing
- Create personas, journey maps, user flows, and information architecture to guide design decisions
- Design wireframes, responsive layouts, and polished UI projects for web and mobile interfaces
- Apply usability principles, accessibility standards, and common UI patterns to improve user experiences
- Build interactive prototypes and iterate on designs based on feedback, usability findings, and project goals
- Document your process in a portfolio-ready UX case study that demonstrates user-centered design thinking
-
AI for UX & UI Design Course Online 18 hours
Run a full product challenge with AI at your side, from research analysis through inclusive design, prototyping, and testing.
- Create a reusable AI workspace that supports the UX process from research through prototyping and testing
- Use AI to organize research, identify patterns, and turn findings into problem statements, journeys, user stories, and feature priorities
- Define when AI should act, assist, recommend, request approval, or leave control with the user
- Design inclusive AI-powered experiences for accessibility, uncertainty, errors, correction, and recovery
- Turn structured Figma designs into interactive prototypes using AI-assisted development tools
- Test and refine AI-powered experiences for design quality, accessibility, consistency, trust, and user control while building a repeatable Agentic AI workflow
-
AI Coding Bootcamp with Claude Code Online 60 hours
Take command of the entire process of planning, building, and deploying real web applications with Claude Code in this beginner-friendly, hands-on bootcamp featuring expert instruction, interactive practice, and ten hands-on labs that end with a live app launch.
- Use Claude Code to plan, build, debug, and deploy web applications through natural language
- Apply the Explore → Plan → Execute → Review workflow to manage multi-step development tasks
- Construct full-stack apps complete with databases, user authentication, and external API integrations
- Incorporate responsive design, accessibility standards, and professional UI patterns
- Establish web security fundamentals including input validation and environment variable management
- Ship finished applications to a live URL using version control and modern hosting platforms
-
AI UX Design Portfolio Development Course Online 60 hours
Create three deployed UX/UI applications while building projects that bring together user research, design systems, usability testing, accessibility, AI workflows, and live app development.
- Plan and scope portfolio-ready UX/UI applications around your goals and project interests
- Pick three projects from a selection of UX/UI-focused app options
- Build live apps like portfolio websites, case study builders, research repositories, and UX dashboards
- Create UX tools for journey mapping, service blueprinting, usability testing, accessibility audits, and design handoff
- Tap AI app development tools to build responsive interfaces, database-backed features, and working product flows
- Deploy and document three finished projects that showcase UX strategy, UI design, AI workflows, and technical execution
What's included
- 312 hours of project-based instruction
- 64 training videos
- Instructor support for questions during the course
- Additional one-on-one mentoring outside class
- Verified digital certificate of completion
- Instruction at an ACCET-accredited school
Stated by the provider. Confirm what your tuition covers before enrolling.