{"id":6844,"date":"2026-10-26T14:45:02","date_gmt":"2026-10-26T14:45:02","guid":{"rendered":"https:\/\/www.kindgeek.com\/blog\/?p=6844"},"modified":"2026-10-26T14:45:06","modified_gmt":"2026-10-26T14:45:06","slug":"ai-design-system-automation","status":"publish","type":"post","link":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation","title":{"rendered":"From 50% to 10%: How AI Design System Automation Cut Our Design System Work by 90%"},"content":{"rendered":"\n<p><em>A fintech design team\u2019s journey from manual Material Design customisation to AI design system automation. AI design tokens, bulk component editing, daily sync routines, and the 10% of work that still requires a human designer.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes has-small-font-size\"><table class=\"has-black-color has-text-color has-background has-link-color has-fixed-layout\" style=\"background-color:#00cfcf\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Before<\/th><th class=\"has-text-align-center\" data-align=\"center\">After<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">~50% of designer time<\/td><td class=\"has-text-align-center\" data-align=\"center\">~10% of designer time<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Manual token management<\/td><td class=\"has-text-align-center\" data-align=\"center\">AI-automated token sync<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">One-by-one component edits<\/td><td class=\"has-text-align-center\" data-align=\"center\">Bulk edits via single prompt<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Spreadsheets for documentation<\/td><td class=\"has-text-align-center\" data-align=\"center\">Self-updating documentation<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Ask our design lead, Olha Sliusar, how much of her week the design system takes and her answer is about half, on any project that maintains it properly. That isn\u2019t designing. It\u2019s renaming tokens, editing component variants, keeping the documentation current, and checking that the three people adding variables follow the same naming rules. On the project behind this article, she now hands most of that to Claude.<\/p>\n\n\n\n<p>This article is a practitioner\u2019s account of how our design team on an energy-sector client project brought that 50% down to 10% using AI for design systems: <a href=\"http:\/\/kindgeek.com\/ai-transformation-services\" target=\"_blank\" rel=\"noreferrer noopener\">AI-native workflows<\/a> that handle token management, bulk component editing, and automated documentation. Not as a concept or a prototype \u2014 as a production design system automation workflow that\u2019s been running for months.<\/p>\n\n\n\n<div id=\"tal-toc-block\" style=\"max-width: 480px;margin: 0 0 32px 0\">\n  <div class=\"taltoc-header\" style=\"font-weight: 700;font-size: 18px;margin: 0 0 16px 0\">Content:<\/div>\n  <ul class=\"taltoc-list\" style=\"margin: 0;padding: 0\">\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-1\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">01<\/span>The Invisible Tax on Design Teams\n      <\/a>\n    <\/li>\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-2\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">02<\/span>What Changed: AI Design System Automation Takes Over the Mechanical Work\n      <\/a>\n    <\/li>\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-3\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">03<\/span>AI Design Tokens: Extracting Naming Rules from Practice\n      <\/a>\n    <\/li>\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-4\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">04<\/span>The Daily Variable Sync Routine\n      <\/a>\n    <\/li>\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-5\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">05<\/span>Replacing ZeroHeight \u2014 Documentation That Writes Itself\n      <\/a>\n    <\/li>\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-6\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">06<\/span>The Numbers Behind AI Design System Automation\n      <\/a>\n    <\/li>\n    <li class=\"taltoc-item\" style=\"margin: 0;padding: 0;border-bottom: 1px solid #eeeeee\">\n      <a class=\"taltoc-link\" href=\"#section-7\" style=\"display: flex;gap: 20px;align-items: baseline;padding: 16px 0;text-decoration: none;color: inherit\">\n        <span class=\"taltoc-num\" style=\"color: #3cc8c2;font-weight: 600;font-size: 20px;min-width: 28px;flex-shrink: 0\">07<\/span>The 10% That Stays Human in Design System Automation\n      <\/a>\n    <\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Invisible Tax on Design Teams<\/h2>\n\n\n\n<p>Our design system was never finished. We had to name every variable or variant by our rules, check it against the accessibility standard we agreed with the client, and write it into the documentation. Done by hand, that list never got shorter.<\/p>\n\n\n\n<p>On our energy-sector client project, we started with the Material Design 3 community library as our foundation. The standard approach: download the library, customise variables to match the client\u2019s brand, build out component variants for the product\u2019s needs.<\/p>\n\n\n\n<p>The brand began as a handful of new colours and variables. In Material 3, that reaches into hundreds of component variants, each with its own states to fix and test one at a time.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p><em>\u201cDesign system maintenance used to take about 50% of your time on projects that properly maintain it. I can\u2019t imagine going back to doing it manually.\u201d<\/em><\/p><cite>Olha Sliusar, UI\/UX Designer at Kindgeek<\/cite><\/blockquote><\/figure>\n\n\n\n<p>That 50% figure isn\u2019t hyperbole. Here\u2019s what it looked like on our project. Three of us kept adding variables to the same file: our design lead, a colleague and a developer. Every new token needed a name that followed our rules and a line in the documentation table, and somebody had to spot the ones that slipped through. That checking fell to our design lead, on top of the component work. AI design system automation took it off her plate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Changed: AI Design System Automation Takes Over the Mechanical Work<\/h2>\n\n\n\n<p>The shift didn\u2019t happen all at once. It started with a specific, painful task: customising the Material Design 3 library\u2019s button component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">666 Buttons, One Prompt<\/h3>\n\n\n\n<p>Material Design 3 ships with 666 button variants, because types, states, sizes and icon positions multiply. Restyling them for the client\u2019s brand by hand means opening every one.<\/p>\n\n\n\n<p>So we restyled a single variant to match the brand and told Claude: <em>apply the same treatment to the other 665.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p><em>\u201cYou make a change to one button variant, and then say: do the same for the other 665. You can edit massive volumes and make massive changes to the design system with a single prompt.\u201d<\/em><\/p><cite>Olha Sliusar, UI\/UX Designer at Kindgeek<\/cite><\/blockquote><\/figure>\n\n\n\n<p>The entire button library (all 666 variants) was re-branded in a single prompt cycle. What would have been days of careful, repetitive component editing became a matter of minutes. This is what AI for Figma design systems looks like in practice: not a plugin that suggests colours, but a workflow that edits the system itself. And the pattern extended to every component category in the library: inputs, cards, dialogues, navigation elements, chips, badges.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-1024x538.png\" alt=\"Four-step AI design system automation workflow: design one button variant, prompt Claude to apply it to the other 665, run in stages, check and fix.\" class=\"wp-image-6845\" srcset=\"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-1024x538.png 1024w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-300x158.png 300w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-768x403.png 768w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-1536x806.png 1536w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-2048x1075.png 2048w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_1_one-variant-666-buttons-360x189.png 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That\u2019s the whole recipe for AI design system automation, and you can repeat it. Design one variant by hand, the way the brand should look. Then ask Claude to apply the same changes to the rest, in stages: a full design system is too big to load at once, so we wrote a temporary skill for each task and ran it across every component. Finally, check how it landed and fix what\u2019s off yourself. That\u2019s the 10% that stays manual. Claude does the other 90%.<\/p>\n\n\n\n<p>Components took one example. Tokens needed rules.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">AI Design Tokens: Extracting Naming Rules from Practice<\/h2>\n\n\n\n<p>One of the subtler problems in design system work is token naming. The names you give your design tokens determine how well the system scales and how easily developers can implement it. Bad naming means constant confusion. Good naming means designers and developers speak the same language.<\/p>\n\n\n\n<p>Our approach to AI <a href=\"http:\/\/kindgeek.com\/blog\/fintech-design-system\" target=\"_blank\" rel=\"noreferrer noopener\">design tokens<\/a> was unconventional. Instead of writing naming rules from scratch and then trying to enforce them, we did it in reverse:<\/p>\n\n\n\n<p>Design Token Naming Workflow<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Name tokens organically \u2014 Designer and developer agree on token names during real work, building a practical naming vocabulary through actual use<\/li>\n\n\n\n<li>AI extracts the rules \u2014 Feed all existing tokens to Claude and ask: \u201cIdentify the naming rules you see in these tokens.\u201d AI identifies patterns you followed intuitively<\/li>\n\n\n\n<li>Review and refine \u2014 Designer validates the extracted rules \u2014 confirm what\u2019s intentional, correct what\u2019s accidental, add missing nuances<\/li>\n\n\n\n<li>Encode into a reusable skill \u2014 The validated rules become an AI skill \u2014 a permanent instruction set that enforces naming conventions on all future tokens<\/li>\n<\/ol>\n\n\n\n<p>The rules Claude pulled out were semantic: a token\u2019s name says what the token does, not what it looks like. <a href=\"https:\/\/m3.material.io\/foundations\/design-tokens\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Material 3<\/a> follows the same principle, with names like primary and on-primary instead of a colour name or a hex value, so a developer can find the right token by its purpose. We turned the rules into a skill with two jobs. It audits existing tokens against the convention, and when someone describes what a new token should do, it proposes the name.<\/p>\n\n\n\n<p>The skill needs upkeep too: new cases keep turning up, so we update it as the system grows. That\u2019s where AI design tokens earn their place in production. They hold a convention we had agreed on out loud and never written down.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Daily Variable Sync Routine<\/h2>\n\n\n\n<p>On a normal day, someone adds a <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15145852043927-Guide-to-variables-in-Figma\" target=\"_blank\" rel=\"noreferrer noopener\">variable in Figma<\/a> and gets back to work. The table that lists every token and what it\u2019s for stays exactly as it was. Then 6 PM comes, and the Design System Variable Sync runs on its own. It\u2019s the part of our design system automation nobody has to remember to do.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p><em>\u201cClaude maintains the documentation table. We have all our tokens with descriptions, and a routine runs in Claude Code. Once a day at 6 PM, it checks the variables against the table, and if there\u2019s anything new, it adds it with a date and highlights it in orange.\u201d<\/em><\/p><cite>Olha Sliusar, UI\/UX Designer at Kindgeek<\/cite><\/blockquote><\/figure>\n\n\n\n<p>This replaced a manual process that nobody ever did consistently. In theory, whoever added a new design token was supposed to update the documentation. In practice, the documentation was always weeks behind the actual system. New team members had no way to discover recently added tokens, developers didn\u2019t know which tokens were stable and which were experimental, and nobody could answer the question \u201cwhen was this token added and why?\u201d<\/p>\n\n\n\n<p>The automated sync solves all three problems. Documentation is always current \u2014 within 24 hours of any change. New tokens are visually flagged. Every token has a timestamp. And the designer\u2019s involvement is zero: they just add variables to Figma as part of their normal work, and the system documents itself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How the Design System Variable Sync works<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-1024x538.png\" alt=\"Daily 6 PM design system variable sync: a Claude Code routine compares Figma variables with the documentation table, then either reports nothing new or adds and highlights new entries.\" class=\"wp-image-6846\" srcset=\"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-1024x538.png 1024w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-300x158.png 300w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-768x403.png 768w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-1536x806.png 1536w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-2048x1075.png 2048w, https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/kindgeek_infographic_2_6pm-variable-sync-360x189.png 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Every day at 6 PM, a routine in Claude Code goes through the documentation table and the variables that are really in Figma, and compares the two.<\/li>\n\n\n\n<li>If nothing new was added, it just sends our design lead a message that there\u2019s nothing new today.<\/li>\n\n\n\n<li>If Figma has more variables than the table, it works out which ones are new and adds them to the table.<\/li>\n\n\n\n<li>Each new token gets a description and today\u2019s date, and the date is highlighted in orange, so we see right away what was added today.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Replacing ZeroHeight \u2014 Documentation That Writes Itself<\/h2>\n\n\n\n<p>The daily sync routine had an unintended consequence: it made our dedicated design documentation tool unnecessary.<\/p>\n\n\n\n<p>Previously, the team had used ZeroHeight for design system documentation \u2014 a common choice for design teams that want a polished, always-current reference for developers. But ZeroHeight requires manual content creation and maintenance. Someone has to write the usage guidelines, update the token tables, add new component documentation, and keep everything consistent with the actual Figma library.<\/p>\n\n\n\n<p>With the AI-generated documentation table, which is automatically updated, dated, and described, we found that the documentation table itself <em>was<\/em> the documentation. It had everything a developer needed: token names, semantic descriptions, dates added, and visual highlights for recent changes. All generated and maintained without a single minute of designer time.<\/p>\n\n\n\n<p>None of this makes documentation tools like ZeroHeight useless. But any tool that waits for a person to write things down will fall behind the system, because writing it down is the step people skip. In our AI design system, the routine that notices a new token also documents it. For tokens, that does the job we once tried to do in ZeroHeight.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Numbers Behind AI Design System Automation<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Metric<\/th><th>Value<\/th><\/tr><\/thead><tbody><tr><td>Design system work \u00b7 automated<\/td><td>90%<\/td><\/tr><tr><td>Button variants \u00b7 rebranded at once<\/td><td>666<\/td><\/tr><tr><td>Automated \u00b7 token sync<\/td><td>1\/day<\/td><\/tr><tr><td>Manual documentation \u00b7 time<\/td><td>0 hrs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex\">\n<ul class=\"wp-block-list\">\n<li>Claude does about 90% of the design system work. The rest is ours: checking the result and fixing what\u2019s off.<\/li>\n\n\n\n<li>Restyling 666 buttons took one finished example and one prompt, not 666 edits.<\/li>\n\n\n\n<li>The documentation table is never behind, because a routine checks it against Figma every day at 6 PM.<\/li>\n\n\n\n<li>Naming rules enforce themselves: a skill built from our own tokens checks every new name against them.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The 10% That Stays Human in Design System Automation<\/h2>\n\n\n\n<p>AI automation in design removes the mechanical work that was preventing the designer from doing the creative work they were hired for. What stays manual is mostly checking: Claude drafts the tokens and components from existing screens, they go onto a clean Material 3 file, and our design lead looks at how everything mapped and fixes what\u2019s off by hand.<\/p>\n\n\n\n<p>The rest of it is looking after the automation itself. The token naming skill needs an update whenever a new case turns up. The accessibility audit agent still checks very little, because nobody has had time to sit down and decide what it should cover. She wrote our usability testing instructions over several evenings. New tools and commands appear every week, and someone has to try them.<\/p>\n\n\n\n<p>That\u2019s what AI design system automation costs, and she says it plainly: the people who go first spend the most time. With a lighter load, she would experiment more. The 90% now runs itself. Building the next piece still takes someone\u2019s evenings.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A fintech design team\u2019s journey from manual Material Design customisation to AI design system automation. AI design tokens, bulk component editing, daily&#8230;<\/p>\n","protected":false},"author":24,"featured_media":6847,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[328,47],"tags":[],"class_list":{"0":"post-6844","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ai-2","8":"category-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AI Design System Automation: Cut Upkeep from 50% to 10%<\/title>\n<meta name=\"description\" content=\"Learn how AI design system automation cut our design system work from 50% to 10%: 666 buttons restyled with one prompt, tokens documented.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AI Design System Automation: Cut Upkeep from 50% to 10%\" \/>\n<meta property=\"og:description\" content=\"Learn how AI design system automation cut our design system work from 50% to 10%: 666 buttons restyled with one prompt, tokens documented.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation\" \/>\n<meta property=\"og:site_name\" content=\"Kindgeek\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-26T14:45:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-26T14:45:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/from-90-to-10.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kateryna Shykula\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kateryna Shykula\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AI Design System Automation: Cut Upkeep from 50% to 10%","description":"Learn how AI design system automation cut our design system work from 50% to 10%: 666 buttons restyled with one prompt, tokens documented.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation","og_locale":"en_US","og_type":"article","og_title":"AI Design System Automation: Cut Upkeep from 50% to 10%","og_description":"Learn how AI design system automation cut our design system work from 50% to 10%: 666 buttons restyled with one prompt, tokens documented.","og_url":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation","og_site_name":"Kindgeek","article_published_time":"2026-10-26T14:45:02+00:00","article_modified_time":"2026-10-26T14:45:06+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/from-90-to-10.png","type":"image\/png"}],"author":"Kateryna Shykula","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kateryna Shykula","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#article","isPartOf":{"@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation"},"author":{"name":"Kateryna Shykula","@id":"https:\/\/www.kindgeek.com\/blog\/#\/schema\/person\/ca19cd7da9cbba3d1174d3291891c4cc"},"headline":"From 50% to 10%: How AI Design System Automation Cut Our Design System Work by 90%","datePublished":"2026-10-26T14:45:02+00:00","dateModified":"2026-10-26T14:45:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation"},"wordCount":1881,"publisher":{"@id":"https:\/\/www.kindgeek.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#primaryimage"},"thumbnailUrl":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/from-90-to-10.png","articleSection":["AI","Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation","url":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation","name":"AI Design System Automation: Cut Upkeep from 50% to 10%","isPartOf":{"@id":"https:\/\/www.kindgeek.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#primaryimage"},"image":{"@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#primaryimage"},"thumbnailUrl":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/from-90-to-10.png","datePublished":"2026-10-26T14:45:02+00:00","dateModified":"2026-10-26T14:45:06+00:00","description":"Learn how AI design system automation cut our design system work from 50% to 10%: 666 buttons restyled with one prompt, tokens documented.","breadcrumb":{"@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#primaryimage","url":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/from-90-to-10.png","contentUrl":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/from-90-to-10.png","width":1200,"height":630,"caption":"AI design system automation: button variants and design tokens updated across a Figma component library"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindgeek.com\/blog\/ai-design-system-automation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindgeek.com\/blog"},{"@type":"ListItem","position":2,"name":"From 50% to 10%: How AI Design System Automation Cut Our Design System Work by 90%"}]},{"@type":"WebSite","@id":"https:\/\/www.kindgeek.com\/blog\/#website","url":"https:\/\/www.kindgeek.com\/blog\/","name":"Kindgeek","description":"Blog | Kindgeek","publisher":{"@id":"https:\/\/www.kindgeek.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindgeek.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.kindgeek.com\/blog\/#organization","name":"Kindgeek","url":"https:\/\/www.kindgeek.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindgeek.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/02\/kg-logo-updated.png","contentUrl":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/02\/kg-logo-updated.png","width":300,"height":60,"caption":"Kindgeek"},"image":{"@id":"https:\/\/www.kindgeek.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.kindgeek.com\/blog\/#\/schema\/person\/ca19cd7da9cbba3d1174d3291891c4cc","name":"Kateryna Shykula","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindgeek.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/make-a-portrait-variations-from-differen_k-h8QYBiRAOUpRUJ8e5R3Q_NaReDJUDS2GbFznSvXbaIg-150x150.jpg","contentUrl":"https:\/\/www.kindgeek.com\/blog\/wp-content\/uploads\/2026\/10\/make-a-portrait-variations-from-differen_k-h8QYBiRAOUpRUJ8e5R3Q_NaReDJUDS2GbFznSvXbaIg-150x150.jpg","caption":"Kateryna Shykula"},"description":"Content Producer at Kindgeek","sameAs":["https:\/\/www.linkedin.com\/in\/shykulacath\/"],"url":"https:\/\/www.kindgeek.com\/blog\/author\/kateryna-shykula"}]}},"_links":{"self":[{"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=6844"}],"version-history":[{"count":2,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6844\/revisions"}],"predecessor-version":[{"id":6849,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6844\/revisions\/6849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/media\/6847"}],"wp:attachment":[{"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=6844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=6844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=6844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}