Training course · Windsurf · UX Design & Prototyping

Windsurf for UX Designers

Develop with the Windsurf AI IDE and its Cascade agent: flows, memories, rules, workflows and safe use across the team.

Duration
2 days (14 hrs)
Format
Online or on-site
Language
German or English
Participants
open dates or exclusive for your team
Certificate
Certificate of attendance

Overview

This course connects Windsurf with the everyday processes of UX Design & Prototyping. Participants work on realistic scenarios and leave with prompts, workflows and checklists they can use straight away.

Windsurf is an AI-powered development environment built around its agent, Cascade. Cascade understands the structure of your project, follows your actions in the editor and terminal, and works with you according to the flow principle: you and the agent take turns on the same task without having to re-explain context over and over. In this two-day course you will learn how to use Cascade effectively for features, debugging and refactoring, and how to make the most of intelligent completion in your daily development work.

To keep results consistent across a team, you steer Cascade with global and workspace rules, rely on memories for lasting project knowledge and automate recurring procedures with workflows that run from a slash command. You will connect external tools through MCP, control how terminal commands are executed and decide which data Cascade is allowed to see. Finally, you will define rules for code review, security and data protection so that Windsurf can be used responsibly within your organisation and its existing processes.

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.

The course is delivered live – either online in a virtual classroom or on-site in our training rooms in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart and Kaiserslautern. We can also run it exclusively for your team.

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

What you will be able to do

  • You use Cascade productively in flow for features, debugging and refactoring.
  • You steer Windsurf’s context precisely and keep sensitive content protected.
  • You maintain memories and rules that reliably enforce your project conventions.
  • You automate recurring procedures with workflows and connect external tools via MCP.
  • Build interactive, code-based prototypes with AI and test ideas with users much earlier.
  • Translate design systems and tokens into code and improve hand-offs to engineering teams.
  • Review prototypes systematically for accessibility and understand the line between prototype and production code.

Course outline

Day 1

Module 1 Getting to know Windsurf and Cascade
  • Installation, importing existing editor settings and basic configuration
  • Cascade in code and chat mode: when the agent edits and when it only advises
  • The flow principle: how Cascade takes your editor and terminal actions into account
  • Intelligent completion and inline commands in everyday development
Module 2 Steering context
  • Understanding codebase indexing and referencing relevant files or directories
  • Bringing documentation, web sources and terminal output into context
  • Excluding sensitive content from context with ignore files
  • Structuring sessions and starting afresh when the topic changes
Module 3 Memories and rules for consistent results
  • Reviewing and maintaining auto-generated and manually created memories
  • Creating and versioning global and workspace rules
  • Expressing architecture, style and testing guidelines as effective rules
  • Activating rules selectively by file pattern or occasion
Module 4 Workflows and automation
  • Defining recurring procedures as workflows and launching them via slash command
  • Building workflows for release preparation, testing or code maintenance
  • Connecting MCP servers for issue trackers, databases or internal services
  • Controlling terminal command execution with allow and deny lists

Day 2

Module 5 Quality, review and governance
  • Tracing Cascade’s changes, accepting them partially or reverting them
  • Using a test-driven approach and preview features for verification
  • Team settings, data protection options and handling of secrets
  • Defining review processes and accountability for AI-generated code
Module 6 Practice lab: UX Design & Prototyping
  • Clickable prototypes in code
  • Generating test variants
  • Turning design tokens into code
  • Checking accessibility
  • Designing microinteractions
  • Synthesising research
Module 7 Data protection, quality & transfer to daily work
  • 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.
  • Ground rules for safe AI use in your team
  • Checking results: facts, sources, tests and the four-eyes principle
  • Personal action plan for the next 30 days
  • Open questions, outlook and resources for further learning

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.

Prerequisites

You program regularly in at least one language and are familiar with Git and a modern IDE. 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.

Technical requirements

Your own laptop with the Windsurf editor, Git and your usual toolchain installed; a Windsurf account with access to Cascade is required.

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.

Suggested dates

All dates are suggestions – your preferred date is always possible.

  • Mon, 23 November 2026 – Tue, 24 November 2026 Online Request
  • Tue, 1 December 2026 – Wed, 2 December 2026 Kaiserslautern Request
  • Thu, 10 December 2026 – Fri, 11 December 2026 Online Request
  • Mon, 14 December 2026 – Tue, 15 December 2026 Bremen Request
  • Thu, 14 January 2027 – Fri, 15 January 2027 Online Request
  • Mon, 18 January 2027 – Tue, 19 January 2027 Salzburg Request

Frequently asked questions

What does Windsurf mean by flows?

Flows describe the close collaboration between you and Cascade. The agent observes what you do in the editor and terminal and takes those actions into account in its next steps. As a result you do not have to keep explaining where you are, and you can move smoothly between doing the work yourself and delegating it to the agent.

How do memories, rules and workflows differ?

Memories store knowledge that Cascade has gathered while working or that you have explicitly recorded. Rules are guidelines you write that shape the agent’s behaviour permanently. Workflows are reusable sequences of steps for recurring tasks, launched with a slash command. Together they keep results consistent across the whole team.

Can I use Windsurf with my existing projects and languages?

Yes. Windsurf is language-agnostic and works with your existing toolchain, including build tools, package managers and test frameworks. Whether you work on back end, front end, data processing or infrastructure code, what matters is giving Cascade good rules and clear context. Each course variant adds the specific focus for your field.

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.

How much does “Windsurf for UX Designers” cost?

The course costs a flat €949 plus VAT per participant – whether online or on-site. This includes 2 training day(s) with a live trainer, course materials, a lab environment and a certificate of attendance.

Can I suggest my own date?

Yes. Our suggested dates are just a guide. In the request form you can always describe your preferred date or period in free text – we check availability and confirm within one working day.

Is the course online or on-site?

Both are possible: live online in a virtual classroom or on-site in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart or Kaiserslautern. We can also run the course exclusively for your team.

More courses for UX Designers

More Windsurf courses

All 32 Windsurf courses

Windsurf · MunichWindsurf · SalzburgWindsurf · BerlinWindsurf · AugsburgWindsurf · HanoverWindsurf · BremenWindsurf · StuttgartWindsurf · KaiserslauternWindsurf · Online