Training course · Claude Code · UX Design & Prototyping

Claude Code for UX Designers

Agentic coding with Claude Code in the terminal and IDE: CLAUDE.md, subagents, hooks, MCP, CI pipelines and secure permissions.

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

“Claude Code for UX Designers” is designed for roles such as UX and UI designers, Product designers and interaction designers and UX researchers who want to test variants quickly and shows step by step how to use Claude Code productively, safely and transparently in UX Design & Prototyping – from the fundamentals to advanced workflows.

Claude Code is Anthropic’s agentic coding assistant, working directly in your terminal and in popular IDEs. Rather than completing individual lines, it reads your repository, plans changes across multiple files, runs commands, executes tests and prepares commits. Over two days you will learn to use it with deliberate control: clear project instructions in CLAUDE.md, careful context management, and a workflow in which you set the direction as a developer and can trace every change the agent makes back to a clear intention.

The course is built around real engineering work: diagnosing bugs, delivering features, refactoring legacy code and filling gaps in test coverage. You will configure subagents for specialised tasks, enforce quality checks with hooks, connect external systems through the Model Context Protocol (MCP) and capture team knowledge as reusable skills. Finally, you will run Claude Code headless in CI pipelines and define permissions, sandboxing and approval rules so that its use remains defensible even in security-sensitive environments.

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 Claude Code for multi-step development tasks while keeping full control over every change.
  • You maintain a CLAUDE.md that effectively conveys project conventions, commands and architectural guidance to the agent.
  • You extend Claude Code with subagents, hooks, MCP servers and skills tailored to your team.
  • You integrate Claude Code into Git workflows and CI pipelines with traceable, test-backed results.
  • 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 How Claude Code works
  • Installation, sign-in and use in the terminal, VS Code and JetBrains IDEs
  • Understanding the agentic loop: read, plan, act, verify
  • Using plan mode to agree on an approach before any code changes
  • Writing effective task briefs with goal, context and acceptance criteria
Module 2 Project context with CLAUDE.md and context management
  • Structuring CLAUDE.md at project, directory and user level
  • Documenting build, test and style conventions so the agent follows them reliably
  • Managing the context window with targeted file references, compaction and fresh sessions
  • Resuming sessions and breaking long tasks into manageable stages
Module 3 Extending Claude Code with subagents, hooks, MCP and skills
  • Defining subagents for code review, research or test generation
  • Using hooks to enforce formatting, linting or checks before and after tool calls
  • Connecting MCP servers for issue trackers, databases or internal documentation
  • Creating custom slash commands and skills for recurring team workflows
Module 4 Git workflows, testing and quality assurance
  • Creating branches, meaningful commits and pull requests with Claude Code
  • Test-first work: have tests written before the implementation
  • Reviewing diffs systematically and rejecting or refining changes
  • Organising parallel work with Git worktrees and multiple sessions

Day 2

Module 5 Headless operation, CI and security
  • Running Claude Code non-interactively in scripts and CI pipelines
  • Automated reviews and issue handling in GitHub or GitLab workflows
  • Configuring permission modes, allow and deny rules, and sandboxing
  • Handling secrets, prompt injection risks and organisation-wide policies
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 have hands-on programming experience in at least one language and are comfortable with Git and the command line. 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 admin rights, Git, a Node.js runtime and an up-to-date editor; a Claude subscription or Anthropic API access is required for the exercises.

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
  • Mon, 30 November 2026 – Tue, 1 December 2026 Augsburg Request
  • Tue, 15 December 2026 – Wed, 16 December 2026 Online Request
  • Mon, 11 January 2027 – Tue, 12 January 2027 Online Request
  • Thu, 21 January 2027 – Fri, 22 January 2027 Kaiserslautern Request
  • Tue, 2 February 2027 – Wed, 3 February 2027 Online Request

Frequently asked questions

How is Claude Code different from traditional code completion?

Code completion suggests the next few lines, whereas Claude Code acts as an agent that handles whole tasks: it searches the repository, plans changes across several files, runs tests and commands, and corrects itself based on the results. You define the goal and review the outcome instead of steering every single line yourself.

Is Claude Code secure enough for enterprise use?

By default, Claude Code asks for approval before editing files or running commands. Permission rules, sandboxing, managed settings and hooks let you define precisely what the agent may do. During the course you learn to configure these mechanisms to match your security and data protection requirements and to assess risks such as prompt injection.

Does Claude Code work with my language and tech stack?

Yes. Claude Code is language-agnostic because it works with files, terminal commands and your existing build and test tooling. Whether you use Python, Java, TypeScript, Go, SAP-related code or infrastructure as code, what matters most is a well-written CLAUDE.md describing your commands and conventions. Each course variant adds the relevant domain focus.

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 “Claude Code 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 Claude Code courses

All 77 Claude Code courses

Claude Code · MunichClaude Code · SalzburgClaude Code · BerlinClaude Code · AugsburgClaude Code · HanoverClaude Code · BremenClaude Code · StuttgartClaude Code · KaiserslauternClaude Code · Online