[{"data":1,"prerenderedAt":437},["ShallowReactive",2],{"article-figma-design-system-ai-components":3},{"page":4,"related":398},{"id":5,"title":6,"slug":7,"date":8,"_updatedAt":9,"external":10,"categories":11,"featuredMedia":16,"blocks":35,"menu":34,"foot":34,"seo":393},"NDER0IrPQ9KpLPStFEBqYA","How We Build: When the Design System Writes the Code","figma-design-system-ai-components","2026-08-14","2026-08-15T00:10:27+01:00","",[12],{"id":13,"slug":14,"title":15},"MRKCA8y-RtSXQRHCBbP9Og","innovation","Innovation",{"id":17,"_createdAt":18,"alt":19,"title":10,"focalPoint":20,"width":22,"height":23,"thumbnail":24,"small":25,"medium":26,"responsiveImage":27,"video":34},"MC_MDGXGS4Ouf0eZQ3P1Og","2026-08-14T23:52:57+01:00","A Figma design system exported to a machine-readable file and generated into working UI components with Claude Code.",{"x":21,"y":21},0.5,1200,630,"https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":28,"webpSrcSet":10,"sizes":29,"src":30,"width":22,"height":23,"aspectRatio":31,"alt":19,"title":10,"base64":32,"bgColor":33},"https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 300w,https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 600w,https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 900w,https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&fit=max&h=2880&q=95&w=2880 1200w","(max-width: 1200px) 100vw, 1200px","https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png?auto=format&fit=max&h=2880&q=95&w=2880",1.9047619047619047,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFAoLDhIPERUUEBENEBUPFxMZGBYVIhUaHysvGh0oHSEWJDUlKC0vMjIyHSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oFiUvLy8vLy8vOy8vLy8vLy8vLy8vLzs7Oy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA0AGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAABAgMFBwD/xAAdEAABBQADAQAAAAAAAAAAAAACAAEDBBESITEF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAYEQADAQEAAAAAAAAAAAAAAAAAAQITEv/aAAwDAQACEQMRAD8A1ayJvN34opqscoOJP6mvTmMuMqw7Ujz5qiqFmGw0Pj14brm7rk3Iue6gi7FyZ//Z","#8a3b3b",null,{"id":36,"type":37,"blocks":38},"Dl08L-MrRg24zsSmeYAeuQ","blocks_select",[39,69,73,84,86,111,113,133,135,144,146,169,171,191,193,202,204,212,214,236,238,310,312,321,323,390],{"id":40,"type":41,"eyebrow":42,"breadcrumb":34,"title":43,"titleSize":44,"titleAlignment":45,"label":46,"text":10,"media":47,"mediaMobile":34,"mediaSmall":34,"theme":64,"aligned":68},"NjT0UY9QR-2IkCOFaeE0WQ","media_hero_expanded_block","By Fantasy","When the Design System Writes the Code","h3","items-center justify-center","How We Build",{"id":48,"_createdAt":49,"alt":50,"title":10,"focalPoint":51,"width":52,"height":53,"thumbnail":54,"small":55,"medium":56,"responsiveImage":57,"video":34},"dE42b8zaTvuAc13ByzOusg","2026-08-14T23:52:16+01:00","A Pura Health design system spread out as UI screens, color ramps, pricing cards, a health dashboard, and a 3D digital twin viewer, showing the components generated from the system.",{"x":21,"y":21},1920,1360,"https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":58,"webpSrcSet":10,"sizes":59,"src":60,"width":52,"height":53,"aspectRatio":61,"alt":50,"title":10,"base64":62,"bgColor":63},"https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 480w,https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 960w,https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 1440w,https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&fit=max&h=2880&q=95&w=2880 1920w","(max-width: 1920px) 100vw, 1920px","https://www.datocms-assets.com/157026/1786747930-design-system-to-ai-components-hero.png?auto=format&fit=max&h=2880&q=95&w=2880",1.411764705882353,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICBIVFAoUFhYQDQ0VFhYWFg0OFxcZGCIVIhUaHysjGh0oHSEWJTUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHQ8OHS8dFigvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABEAGAMBIgACEQEDEQH/xAAZAAADAQEBAAAAAAAAAAAAAAAABAUCBwH/xAAhEAACAgECBwAAAAAAAAAAAAAAAgEDBBITBREUIjIzNP/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAH/xAAZEQADAQEBAAAAAAAAAAAAAAAAAQIDMRP/2gAMAwEAAhEDEQA/AOq3VJckrJJTgVW8zFjIeuG7Sf1UrfpgyrlBRnTF8PA2c2eQDMZS1XapAnesj/CjVvsEm+kABvg7MzleR4AEj6Vo/9k=","#719edc",{"id":65,"background":66,"text":68},"L7uq8OcuTDmlLHU0vtodMQ",{"hex":67},"#000000",false,{"id":70,"type":71,"space":72},"Le_eUA8FTUGximOTU4zvFQ","space_block","small",{"id":74,"type":75,"eyebrow":10,"title":10,"text":76,"cta":34,"list":77,"stats":78,"theme":79},"BZmZEBLSTcSK-iZLE7TCcA","text_block","\u003Cp dir=\"ltr\">\u003Cspan>Caroline Hilman is a Design Director at Fantasy. She wanted to know whether a design system built for a human team could brief an AI directly. Then she built a solution to prove it could.\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>With the system exported to a single file, Claude Code produced responsive, animated components and assembled a full page from a list.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",[],[],{"id":80,"background":81,"text":83},"O4LyKL--RA6nHTKQw1e3PQ",{"hex":82},"#FFFFFF",true,{"id":85,"type":71,"space":72},"WVvafdBeR_SF_QQ3atNY8Q",{"id":87,"type":88,"title":89,"text":90,"media":91,"caption":10,"theme":108,"reverse":68},"BFJ7FWWAS7eGH0_74FKv0A","media_text_block","\u003Ch2 dir=\"ltr\">\u003Cspan>Why make a design system AI-ready?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>The question showed up in Fantasy’s Slack months before the experiment, while her team was deep in base styles on a client project.\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“I’m wondering if Claude can generate the primitives and semantics tokens for the dev team (JSON file) based on the design provided. We’re working through the base styles right now and have been exploring naming conventions that would work for the LLM. All manual work that hopefully can be automated?”\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>The design system her team went on to deliver that spring gave her the test case. It was, in her words, “a really solid DS,” which made it a fair test.\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“My theory was that a well-structured design system could become more than a reference for designers, it could serve as the source of truth for AI. If we build the right foundation (design tokens with clear and simple naming conventions, component variants, states, behaviors, and design intent documentation), AI should be able to read and generate live, production-ready components.”\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",{"id":92,"_createdAt":93,"alt":94,"title":10,"focalPoint":95,"width":96,"height":97,"thumbnail":98,"small":99,"medium":100,"responsiveImage":101,"video":34},"HcYQGb9NTS62j-Qm-HolKQ","2026-08-14T23:52:24+01:00","The Pura Health design system components page on a tablet, showing the typography scale, core color ramps, buttons, and form inputs, beside a phone running the app.",{"x":21,"y":21},658,878,"https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":102,"webpSrcSet":10,"sizes":103,"src":104,"width":96,"height":97,"aspectRatio":105,"alt":94,"title":10,"base64":106,"bgColor":107},"https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 164w,https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 329w,https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 493w,https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&fit=max&h=2880&q=95&w=2880 658w","(max-width: 658px) 100vw, 658px","https://www.datocms-assets.com/157026/1786747939-design-system-ai-ready-figma-components-base-styles.png?auto=format&fit=max&h=2880&q=95&w=2880",0.7494305239179955,"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAMAAAAL146mAAABCFBMVEXCvrzDv73EwL7GwsDHw8HIxMLJxcPKxsTLx8XMyMbNycfOysfOysjPy8nQzMrRzMrRzcrRzcvSzcvSzsvSzszTz8zTz83Uz83U0M7V0c/W0c/W0tDX09HY09HY1NLZ1NLZ1dLZ1dPa1dPa1tPa1tTb1tTb19Xc2Nbd2dfe2tfe2tjf29ng29ng3Nrh3dvi3dvi3tzj393k4N7l4d/m4t/m4uDn4+Ho4+Ho5OLp5OLp5ePq5uTr5+Xs6OXs6Obt6ebt6efu6ujv6+nw6+nw7Orx7evy7uzz7+307+308O718e718e/28vD38vD38/H49PL59PL59fP69vT79/X89/X8+Pb9+ff++vgot9wXAAAA4klEQVR42i1Q0XFAIQgDpat1/2l6PoXQgPrBaUwgwX4T4RmZIpJIQGxC0nwWIlCIps3BizanSJGwH4mB0SRCMQgZdGA+Fu8xbFCk+lheDY1FU6WPFgzjePZoBAE/hE7NEYwm+Dmetop1dfDtJ8I+Acq6Srr73jtsCV6vDPe/vapXXhqhvdYXnCjBFO307PN5pFHXAxgv/KMAppUPUR2fPVPGadl1z9L7Yth6sZbGZiGQKMKYAaWwsj4hVfy2fp5TCHB79ebiOkPLjUaDWVE74+Lp0SoNTXKfozwXS9pkuaSbPv+nHfi9IpzOGQAAAABJRU5ErkJggg==","#c06c6c",{"id":109,"background":110,"text":83},"JdOYTHcMRTuPe1-_juWATw",{"hex":82},{"id":112,"type":71,"space":72},"Sj_PxmxTREWJHFh2btoMnw",{"id":114,"type":88,"title":115,"text":116,"media":117,"caption":10,"theme":130,"reverse":83},"Gfrec-g6S0OhRH6jIzOfiw","\u003Ch2 dir=\"ltr\">\u003Cspan>How does a design system become machine-readable?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>A Figma plugin called DesignBridge handled the translation.\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“DesignBridge extracts the design system into a structured .md file that acts as a machine-readable representation of the system. The file includes design tokens (color, typography, spacing, radius, elevation), component definitions, variants, states, relationships between components, and any guidance we’ve documented.”\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>From there the steps were short: upload the file to Claude, prompt it to generate new components (responsive, with states and micro-animations), then assemble a full page by listing the components she wanted.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",{"id":118,"_createdAt":119,"alt":120,"title":10,"focalPoint":121,"width":96,"height":97,"thumbnail":122,"small":123,"medium":124,"responsiveImage":125,"video":34},"PJfkyNvTTwyVC2oE5_nCBg","2026-08-14T23:52:30+01:00","The DesignBridge Figma plugin exporting a design system into a single machine-readable .md file, which is then read as context in a Claude Code session.",{"x":21,"y":21},"https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":126,"webpSrcSet":10,"sizes":103,"src":127,"width":96,"height":97,"aspectRatio":105,"alt":120,"title":10,"base64":128,"bgColor":129},"https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 164w,https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 329w,https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 493w,https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&fit=max&h=2880&q=95&w=2880 658w","https://www.datocms-assets.com/157026/1786747945-designbridge-figma-plugin-design-md-export.png?auto=format&fit=max&h=2880&q=95&w=2880","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAIAAACza+nDAAACeElEQVR42lVUW2LcQAhjgPEm9z9Zv3qCniH2PKAS9ibtrB+zNuIhhP3Pr99q6p3LumOfTdbec625Jq6Z0VTx9jiOj9cLNzfz9l7y3qRI/RXhRjJrl/lcEku8KX/a6nwcvHG3ff0CxhGBE24yvFDtv5iSP/a1sAdk46iFdy7fK+8rrBIucZQdrPed3ncqhtrgBg8qfOCG/AjYay8usAJ6AFKzO0P4MlC4yVUFapWW6s6A9ZhzjHGNCw5goKprOR3NTtgYU217lWthog2wsRYA13We14Ue4BXKN+fqjiYZYJcCFwGkbsCEsDnPcZ0Fwx6wpySAjL2taFrRAIuCBaJNBqs15tisWWg9gTKE8T1nmkl1VVFbY7QiYz1CgVSKTN3IhoWgTmdf4m5PSOojg5ukur+FUZ4htGAPHBGVp9WhoATdNtDDUhxEb2ROiSV0ZLWw8Vfvelscro7a1CTgpvrBrjRTKINC1Wb0XEl+fHxooQzKdhfTkJi7q9OLdfN5FOw7GiXsn5+fZAbMHhycRljOWPjrw330Y01IDGWpvnGEvSraA+vNCeuxrcYPD9F6yhI8/wvD+FmNKSZRjk6OmhyQxcJTvAcrkxLCZFmhnFk6J63RkTyHFZnhjQ0hE0ZxS8FIwc3kPQEgixIJtq4YZL84J3CJJy25MftpAESOJNHr3sTuwTI0NHdyeEAGFweXDhBWuU8/zy8mvGnQKcuHzJWoaU8gYUwFaMqjHVJyfp1IurM1sSCO7SSzARaQIjoReVeohinhpHrBzhPk7MoEh+VuKBPfPCEMB9xRK8HpvvVJ2KrpRvFrGTNh/RaK2vgV4RXWHI4SGj9vzPUvmTIxNcte6YAAAAAASUVORK5CYII=","#d97757",{"id":131,"background":132,"text":83},"P9YYLfLPT1W6GDJ9B-5toA",{"hex":82},{"id":134,"type":71,"space":72},"JfVAOfKdSOOkHysuzAvZMw",{"id":136,"type":75,"eyebrow":10,"title":137,"text":138,"cta":34,"list":139,"stats":140,"theme":141},"DTfWYkihTxqvE3uslgLg-g","\u003Ch2 dir=\"ltr\">\u003Cspan>Do you name tokens differently for an LLM?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>“Interestingly, I didn’t find much of a difference. The key wasn’t naming them differently for an LLM, it was naming them well. Clear, consistent, and scalable token names worked equally well for both AI and human developers.”\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",[],[],{"id":142,"background":143,"text":83},"N6XTXUVyQ9mzkhJFbVo7og",{"hex":82},{"id":145,"type":71,"space":72},"VYXVi4f-Srmu1KNqSLquzA",{"id":147,"type":88,"title":148,"text":149,"media":150,"caption":10,"theme":166,"reverse":68},"YMWg--GjTjGe-77eqIUILQ","\u003Ch2 dir=\"ltr\">\u003Cspan>What does this solve for a design team?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>For Caroline’s team, the biggest win comes with the handoff. Preparing primitives and semantics tokens as a JSON file for developers, the manual work originally described, is the kind of translation the extracted file covers. Beyond the handoff, the team gets a way to test ideas as working components and pages while the design system itself does the briefing.\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“I see AI as amplifying designers rather than replacing them. As the technology evolves, designers will spend less time producing repetitive UI components and more time defining the robust systems, design principles, and experiences that AI can continuously build from.”\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",{"id":151,"_createdAt":152,"alt":153,"title":10,"focalPoint":154,"width":155,"height":97,"thumbnail":156,"small":157,"medium":158,"responsiveImage":159,"video":34},"EAWzOj8gT7aBx3MVXay28Q","2026-08-14T23:52:34+01:00","A generated mobile UI component on a phone: a daily health score dial, a recovery summary, and goal cards, all built from the design system tokens.",{"x":21,"y":21},794,"https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":160,"webpSrcSet":10,"sizes":161,"src":162,"width":155,"height":97,"aspectRatio":163,"alt":153,"title":10,"base64":164,"bgColor":165},"https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 198w,https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 397w,https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 595w,https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&fit=max&h=2880&q=95&w=2880 794w","(max-width: 794px) 100vw, 794px","https://www.datocms-assets.com/157026/1786747950-claude-code-generated-ui-components-design-system.png?auto=format&fit=max&h=2880&q=95&w=2880",0.9043280182232346,"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAZCAIAAAC6gEm5AAAChUlEQVR42nVU23bjIAwUgjRp//9Ht+nZk8Qg7cyA7fRhsUJASKMLQi3/Puz5vP/cv7///PzcH49HZFwu7fZ5+/r8ut5utV0y7LX153N7vfroUUq9XK7X6+3j49YwzCzxaay/NQo+0+9tnJK5b5slxpz+h3Lq52lNOmK1N8S0w2rhsPUrWdLs3aOcOtNwYxg5YcqyW7wcwyfWRFsg+ealAtlZEnJ8WLrXUjFhS3KI7LC/4bhoJmcnSaEWS68YDfMksyCoT8SQpUlUaStucTlqBZq3qtFqa8CgWyN45KO4lR3CNTd4CAmTNm0GIZYySL7k0pdAIgDKKlhwACF9gGmu8qJA2QUBdyCKTCuiaRxeEE7JonyzlZkjPJwUwTetJZ1M8UyBuVJ/WnVeaqzawP27RJmaXYFb3AdnLkjiGLZGldICEGED8yqQchBSDyYkw5ICgTkjkQw8GsqHiqz1ET1i4HgniAhxbUsmZcbYKVRA0agVjgIHaxNNLFA1n8wG6TFgc+vjNWlbEOaj9lHbAFjDcRcRqMcYwuB6AF6pideGZ749NxIfO6sL+e4whTQRAprSH3KYvnmVkd6ZwmSzeABCRAGkiBAXoCBXsDRDjen8IASKkBC+DeYVEFIWCqJJd7B7hRcTAgnrb7kEIf8u3DoGvYiEbRJjQUKTF+0dPlZFqkt9I16BlYlbx2Tki8F2EuMgRK1DXuPJ1KY2sddCqnJ0oyGPwAte3lRgsGDWVB1wTZqPHUW76lIFNwuMZcPqkCcQFRYhcLKXGQUaq12dpqzqdiIsv1aLXGHGmouzRtcRuhY153svZ1+a7hxAlmeTzr3lr06bppZjh7Jo7925N9zfzf1s03PxD+tqb5JVF7FxAAAAAElFTkSuQmCC","#7da2c2",{"id":167,"background":168,"text":83},"XpayAC0oQjeB6w_XGUgpzA",{"hex":82},{"id":170,"type":71,"space":72},"Bbo56Ca8TL2xMxZoPoxb2A",{"id":172,"type":88,"title":173,"text":174,"media":175,"caption":10,"theme":188,"reverse":83},"TS8AGbLjTly77a4dktP3Ng","\u003Ch2 dir=\"ltr\">\u003Cspan>What would make the output production-ready?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>While she found it useful for exploration, Caroline found that the tool she used Claude to build, and its deliverables, would have a hard time being production-ready without a human designer’s pass.\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“For me, production-ready means the output is ready to ship with only minimal adjustments. AI is already capable of generating highly usable results, and some are even production-ready. However, a designer is still needed to review and refine the details, such as alignment, spacing, visual consistency, and ensure the final quality.”\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",{"id":176,"_createdAt":177,"alt":178,"title":10,"focalPoint":179,"width":96,"height":97,"thumbnail":180,"small":181,"medium":182,"responsiveImage":183,"video":34},"fT245LXNSIWvmOa-hv46hA","2026-08-14T23:52:41+01:00","Hands holding a tablet reviewing an AI-generated page of permission prompts, an A/B test panel, and device integrations, the designer review pass the output still needs.",{"x":21,"y":21},"https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":184,"webpSrcSet":10,"sizes":103,"src":185,"width":96,"height":97,"aspectRatio":105,"alt":178,"title":10,"base64":186,"bgColor":187},"https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 164w,https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 329w,https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 493w,https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&fit=max&h=2880&q=95&w=2880 658w","https://www.datocms-assets.com/157026/1786747956-ai-generated-component-designer-review-pass.png?auto=format&fit=max&h=2880&q=95&w=2880","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAIAAACza+nDAAAC8klEQVR42lVUi5LjKAwEJLCdTPbm/v8fb5P4DUK6Bmdqa4kqdpBaz1b4v6d57yDOO3OuqhNxucjZT865iqhW6EPwFIgIT8+wu2A+NJhZ+/6cduv+Ph8ll1J88AEuDF468lJ63911ZEvGfnDw7PjMJzAtODMel3tEhq8/ckHg1H8idhhSthi9I++QvwPGfCAI/ASvwTu1HyR0+OaznKQU8RN21qIhFMBkivugAWLI37SFaZiWNhcp6hQ9YmNDFAQLTcwBSQysVrOOumq8okkteFNgnMGayBH3qn1QpVoDVa8VWfYuf0prA5Cg3kx9K6jDqCtbOHTYtYZ4oKrrEdu8zLNVMbTCKm7aEIDsA+wAhampaBWVYn3ovg+Ga80k0OJWGvhncFYVprWcko9yHlKyqV4j9I0l+YRtLawlq0AIdaLfch7l2M59Obb12HfAPhTr4VjO3SNRChJZIgnaQ1ylHse+Lcs2v5dlwavkgvpDZ2aD5W1xkrKzTP5E9bWAM6XIDtS7nWWeG6wUVNLZ3A6fy2wpYbjRG6GgfCJ7EH9d1tcbn9cFwx6gb4zxEoM6nNfZFcAqwxmSi9HMsDLzPL9fT3zW5X0cB+oA4WOkxBG7w7ItviTMAa08a6mMSeqxH8hwef5eXs91XnI+nCozuZRCSg4RYaK1orXiPQakBGbUY9v212t7/d6fz2NdS8mgM2K5zopgkVF+aGwJPgfrVVc0ZF1lXWRZZFvrvpoINgsmyenoXQqOo9Noyp1/VAWs9iW7fDokhvZgraSAnYnDROEe+WtIQ0o8hhDJD6EJVg7DgXDbGvhqfUqYFYUp8mNM39P0uN/GYeBbZJyBaUAa2C9QGMkgk5aMH7HB3O7v4/DP7fbv1/3X4zGNA0+p4YYY+xPJKphfqHkZmdBY9AGaxzQB9v24f//6msaJx9jMgUnc3KoGFUlEl4BxaDK0t2G4T+PXdHvcbtM0tf+dJj1DEAebzv0fhDuP8I6RwHFqruOQIGlM6X8efBJkj9LiyAAAAABJRU5ErkJggg==","#ae634c",{"id":189,"background":190,"text":83},"d2e4HKcQQx-xQ_Ys00TGqg",{"hex":82},{"id":192,"type":71,"space":72},"HnPzGsV6T3SLPQDxyO5OKw",{"id":194,"type":75,"eyebrow":10,"title":195,"text":196,"cta":34,"list":197,"stats":198,"theme":199},"ZBfSjpV9QW2UAl56EVGjGQ","\u003Ch2 dir=\"ltr\">\u003Cspan>Where is the line between AI and the designer now?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>“I think that line is definitely moving, and it’s moving fast. Today, AI is capable of generating production-ready components, implementing design systems, and assembling pages, as long as it has the right structured foundation. Where designers still add the most value is in shaping the user experience, establishing the visual language, defining the system itself, and deciding what should be documented in the system.”\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",[],[],{"id":200,"background":201,"text":83},"EBPIq5i-TJWv5XTzN2g0AA",{"hex":82},{"id":203,"type":71,"space":72},"WOnWayvtRJaa1jMjDQRYMQ",{"id":205,"type":206,"icon":83,"quote":207,"cite":208,"theme":209},"PBteOth1SvqksJNL2bod7Q","quote_block","AI is great at executing the system, but it doesn’t define the vision behind it.","Caroline Hilman, Design Director, Fantasy",{"id":210,"background":211,"text":83},"IwtoHOksQOKcMNvF4u_Ssg",{"hex":82},{"id":213,"type":71,"space":72},"DnLmyJMKQWuiG97kOFwvkA",{"id":215,"type":88,"title":216,"text":217,"media":218,"caption":10,"theme":233,"reverse":68},"NgmULdMBRW2bdXNr0suQmA","\u003Ch2 dir=\"ltr\">\u003Cspan>So, can the design system write the code?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>Most of it, yes. But it’s certainly not perfect. Caroline shared her takeaway to the team alongside the experiment demo links via Slack:\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“The results still feel like vibe-coded design rather than polished high-quality work that requires designers’ craft. They’re still useful for visual exploration and prototyping, but lack the detail for complex design.”\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“AI was great at generating something that looked right, but it often missed fundamental design details, such as alignment and spacing, that a designer would never miss.”\u003C/span>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>The system Caroline created needed nothing extra to brief the model, and the token handoff her team had always done by hand became an export and a prompt. But the gap that remained was a designer’s review, which is roughly where a design leader would \u003Cem>want\u003C/em> the gap to be.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>",{"id":219,"_createdAt":220,"alt":221,"title":10,"focalPoint":222,"width":155,"height":223,"thumbnail":224,"small":225,"medium":226,"responsiveImage":227,"video":34},"MzHqXa49SCeNCXCOkraz4g","2026-08-14T23:52:49+01:00","A full page assembled by Claude Code from a list of components: permission prompt cards, an A/B test result panel, and a grid of wearable device integrations.",{"x":21,"y":21},1058,"https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":228,"webpSrcSet":10,"sizes":161,"src":229,"width":155,"height":223,"aspectRatio":230,"alt":221,"title":10,"base64":231,"bgColor":232},"https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 198w,https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 397w,https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 595w,https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&fit=max&h=2880&q=95&w=2880 794w","https://www.datocms-assets.com/157026/1786747964-claude-code-full-page-assembly-from-component-list.png?auto=format&fit=max&h=2880&q=95&w=2880",0.7504725897920604,"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAMAAADAi10DAAAA7VBMVEXy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uzy7uxGCmD/AAAAT3RSTlMAAwQGCgsMDQ4PEBESExQWGBsdHyAhIiMkJSYnKCkqKywtLzAxMjM0NTY3ODk6Ozw9Pj9AQUJDREVGR0hJSktMTU5PUFFSU1RWWFlaW11fUvT0ZwAAAMlJREFUeNqlj8GOwyAMRG0wVLtSL1X7/3/ZJGDjHQeaS49rCQRP4/FY6Kvkf6jck2kbnDORnyi9HtJ3BWL2qbo/nkX3NlJO7FMlvz9iApQuRMyML+HC+0TWlK3DPtBU7e/NbD8s0Gps29t0O4wSf7xGa9SPQ2FGKwQZSrUHWl6UM8YTYuLMiVxLJRGHipcq11uhbuwpOk90q7V4UfKzf6okRw2HJ08vTPYoLPZBalgIxXZ59d4dR5EAC8z0GkgV0WjlGtETjWkM4j+7jnY90SLhjQAAAABJRU5ErkJggg==","#017cc3",{"id":234,"background":235,"text":83},"XDrmFQmbSXmJAHppPk-kPA",{"hex":82},{"id":237,"type":71,"space":72},"QgjUQcqLQq6cqHooYQxBRg",{"id":239,"type":240,"title":241,"collapsed":83,"items":242,"theme":307},"I-Diyn0xQueDFVGUk-6GzQ","how_to_block","How to generate UI components from a Figma design system with Claude Code",[243,259,271,283,295],{"id":244,"title":245,"content":246},"Gqr7GLQTQkiSzaS4-EaGCw","Build the foundation before you automate anything.",{"value":247,"blocks":258},{"schema":248,"document":249},"dast",{"type":250,"children":251},"root",[252],{"type":253,"children":254},"paragraph",[255],{"type":256,"value":257},"span","Caroline’s hypothesis held because the design system was already well structured. Clear, consistent token names, defined component variants and states, and documented design intent are what let the AI read the system correctly. Skip this step and you’ll get the vibe-coded output Caroline describes above.",[],{"id":260,"title":261,"content":262},"Vjw8MfdJRM2D1WoqcM7Z2Q","Extract the system to a machine-readable file.",{"value":263,"blocks":270},{"schema":248,"document":264},{"type":250,"children":265},[266],{"type":253,"children":267},[268],{"type":256,"value":269},"Use DesignBridge, a free Figma plugin that scans your file and exports a single DESIGN.md covering your tokens, component anatomy, variants, and states, with a Tailwind config included. This file is what the AI reads as context.",[],{"id":272,"title":273,"content":274},"JHVMq1McSau5REXnsEp8Fw","Name tokens clearly and consistently.",{"value":275,"blocks":282},{"schema":248,"document":276},{"type":250,"children":277},[278],{"type":253,"children":279},[280],{"type":256,"value":281},"Caroline found that the same names that serve a human developer serve the AI equally well, so there’s no separate naming scheme to invent for the model.",[],{"id":284,"title":285,"content":286},"ZIOmYm-vS522153gII9I_Q","Feed the file to Claude Code and generate working components.",{"value":287,"blocks":294},{"schema":248,"document":288},{"type":250,"children":289},[290],{"type":253,"children":291},[292],{"type":256,"value":293},"Upload the DESIGN.md and ask for components with the states and micro-animations you need. To build a page, give it the list of components the page should contain, the way Caroline assembled a full mobile page.",[],{"id":296,"title":297,"content":298},"Lfv6NFwQTjWiByXa9dDt_A","Budget a designer’s review pass.",{"value":299,"blocks":306},{"schema":248,"document":300},{"type":250,"children":301},[302],{"type":253,"children":303},[304],{"type":256,"value":305},"The output may look right, but it can still miss fundamentals like alignment and spacing, so always plan time for a designer to refine details and check visual consistency before anything ships.",[],{"id":308,"background":309,"text":83},"XzaQC0KjRhafaK-8NSor7Q",{"hex":82},{"id":311,"type":71,"space":72},"B_cFpJ36TSO5oMRPFj1viA",{"id":313,"type":314,"media":315,"theme":318},"JQvB3whLRAKsBVW4Saypjw","media_full_block",{"id":48,"_createdAt":49,"alt":50,"title":10,"focalPoint":316,"width":52,"height":53,"thumbnail":54,"small":55,"medium":56,"responsiveImage":317,"video":34},{"x":21,"y":21},{"srcSet":58,"webpSrcSet":10,"sizes":59,"src":60,"width":52,"height":53,"aspectRatio":61,"alt":50,"title":10,"base64":62,"bgColor":63},{"id":319,"background":320,"text":83},"JLLvueESQT29HSr95yyU8g",{"hex":82},{"id":322,"type":71,"space":72},"b65fiDl-S5CzMPjGp6ANpQ",{"id":324,"type":325,"title":10,"aligned":68,"items":326,"theme":387},"WYGe3eiCQnedPUoB9AKPwQ","faq_block",[327,339,351,363,375],{"id":328,"question":329,"answer":330},"ckIrUdV7Qw-AYZV2A4U24w","Can AI generate UI components from a Figma design system?",{"value":331,"blocks":338},{"schema":248,"document":332},{"type":250,"children":333},[334],{"type":253,"children":335},[336],{"type":256,"value":337},"Yes, if the system is well structured. In a Fantasy test, Design Director Caroline Hilman extracted a design system to a machine-readable file and prompted Claude Code with it. The components came back working and responsive, a full page could be assembled from a component list, and the output still needed a designer’s pass before shipping.",[],{"id":340,"question":341,"answer":342},"MJMdkDwURbeQdTxo3mM_Ag","What is DesignBridge?",{"value":343,"blocks":350},{"schema":248,"document":344},{"type":250,"children":345},[346],{"type":253,"children":347},[348],{"type":256,"value":349},"DesignBridge is a free Figma plugin that exports a design system into a structured DESIGN.md file: design tokens (color, typography, spacing, radius, elevation), component anatomy, variants, and states, plus a Tailwind config. AI coding tools like Claude Code read that file as context and generate code from it.",[],{"id":352,"question":353,"answer":354},"LPPjD-LsQq-rXoTzD8kX2g","Why make a design system machine-readable?",{"value":355,"blocks":362},{"schema":248,"document":356},{"type":250,"children":357},[358],{"type":253,"children":359},[360],{"type":256,"value":361},"It removes manual translation work and opens the system to AI tools. Caroline’s starting point was preparing primitives and semantics tokens for developers by hand; extracting the system to a structured file covers that handoff and gives a tool like Claude Code the context to generate working components for exploration and prototyping.",[],{"id":364,"question":365,"answer":366},"aRl9ZGOuTKOUDdWw5oa_-A","Do you name design tokens differently for AI?",{"value":367,"blocks":374},{"schema":248,"document":368},{"type":250,"children":369},[370],{"type":253,"children":371},[372],{"type":256,"value":373},"No. Caroline went in expecting a difference and didn’t find much of one; token names that are clear, consistent, and scalable for a human developer worked for the LLM as written.",[],{"id":376,"question":377,"answer":378},"JQ0EyEHvRxSeRnjMUKIrLA","Are AI-generated design systems production-ready?",{"value":379,"blocks":386},{"schema":248,"document":380},{"type":250,"children":381},[382],{"type":253,"children":383},[384],{"type":256,"value":385},"Some of it, and the rest is close. Production-ready, as Caroline defines it, means ready to ship with only minimal adjustments, and getting there still takes an experienced designer reviewing alignment, spacing, and visual consistency.",[],{"id":388,"background":389,"text":83},"MHleGGXyRlyPtdphvr7nAQ",{"hex":82},{"id":391,"type":71,"space":392},"IKJVcl-8QKmpo4V2EhRilw","large",{"noIndex":68,"title":394,"description":395,"image":396},"Can AI Generate UI Components from a Figma Design System?","How a Fantasy design director turned a Figma design system into machine-readable context and generated working UI components with Claude Code.",{"url":397},"https://www.datocms-assets.com/157026/1786747972-can-ai-generate-ui-components-figma-design-system-link-preview.png",[399,419],{"id":400,"slug":401,"title":402,"date":403,"categories":404,"featuredMedia":406},"bwjiOZBMSk2ZgVaAyZwNgg","the-timeline-that-builds-itself","How We Build: The Timeline That Builds Itself","2026-08-10",[405],{"id":13,"slug":14,"title":15},{"id":407,"_createdAt":408,"alt":409,"title":10,"focalPoint":410,"width":22,"height":23,"thumbnail":411,"small":412,"medium":413,"responsiveImage":414,"video":34},"JdPLmNkOSDSemMt54HOy0Q","2026-08-10T22:22:11+01:00","How We Build: The Timeline That Builds Itself — an AI-assisted video production tool built with Claude Code that outputs a Premiere-ready timeline.",{"x":21,"y":21},"https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":415,"webpSrcSet":10,"sizes":29,"src":416,"width":22,"height":23,"aspectRatio":31,"alt":409,"title":10,"base64":417,"bgColor":418},"https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 300w,https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 600w,https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 900w,https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&fit=max&h=2880&q=95&w=2880 1200w","https://www.datocms-assets.com/157026/1786396926-how-we-build-ai-video-production-tool-claude-code-link-preview.png?auto=format&fit=max&h=2880&q=95&w=2880","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgVDxUNDhgWCxYNDRUNIg0SFx8ZGBYVFhUaHysjHR0oHSEWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIiU7Oy87Ozs7LzUvOzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAACAwABBv/EABoQAAMBAQEBAAAAAAAAAAAAAAABAhEDIQT/xAAXAQADAQAAAAAAAAAAAAAAAAADBAYB/8QAGhEAAQUBAAAAAAAAAAAAAAAAAgABAwQxEv/aAAwDAQACEQMRAD8AwEKlLYUJ2mId0o8YPPveMpb8BuWpqZnLEv64xkA6XV09ZRkdc+dQmFf/2Q==","#670bc1",{"id":420,"slug":421,"title":422,"date":423,"categories":424,"featuredMedia":425},"X7lAf5pcRraUYdM2FaqB6g","the-interface-the-ai-couldnt-design","How We Build: The Interface the AI Couldn't Design","2026-07-07",[],{"id":426,"_createdAt":427,"alt":10,"title":10,"focalPoint":428,"width":52,"height":53,"thumbnail":429,"small":430,"medium":431,"responsiveImage":432,"video":34},"NfAUoPAgTQG5x042FQwttw","2026-07-07T22:50:21+01:00",{"x":21,"y":21},"https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":433,"webpSrcSet":10,"sizes":59,"src":434,"width":52,"height":53,"aspectRatio":61,"alt":10,"title":10,"base64":435,"bgColor":436},"https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 480w,https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 960w,https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 1440w,https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&fit=max&h=2880&q=95&w=2880 1920w","https://www.datocms-assets.com/157026/1783461014-the-interface-ai-couldnt-design-hero.png?auto=format&fit=max&h=2880&q=95&w=2880","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoTCAgLEBILDhgQFRkNDh8QDRENFxUZGBYVFiEmHysjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAOFS8cIh0vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABEAGAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAAABQYDAf/EACAQAAEEAgIDAQAAAAAAAAAAAAABAgMEBTIGEiIxMxH/xAAWAQEBAQAAAAAAAAAAAAAAAAAABAL/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB/muS360K/jVIaxzLJOs6L7K/J2mTxL2YhMyx1lfohQwdY/k1uWsnZqnRbFMyOPxaADK78lJ+XcAA2ZogAAH//2Q==","#4167c5",1786749073822]