Smashing Newsletter: Issue #579

Editorial

How do we make our design systems AI-ready? How do we reduce AI drifting when building out prototypes, or moving between design and code? And do designers ship code in production daily?

We’ll look into all of these topics at our upcoming SmashingConf Amsterdam 2027 🇳🇱 — a friendly conference focused on real struggles teams experience daily. With hands-on workshops and unplugged sessions: bring your problem, and let’s see how we can solve it! Early-bird tickets are now live.

Accessible Frontend Patterns Dev
with Manuel Matuzović. Oct 12 – Nov 2
Measure UX and Design Impact UX + self-paced course
with Vitaly Friedman. Oct 20 – Nov 3
Building Modern HTML Emails Dev
with Rémi Parmentier. Oct 26–29
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 9 – Nov 23
Design Patterns For AI Interfaces UX + self-paced course
with Vitaly Friedman. Nov 16–24
Jump to all workshops →

In the meantime, the schedule and line-ups for SmashingConf Freiburg 2027 🇩🇪 will be announced very soon, too. Keep an eye on the early-bird tickets, though!

Now, let’s jump into some friendly insights!

— Vitaly

1. Expose Your Design System To AI

AI relies heavily on clear decisions and well-defined principles in order to deliver consistent outcomes. To help you get your design system AI-ready, Vitaly wrote a helpful guide with tips, tools, and examples of AI-ready design systems.

If you want to dive deeper into how to reduce drifts, minimize mistakes, and maintain context, also be sure to check out Hardik Pandya’s method for restructuring design systems into a format LLMs can consume.

2. Practical Guide To Agentic AI

How does AI turn a Figma file into code? And how does that change the role of designers? If you’re a beginner looking to find your way through the AI fog, Christine Vallaure has got you covered. In her practical guide to agentic AI, design systems, and Figma, she explores how an agentic setup gives designers more power than ever over the creative outcome, and the process to get there.

For a comprehensive introduction to agentic AI, also be sure to check out Christine’s Figma-to-code guide, in which she dissects the design-to-code stack. A wonderful read that helps teams of all sizes find the agentic AI approach that best suits their needs.

A Clear Map Of The Figma-to-Code AI Mess

3. How To Build A System That Works

Is a component current, approved, and safe to reuse? If the design system is missing context about things like these, humans can fill the gaps from experience. AI, on the other hand, needs explicit decisions; otherwise, it will produce something based on guesswork. Ilya Greben wrote a useful guide on what makes a design system AI-ready and how to create one source of truth that works for people, code, and AI.

4. Design Systems That Document AI

Shipping an AI chat panel or a glowing suggestion field isn’t hard these days. Documenting when to use it, how to mark it, who stays in control, and what happens when it fails is the real challenge. Romina Kavcic examined 156 design systems to find out how design system teams document AI. She distilled her findings into a set of four rules which you can copy when adding AI to your design system.

5. Design System Component Contracts

You’ve probably been there before: You change a button in one place, someone forgets to change it in the other, and Figma and code slowly drift apart. To prevent that from happening, Southleft published Design System Contracts, a repo that connects your component library in code and your design library in Figma through a shared, machine-readable contract.

For a comprehensive breakdown of how design system contracts work and who needs them, be sure to check out Christine Vallaure’s write-up.

6. How To Reduce AI Drifting

What’s the real source of truth in your design system? AI in the loop tends to widen the gap between components in Figma and the code in Storybook. Vitaly explores how to reduce drift, with the help of component contracts and harness engineering. They set deterministic guardrails within which AI can freely operate and take AI out of the loop at the right moment.

7. Generating Code From Specs

Seeing design technologists spend weeks leveraging agents, LLMs, MCPs, and spec tooling to code components for a React prototyping kit, Nathan Curtis asked himself if the process couldn’t be automated. His approach, generating code from Figma via specs, took him much further than he had originally intended. He summarized his journey and how it pushed specs authoring and conventions further in a post.

8. Accessible UX Research, Now Shipping 📚

We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.

Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the book right away.

9. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

Accessible Frontend Patterns Dev
with Manuel Matuzović. Oct 12 – Nov 2
How To Measure UX and Design Impact UX + self-paced course
with Vitaly Friedman. Oct 20 – Nov 3
Building Modern HTML Emails Dev
with Rémi Parmentier. Oct 26–29
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 9 – Nov 23
Design Patterns For AI Interfaces UX + self-paced course
with Vitaly Friedman. Nov 16–24
Jump to all workshops →

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

October 6, 2026 Smashing Newsletter: Issue #579

Previous Issues