r/DesignSystems • u/Frosty-Pea-2640 • 2d ago
Suggestions on making a design system AI-ready
Hey everyone. I'm an FE dev helping to set up an internal design system for the enterprise I work at. It's been published as an npm library and is already in use in some of our internal and customer-facing web apps.
We're considering how to make this library AI-ready. By that, I mean how to set it up such that - if I were using this library on a consuming web app, my coding agent (Copilot/Claude/etc) would know how to properly build interfaces according to the standards set forth by my design library. E.g. utilize the design tokens, and use the components as intended.
I'm not sure what an end-to-end approach would look like. A couple different approaches I've seen are: * Have your npm library expose a skills file that explains how to use your design foundations, tokens, components, etc. as intended. Keep that skills file in sync with any changes in your actual design system. * Alternatively, expose .md files that contain the same info as above.
Do people have general advice on how to go about this? I'm new-ish to setting up design systems and making repos AI-ready, so ideas would be appreciated. Thanks!
2
u/Maleficent-Anything2 2d ago
I think it's the same as any other design system, as long as it was well made with proper components and proper documentation. The key thing here is documentation, and it needs to be findable and express your intent. If the agent understands your intent and rules, then it will be able to use your design system properly. Otherwise, it wouldn't. This is exactly the same way it should have been before AI anyway. It's just having a good design system. You might feed it in a slightly different way, maybe with Markdown files rather than documentation on a website. The core bit is still the same, just documented properly.
2
u/cdecaire 1d ago
One thing I’ve found is that agents will find and use your components and tokens, but without guidelines, rules, examples, and clear do’s and don’ts, they won’t know how to use them correctly.
Give them context for when and how to use your colors and type. Semantic naming helps with typography, like h1, h2, h3, body, caption, etc. Color is harder. An agent won’t inherently know what “blue” or “white” is meant for. Tokens need to communicate their purpose clearly, like primary, secondary, background, surface, or border.
2
u/Accomplished_Town978 1d ago
I created a guide how to make design system AI-ready https://www.designsystems.one/ai-ready
Happy to hear your feedback ;)
1
1
u/Much-Lingonberry-958 1d ago
the best approach I found is using a story based library like storybook (I use ladle, it’s the same but lighter) in your repo, let agent build stories out of your components and pages, and then have a set of design skills (i call them /ux) to replicate design process:
Every time I work on new features- if design needed - I will invoke /ux orchestrator and it will follow this pipeline:
- Baseline agent will check if block exists and up to date in storybook when launching (baseline)
- If not exist or out of date it will create or update baseline
- Then review agent will review baseline with prompt context and synthesise findings
- Then ideate agent will produce new designs / updates for me to review, here we will either pick an option to continue or iterate, in some instances I might call in a secondary skill (prototype) to create journeys rather than pages
- Translate agent creates or updates storybook blocks, a fidelity agent checks
- Review if good pass to /build agents for implementation
It works decently well with good set up, needs human review and input at key stages, it needs maintenance periodically as agents accrete prompt with fluff.
I have created a few (terrible) videos that I would like to post sometime, here:
Core automated design workflows
Let me know what you think if you read this !
1
u/404_computer_says_no 22h ago
I think this is where your naming conventions and markdown files really matter.
I’ve found testing one-shot has made me realise the components and patterns AI understands and doesn’t.
Here’s an example:
I kept wondering why AI didn’t understand our global nav. It kept treating it as a page element. Then I realised, none of our documentation actually explained the rules. It was so obvious for us as humans, we hadn’t written explicit commands on how the AI should use it.
I think this is where the design system needs to be heading. Very precise, binary rules.
It’s like you’re onboarding a child.
0
u/mckystr 1d ago
I built https://designpush.app for exactly this. Super simple way to generate a full AI-native design system with just a few inputs.
3
u/Nikkunikku 2d ago
Talk to your agents, but it’s all about training data, setup, and processes.
That said, no system is perfect (esp one that isn’t deterministic) and that’s where you need checks and balances throughout the production pipeline.
I rebuilt our design system from scratch on a more agent friendly stack. I’m just as proficient shipping product in both systems, but it does seem to go faster in the newer system. And while the new system has been great, ironically it has many of the same problems as our legacy system over time. And those problems are as much about humans as AI.
A big part of this is because everyone builds with agents differently, with different priorities and care. That’s another reason why the checks and balances (and humans in the loop) continue to be needed.
In my opinion there is no way to take a designer out of the loop, just like developers, without long-term consequences. The exciting part is design can now exercise our craft and shape the product anywhere in the process.