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!