25:I[56264,["/_next/static/chunks/3fntmmi971322.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/291ciwmgtp_xc.js","/_next/static/chunks/2owa30hnifmhr.js","/_next/static/chunks/2tie5rqwdsi89.js","/_next/static/chunks/2dnipz2c0692b.js","/_next/static/chunks/1mf5iq195c2sn.js","/_next/static/chunks/03wn0-bzh3abk.js","/_next/static/chunks/0_02m0ghanddv.js"],"GuestHistoryRecorder"] 26:I[3004,["/_next/static/chunks/3fntmmi971322.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/291ciwmgtp_xc.js","/_next/static/chunks/2owa30hnifmhr.js","/_next/static/chunks/2tie5rqwdsi89.js","/_next/static/chunks/2dnipz2c0692b.js","/_next/static/chunks/1mf5iq195c2sn.js","/_next/static/chunks/03wn0-bzh3abk.js","/_next/static/chunks/0_02m0ghanddv.js"],"EmailPreview"] 29:I[27201,["/_next/static/chunks/3fntmmi971322.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/291ciwmgtp_xc.js","/_next/static/chunks/2owa30hnifmhr.js"],"IconMark"] 27:Tf2d0, Smashing Newsletter

How to reduce AI hallucinations, how to make design systems AI-ready, design system component contracts. Issue #579 • Oct 6, 2026 • View in the browser

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.

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 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:

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 →

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

Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com.
unsubscribe • update preferences • view in your browser

