---

€549^.00 Excl. 21% VAT Register for this workshop → Get a single workshop, or bundle with a conference.

The workshop covers multiple entry points into a context-based workflow, whether you’re starting from tokens, Figma, or existing codebases. Participants will see how context connects these pieces, how different paths lead to different outcomes, and how teams can choose approaches that fit their maturity and constraints.

This is a live, practical workshop that spans beginner through advanced topics, including modern tools and emerging techniques such as custom MCPs and sub-agents. Participants will leave with a clearer understanding of how to structure context for AI, adapt workflows as complexity grows, and work productively even when things don’t go exactly as planned.

After this workshop, you will be able to design and apply a Context-Based Design Systems workflow that helps teams use AI more effectively across design and development, with clearer structure, better handoffs, and more predictable outcomes.

What will attendees learn in this workshop?

• Understand where AI fits into modern design system workflows
  Learn how teams are using AI alongside design systems today, and where structure provides the most value.
• Design usable context for AI
  See how tokens, components, patterns, metadata, and documentation work together to guide AI more effectively.
• Apply a Context-Based Design Systems workflow
  Understand how context flows across design tools, component libraries, and code, and how different starting points affect outcomes.
• Connect design and development more effectively
  Learn how shared context reduces friction between designers and developers when AI is part of the workflow.
• Evaluate tools and approaches across maturity levels
  Explore practical tools and emerging techniques, from foundational workflows to more advanced approaches like MCPs and agent-based setups.

Who Is This For?

This workshop is designed for intermediate to advanced practitioners, while remaining accessible to motivated beginners.

It’s particularly relevant for:

• Designers and design system practitioners
• Front-end developers working with React, component libraries, and Storybook
  
• Design system and engineering leads
  
• Cross-functional product teams building and maintaining digital products

No deep AI expertise is required, but attendees should be comfortable with design systems or front-end workflows at a practical level.

What Hardware/software Do You Need?

For those who want to follow along hands-on, you should have:

• Node.js (LTS)
  
• npm
  
• Git
  
• An AI-based code editor such as Cursor
  
• A modern browser (Chrome, Firefox, or Safari)

The workshop will use a React-based component library with Storybook. TJ will provide a Figma project and repository ahead of time with everything needed.

You will also need access to AI tooling, preferably Claude, via their editor or workflow. Tools like Cursor or Claude Code work especially well. A paid AI plan is strongly recommended, though any capable paid model should be sufficient.

We’ll share full setup instructions and links in advance, and attendees are welcome to observe without following along locally if they prefer.

About TJ Pitre

TJ Pitre is the Founder and CEO of Southleft, a front-end design and development agency specializing in design systems and AI-driven product workflows. He works with teams to bridge design and engineering using structured context, modern tooling, and practical experimentation. TJ regularly shares live demos and real-world lessons on AI, design systems, and product development.

Time & Location

This full-day workshop will take place the day before SmashingConf. The workshop will be running from 09:30 to 17:00 on Monday, April 13, 2026.

The workshop is happening at Theo Thijssenhuis (HvA), Wibautstraat 2-4, 1091 RZ Amsterdam.

Schedule for Monday, April 13, 2026

09:00 – Doors open, Registration
09:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:00 – The End

Save 100 EUR when signing up for the conference and a workshop!