Development & technology · UX Design & Prototyping
AI training for UX Designers
AI coding tools are shifting the boundary between design and development: UX designers can now build interactive prototypes in real code instead of only drawing clickable mock-ups. A screenshot, a sketch or a short description quickly becomes a working interface with real states, form logic and sample data that feels like a finished product in usability testing. AI assistants also translate design tokens, component libraries and accessibility checks straight into code. In this course you learn how vibe coding and AI agents take you from idea to testable prototype faster, how to hand results over cleanly to engineering teams and where the line runs between a prototype and production-ready software.
Who is this course for?
- UX and UI designers
- Product designers and interaction designers
- UX researchers who want to test variants quickly
- Product owners and product managers with design responsibility
- Design system teams working closely with frontend engineering
Typical challenges we address
- Static mock-ups barely capture interactions, states and real data
- Hand-offs to engineering lose details, spacing and behavioural logic
- Long waits for engineering capacity to run experiments and A/B variants
- Accessibility is often considered late and incompletely
Practical scenarios from your field
Clickable prototypes in code
Turn sketches, wireframes or screenshots into working web prototypes with navigation, form validation, loading and error states and realistic sample data that can be tested directly in the browser.
Generating test variants
Produce several design variants of a flow in parallel, for example onboarding or checkout, and prepare them for usability tests or A/B experiments with minimal adjustments.
Turning design tokens into code
Structure colours, typography, spacing and radii from your design system as tokens and convert them into CSS variables, Tailwind configuration or theme files for component libraries.
Checking accessibility
Examine prototypes for contrast, semantic HTML, keyboard navigation, focus order and ARIA attributes and have concrete WCAG-based improvements applied directly in the code. Issues are fixed before reaching engineering.
Designing microinteractions
Describe transitions, animations and feedback states and implement them in CSS or JavaScript, so you can judge timing and effect early in the real medium rather than in a drawing tool.
Synthesising research
Cluster notes from interviews and usability tests, surface patterns and pain points and derive prioritised design hypotheses that feed straight into the next prototype iteration.
Possible hands-on projects
Onboarding prototype
A multi-step onboarding flow as a web app with a progress indicator, validation and saved inputs, ready for moderated usability testing.
Token converter
A small tool that reads exported design tokens and generates CSS variables, a colour palette with contrast ratios and a preview page.
Component playground
An overview page showing your design system’s buttons, forms and cards in every state, including light and dark mode. It doubles as a living reference.
All 9 courses for UX Designers
Vibe & agentic coding (9)
Data protection & compliance
Prototypes often contain unreleased product ideas and research data from participants: you learn to pseudonymise interview notes in line with the GDPR, clarify rights to fonts, images and generated assets and plan early for the European Accessibility Act.
Prerequisites
You have experience in UX or UI design and with common design tools; no programming skills are required, although a basic understanding of HTML and CSS helps.
Frequently asked questions
Do I need to know how to code as a designer?
No. You describe interfaces and behaviour in plain language, with sketches or screenshots, and the AI tool generates the code. It helps to understand basic terms such as component, state or CSS class so you can steer precisely. We cover these concepts hands-on in the course, so you can adapt and evolve prototypes on your own.
Can the engineering team reuse the prototype code?
Sometimes, but more often it serves as a precise specification. Prototypes are optimised for speed, not for security, performance or maintainability. If you use the same component library and tokens as the product from the outset, reuse becomes much more likely. In the course you work out how to design hand-offs that benefit both sides.
Request without obligation
We will get back to you within one working day with a confirmation or an alternative suggestion.