28:T36f4,How to reduce AI hallucinations, how to make design systems AI-ready, design system component contracts. Issue #579 • Oct 6, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/579-ai-ready-design-systems?e=45c4871904) https://www.smashingmagazine.com/the-smashing-newsletter/ ** 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 (https://smashingconf.com/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 (https://smashingconf.com/amsterdam-2027) . https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/ * Accessible Frontend Patterns (https://smashingconf.com/online-workshops/workshops/accessible-frontend-patterns-manuel-matuzovic/) Dev with Manuel Matuzović. Oct 12 – Nov 2 * Measure UX and Design Impact (https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/) UX + self-paced course (https://measure-ux.com/) with Vitaly Friedman. Oct 20 – Nov 3 * Building Modern HTML Emails (https://smashingconf.com/online-workshops/workshops/html-email-remi-parmentier/) Dev with Rémi Parmentier. Oct 26–29 * Deep Dive On Accessibility Testing (https://smashingconf.com/online-workshops/workshops/accessibility-testing-manuel-matuzovic/) Dev with Manuel Matuzović. Nov 9 – Nov 23 * Design Patterns For AI Interfaces (https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/) UX + self-paced course (https://ai-design-patterns.com/) with Vitaly Friedman. Nov 16–24 * Jump to all workshops → (https://smashingconf.com/online-workshops/) In the meantime, the schedule and line-ups for SmashingConf Freiburg 2027 (https://smashingconf.com/freiburg-2027) 🇩🇪 will be announced very soon, too. Keep an eye on the early-bird tickets (https://smashingconf.com/amsterdam-2027/registration) , though! Now, let’s jump into some friendly insights! — Vitaly (https://www.linkedin.com/in/vitalyfriedman/) ------------------------------------------------------------ ** 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 (https://www.smashingmagazine.com/2026/06/how-make-design-system-ai-ready/) 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 (https://hvpandya.com/llm-design-systems) into a fomat LLMs can consume. https://www.smashingmagazine.com/2026/06/how-make-design-system-ai-ready/ ------------------------------------------------------------ ** 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 (https://christinevallaure.substack.com/p/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 (https://christinevallaure.substack.com/p/you-design-it-then-what-a-clear-map) , 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. https://christinevallaure.substack.com/p/you-design-it-then-what-a-clear-map ------------------------------------------------------------ ** 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 (https://designsystems.surf/articles/ai-ready-design-system) and how to create one source of truth that works for people, code, and AI. https://designsystems.surf/articles/ai-ready-design-system ------------------------------------------------------------ ** 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 (https://learn.thedesignsystem.guide/p/design-systems-that-document-ai) . She distilled her findings into a set of four rules which you can copy when adding AI to your design system. https://learn.thedesignsystem.guide/p/design-systems-that-document-ai ------------------------------------------------------------ ** 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 (https://github.com/southleft/ds-contracts-poc) , 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 (https://christinevallaure.substack.com/p/design-system-contracts-the-component) . https://christinevallaure.substack.com/p/design-system-contracts-the-component ------------------------------------------------------------ ** 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 (https://smart-interface-design-patterns.com/articles/ai-drift-design-systems/) , 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. https://smart-interface-design-patterns.com/articles/ai-drift-design-systems/ ------------------------------------------------------------ ** 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 (https://nathanacurtis.substack.com/p/generating-code-from-specs) and how it pushed specs authoring and conventions further in a post. https://nathanacurtis.substack.com/p/generating-code-from-specs ------------------------------------------------------------ ** 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 (https://www.smashingmagazine.com/printed-books/accessible-ux-research/) or order the eBook for instant download (https://www.smashingmagazine.com/ebooks/accessible-ux-research-ebook/) . https://www.smashingmagazine.com/printed-books/accessible-ux-research/ Meet our brand-new book: “Accessible UX Research (https://www.smashingmagazine.com/printed-books/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 (https://smashed.by/accessibleresearchsample) (PDF, 2.3MB) or get the book right away (https://www.smashingmagazine.com/printed-books/accessible-ux-research/) . ------------------------------------------------------------ ** 9. Upcoming Workshops and Conferences ------------------------------------------------------------ That’s right! We run online workshops on frontend and design (https://www.smashingconf.com/online-workshops/) , 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. https://smashingconf.com/online-workshops/ With online workshops (https://smashingconf.com/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 (https://smashingconf.com/online-workshops/workshops/accessible-frontend-patterns-manuel-matuzovic/) Dev with Manuel Matuzović. Oct 12 – Nov 2 * How To Measure UX and Design Impact (https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/) UX + self-paced course (https://measure-ux.com/) with Vitaly Friedman. Oct 20 – Nov 3 * Building Modern HTML Emails (https://smashingconf.com/online-workshops/workshops/html-email-remi-parmentier/) Dev with Rémi Parmentier. Oct 26–29 * Deep Dive On Accessibility Testing (https://smashingconf.com/online-workshops/workshops/accessibility-testing-manuel-matuzovic/) Dev with Manuel Matuzović. Nov 9 – Nov 23 * Design Patterns For AI Interfaces (https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/) UX + self-paced course (https://ai-design-patterns.com/) with Vitaly Friedman. Nov 16–24 * Jump to all workshops → (https://smashingconf.com/online-workshops/) ------------------------------------------------------------ ** 10. Person Of The Week: Matej Latin ------------------------------------------------------------ Please give a warm round of applause for our Person of the Week: Matej Latin (https://matejlatin.com/) . 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. https://www.smashingmagazine.com/person-of-the-week/matej-latin/ Fascinated by the gray area between design and development, Matej created the web typography starter kit Gutenberg (https://matejlatin.github.io/Gutenberg/) and the free course Better Web Type (https://betterwebtype.com/) . He is also the author of the book Better Web Typography For A Better Web (https://betterwebtype.com/web-typography-book/) . Thank you for everything you do for the community, dear Matej! 🧡 ------------------------------------------------------------ ** 11. Recent Smashing Articles ------------------------------------------------------------ * Under Autumn’s Spell (October 2026 Wallpapers Edition) (https://www.smashingmagazine.com/2026/09/desktop-wallpaper-calendars-october-2026/) * Stop Treating CSS Container Queries Like Traditional Media Queries (https://www.smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/) * Building A UX ROI Case That Survives The Boardroom (https://www.smashingmagazine.com/2026/09/building-ux-roi-case-survives-boardroom/) * The Death Of The Button: Why The Best Interface Is No Interface (https://www.smashingmagazine.com/2026/09/death-button-why-best-interface-is-no-interface/) ------------------------------------------------------------ ** 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 (http://www.smashingmagazine.com/about/) readers via Mailchimp (http://www.mailchimp.com) . We sincerely appreciate your kind support. You rock. Follow us on Mastadon (https://mastodon.social/@smashingmag) • Join us on Bluesky (https://bsky.app/profile/smashingmagazine.com) ============================================================ Weekly issues with useful tips for web devs. Email: ** newsletter@smashingmagazine.com (mailto:newsletter@smashingmagazine.com) . ** unsubscribe (https://smashingmagazine.us1.list-manage.com/unsubscribe?u=16b832d9ad4b28edf261f34df&id=a1666656e0&t=b&e=45c4871904&c=b6d5abe030) • ** update preferences (https://smashingmagazine.us1.list-manage.com/profile?u=16b832d9ad4b28edf261f34df&id=a1666656e0&e=45c4871904&c=b6d5abe030) • ** view in your browser (https://mailchi.mp/smashingmagazine/579-ai-ready-design-systems?e=45c4871904) 1f:["$","article",null,{"className":"min-w-0 flex-1 overflow-hidden","aria-label":"#579: AI-Ready Design Systems","children":[["$","$L25",null,{"emailId":"c97b972e-2147-496d-8256-7bad82d2e51e"}],["$","$L26",null,{"email":{"id":"c97b972e-2147-496d-8256-7bad82d2e51e","subject":"#579: AI-Ready Design Systems","previewText":"How to reduce AI hallucinations, how to make design systems AI-ready, design system component contracts. Issue #579 • Oct 6, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/579-ai-ready-design-systems?e=45c4871904)\n\nhttps://www.smashingmagazine.com/the-smashing-newsletter/\n\n\n**\n Ciao","sentAt":"2026-10-06T11:54:49.000Z","classification":"marketing","imageCount":13,"thumbnailUrl":"https://mailspo-ingest.imraan-243.workers.dev/img/renders/c97b972e-2147-496d-8256-7bad82d2e51e.jpg","emailType":"newsletter","typeConfidence":"guess","typeBasis":"no stronger signal","brand":"$23:props:brands:959","bodyHtml":"$27","textBody":"$28","bodyFallback":null}}]]}] a:null f:[["$","title","0",{"children":"#579: AI-Ready Design Systems by Smashing Magazine | Mailspo"}],["$","meta","1",{"name":"description","content":"How to reduce AI hallucinations, how to make design systems AI-ready, design system component contracts. Issue #579 • Oct 6, 2026 • View in the browser (https:/"}],["$","meta","2",{"name":"robots","content":"index, follow"}],["$","link","3",{"rel":"canonical","href":"https://mailspo.com/emails/c97b972e-2147-496d-8256-7bad82d2e51e"}],["$","meta","4",{"property":"og:title","content":"#579: AI-Ready Design Systems by Smashing Magazine | Mailspo"}],["$","meta","5",{"property":"og:description","content":"How to reduce AI hallucinations, how to make design systems AI-ready, design system component contracts. Issue #579 • Oct 6, 2026 • View in the browser (https:/"}],["$","meta","6",{"property":"og:url","content":"https://mailspo.com/emails/c97b972e-2147-496d-8256-7bad82d2e51e"}],["$","meta","7",{"property":"og:site_name","content":"Mailspo"}],["$","meta","8",{"property":"og:image","content":"https://mailspo-ingest.imraan-243.workers.dev/img/renders/c97b972e-2147-496d-8256-7bad82d2e51e.jpg"}],["$","meta","9",{"property":"og:image:alt","content":"Smashing Magazine email creative: #579: AI-Ready Design Systems"}],["$","meta","10",{"property":"og:type","content":"article"}],["$","meta","11",{"property":"article:published_time","content":"2026-10-06T11:54:49.000Z"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"#579: AI-Ready Design Systems by Smashing Magazine | Mailspo"}],["$","meta","14",{"name":"twitter:description","content":"How to reduce AI hallucinations, how to make design systems AI-ready, design system component contracts. Issue #579 • Oct 6, 2026 • View in the browser (https:/"}],["$","meta","15",{"name":"twitter:image","content":"https://mailspo-ingest.imraan-243.workers.dev/img/renders/c97b972e-2147-496d-8256-7bad82d2e51e.jpg"}],["$","meta","16",{"name":"twitter:image:alt","content":"Smashing Magazine email creative: #579: AI-Ready Design Systems"}],["$","link","17",{"rel":"icon","href":"/favicon.ico?favicon.3lxqohtg4uvbd.ico","sizes":"48x48","type":"image/x-icon"}],["$","$L29","18",{}]]

Search Mailspo