Ciao Smashing Friends,
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 daily ship code in production?
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.
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 fomat 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.
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.
Meet our brand-new book: “Accessible UX Research” by Michele A. Williams. Printed copies shipping now.
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.
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:
10. Person Of The Week: Matej Latin
Please give a warm round of applause for our Person of the Week: Matej Latin. Matej is a self-taught designer proving that you don’t need a degree to have a successful career in design. Originally from Slovenia, his passion for simple and usable design took him on a journey through Germany, Luxembourg, London, and Edinburgh, from his first role as a designer at a startup to Senior Product Designer at GitLab and curator at TLDR.
Fascinated by the gray area between design and development, Matej created the web typography starter kit Gutenberg and the free course Better Web Type. He is also the author of the book Better Web Typography For A Better Web.
Thank you for everything you do for the community, dear Matej! 🧡
11. Recent Smashing Articles
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 Cosima Mielke, Vitaly Friedman and Iris Lješnjanin.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Mastadon • Join us on Bluesky
