<h1 style="font-size: 22px; font-weight: normal;">What to Automate and What to Own : The Big Question: What Should Be Automated—and What Shouldn’t?</h1>There was a time when having 80 meticulously crafted UI components was a badge of honor.Design systems like Material Design, Carbon, and Polaris were treated as products in their own right—pillars of consistency and scalability.But in 2025, design teams are beginning to ask different questions:<blockquote style="border-left: 5px solid rgb(248, 100, 102); background: white; font-size: 14px; padding: 5px 10px !important; margin: 10px 0px !important;">“Is our system too heavy?” “Do I really need to submit a PR just to update a button?” “Why is changing a card variant harder than designing a new one from scratch?”</blockquote>Enter the rise of Generative UI—where a single prompt can create entire screens, and UI adapts to user behavior automatically, guided by AI.<h2 style="font-size: 22px; font-weight: normal;">When Design Systems Get Too Mature (and Too Much)</h2>Design systems offer undeniable value:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">- Reusability boosts dev efficiency</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Consistency builds user trust</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Shared libraries streamline collaboration</li></ul>But over time, they tend to bloat:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">- Obsolete components pile up</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- One-off cases lead to endless exceptions</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- New designers spend days just onboarding to the system</li></ul>Eventually, you find yourself managing the system more than designing with it.That’s when the value starts to decay.<h2 style="font-size: 22px; font-weight: normal;">Generative UI Is Asking a New Kind of Question</h2>Generative UI doesn’t just help you use components—it generates them.Example Workflow:You describe a feature. AI instantly produces cards, buttons, modals—styled, structured, and even responsive.Tools leading this shift:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">- Galileo AI: Generate full UI screens via prompt</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Locofy / Anima: Turn Figma designs into production-ready code</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Figma AI: Auto-suggest layouts, components, and hierarchy</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Vercel AI SDK: Adjusts UI based on real-time user behavior</li></ul>In this model, designers move from creators to curators—or more precisely, prompt directors. <img src="https://letspl.s3.ap-northeast-2.amazonaws.com/images_temp/1/preview-1753319668618.png" width="90%" draggable="true" style="max-width: 100%; width: 100%; height: auto; cursor: pointer;"><h2 style="font-size: 22px; font-weight: normal;">Design Systems vs. Generative UI: A Side-by-Side</h2><table style="width: 100%; border-collapse: collapse; min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><th colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Category</th><th colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Design System</th><th colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Generative UI</th></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Goal</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Consistency, reusability</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Flexibility, speed</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">User focus</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Organization-led</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Context- and user-led</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Maintenance</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Ongoing, deliberate</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Regenerative, prompt-based</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Speed curve</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Slow start → fast later</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Fast start → unclear at scale</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Designer’s role</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">System architect</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Selector, editor</td></tr></tbody></table>Design systems are based on predefined rules. Generative UI is based on real-time context.One thrives on sustainability. The other on adaptability.<h2 style="font-size: 22px; font-weight: normal;">So… What Should Designers Automate?</h2>Here’s a helpful split:✅ Great for Automation:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">Repetitive layouts (cards, banners, modals)</li><li style="list-style: inside none; padding: 0px; margin: 0px;">Predictable flows (onboarding → login → home)</li><li style="list-style: inside none; padding: 0px; margin: 0px;">Low-stakes elements (icons, placeholder text)</li></ul>❌ Needs Human Touch:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">Interactions involving emotion or delight</li><li style="list-style: inside none; padding: 0px; margin: 0px;">Brand tone, color identity, visual storytelling</li><li style="list-style: inside none; padding: 0px; margin: 0px;">Any element tied to the core product value</li></ul>Let AI structure the space—then you add the meaning.<h2 style="font-size: 22px; font-weight: normal;">The Future: Hybrid Design Systems</h2>Design systems aren’t going away. But they are getting smaller and smarter.A likely future setup:<ol style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;"></li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Lean Component Library: Just the essentials—buttons, inputs, cards. Everything else is generated.</li><li style="list-style: inside none; padding: 0px; margin: 0px;"></li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Style Tokens in Figma: Color, type, spacing = managed through variables.</li><li style="list-style: inside none; padding: 0px; margin: 0px;"></li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Prompt-Centered Workflows: Designers create prompts, not pixel maps.</li><li style="list-style: inside none; padding: 0px; margin: 0px;"></li><li style="list-style: inside none; padding: 0px; margin: 0px;">- AI-first Drafting, Human QA: AI produces the first version. Designers layer in brand, accessibility, tone.</li></ol><h2 style="font-size: 22px; font-weight: normal;">Real Example: From System-Heavy to Generative-First</h2>Before:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">80+ components across Figma + Storybook</li><li style="list-style: inside none; padding: 0px; margin: 0px;">Design-dev handoff bloated and slow</li><li style="list-style: inside none; padding: 0px; margin: 0px;">1 designer + 2 devs spent more time maintaining than building</li><li style="list-style: inside none; padding: 0px; margin: 0px;"></li></ul>After:<table style="width: 100%; border-collapse: collapse; min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><th colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Step</th><th colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Action</th><th colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Tool</th></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">1</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Identify 15 most-used core components</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Figma</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">2</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Turn colors, fonts, spacing into tokens</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Figma Tokens Plugin</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">3</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Generate UI with AI tools</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Galileo AI, Magician</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">4</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Designer reviews &amp; adapts AI drafts</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">ChatGPT, Figma</td></tr><tr style="background-color: rgb(255, 255, 255); height: 40px; border-bottom: 1px solid rgb(249, 249, 249);"><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">5</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Only sync essential components to dev</td><td colspan="1" rowspan="1" style="border: 1px solid rgb(204, 204, 204); padding: 8px;">Storybook (minimal setup)</td></tr></tbody></table>Result: A more nimble system that prioritizes speed without sacrificing brand or UX quality.<h2 style="font-size: 22px; font-weight: normal;">Final Thoughts: Systems Aren’t Dead—They’re Changing Shape</h2>Generative UI isn’t killing the design system. It’s revealing what systems were always meant to be: A foundation—not a fortress.Tomorrow’s design systems won’t be hundreds of components and a 100-page PDF.They’ll be:<ul style="list-style: inside none; padding: 0px; margin: 0px;"><li style="list-style: inside none; padding: 0px; margin: 0px;">- Prompt-pattern libraries</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Meta-rules for AI UI generation</li><li style="list-style: inside none; padding: 0px; margin: 0px;">- Context-aware, user-driven layouts</li></ul>We’re moving from defining the design to directing the experience.As long as designers stay in the loop—not just to decorate, but to decide—we’ll be just fine.

Design Systems vs. Gen UI

#Design #System #GenUI #AI #Automation #UX #DesignOps #Prompt #Standard

My idea works in the market?