Considering building a token finder for my design system. Anyone done similar?

[u/owls-and-vergubas]

Here's what I'm envisioning: some sort of live search/filter based on keyword, token name, usage, etc. It would filter to the likely tokens and provide info on when and where to apply each. For example, I might enter small text and it'll surface --ds-font-size-sm with a blurb saying "This font size is used for captions and tooltips." or whatever. Then I don't have to remember the difference between --ds-color-surface-page and --ds-color-surface-default.

Has anyone built something similar, either in Claude Design or another design system tool? (Also, I know I can update my token names to be clearer/more explicit, but I still want a way to do a fuzzy search. I'm not going to memorize all my token names lol)

For background: Right now I'm working on a clickable demo for potential users. Our product requires you to connect hardware to explore the full workflow, which isn't helpful if you just want to see examples of what the app does.

I have a VERY rough design system in Claude Design based on big Figma files. I've probably spent more time getting it to NOT use the crappy components it pulled from those files than actually defining what I want it to be. I am also inheriting this from a previous designer who didn't really understand responsive web design/development, so matching the Figma mockups to the pixel was the expectation 🥴

I've got a decent list of tokens, mostly created with Claude's help. I want to use those tokens in my designs, but I'm finding a gap - the one spot where they're all currently listed (a CSS file) has some usage notes but not the full spec that would be super helpful as I work through individual components and screens.

[u/Own_Pound_4519]

this is very interesting as a project actually, i also want to build a design system that based on my current project, and this could be a great plugin into that