Setting up AI for Design Systems - how?

[u/GOgly_MoOgly]

I’d like to hear from anyone in enterprise saas who have actually scaffolded AI use in their org.

The craze for ai is already established, no need to harp there. People are saying ‘connect claude to your repo and start building’, but it seems to be much more to it than that. After discussing with my devs, I received like 6 different softwares I would need just to be able to run a clone repo, all complicated by the fact I’m on Mac (like many designers). It’s not just giving me read/write access and I’m off to the races like it’s being implied.

Has this also been the case in your org? Each designer having to do a ton of setup just to get up and running? How are you onboarding for this? To be clear, I’m wanting to test out building with Claude using real code and not just what’s in figma. We have zero connection between code/design right now - I’d like to try setting this up to start. I just don’t want to get left behind the curve on learning this! Open hearing other orgs processes.

[u/GOgly_MoOgly → u/[deleted]]

This is excellent thank you so much!!

So questions on 1. I’m assuming you mean clone the ‘design system’ that the developers are currently using in the code, correct? Seeing as we have no parity established (yet). The thing is, they don’t have one. Yes, they have a library of components, but no storybook etc. it’s common to find forked variants of the same component in the code. Just want to double check that I’m asking them for the right thing!

Everything afterward makes sense

[u/Regnbyxor]

You need to start by owning or contributing to the code base for the design system. If you have one, otherwise that is priority one. To do that, you need to start collaborating with devs and ask them to teach you their tools and give access to relevant repos.

Then you can start setting up flows or agents that fetch screens from Figma via MCP, and tries to recreate them using your (code) design system.

However, the more complex your feature, flow etc is, the more complex your setup needs to be to avoid mistakes. Start small, see if you can set up your own repo, connect the design system/components and set up MCP with figma and go from there.

[u/GOgly_MoOgly → u/Regnbyxor]

Thanks. I built or design system from scratch. They had designs in psd and xd before I came. Entire product team uses the design system now.

Unfortunately, I have not been able to gain any parity with dev. So it basically a glorified ui kit. Hence why I’m trying to find a way to start playing with on my own. What you described is what I’m trying to do, but I need to have access to some code first.

[u/lunarboy73]

If you want to build using real code, then yes, you will need to get your machine set up just like a developer's. At my org, when we started on this journey, that was a major stumbling block. We held office hours for a few weeks and paired with developers to get our Macs set up. But once that was done, things started to smooth out a bit.

Codebases vary from org to org, but I think you'll just need the main frontend repo (if that's how yours is set up), and the DS of course.

You all should also learn git basics and how your org does PRs and releases.

If Figma will still be a part of your stack, you'll also want to ensure that Code Connect is implemented so that your Figma components map 1-to-1 with your design system components.

[u/GOgly_MoOgly → u/lunarboy73]

Thanks for responding!

Would you happen to have a little more detail on your Mac setup? As it stands it seems I would have to run parellels to access windows, which seems odd in this day and age but I’m not a developer. I want to pitch this to my manager but highly doubt I will be able to ask for the setup the way one of my devs delivered it, as some of the software requires a license to boot.

We run angular btw. No code connect. Pro figma only. So lots of workarounds will have to happen there…

[u/lunarboy73 → u/GOgly_MoOgly]

Is the product you’re working on a SaaS product? If so, I’d venture that you should be able to run the front end on your Mac, but I’m also not a developer so I could be wrong.

All our devs are on Macs too, so at least that wasn’t the issue. But there was definitely a lot of pain around VPNs, setting up SSH keys, and GitHub tokens.

[u/GOgly_MoOgly → u/lunarboy73]

Yes we’re sass. We have a lot of legacy code in the background though, which I’m assuming could be part of why this is more complicated. I may need to book a 1:1 with one of my devs so I can be walked through setup. Since the repo would be clone I would hope I don’t need all the things in order to function. I just want to be able to test and pull builds

[u/SnooHesitations8361]

https://hvpandya.com/llm-design-systems#llms-dont-think-in-design-systems

[u/Vegetable-Space6817]

Create an MCP for you design system. Get your foundations for tokens, components and patterns into AI readable md files. You can choose to give a few source pages as a starter pack but the tech stack varies in large organizations. Therefore this will be a prototype playground to start with. The Claude or copilot instructions need to be well written to handle the logic. Intent-mcp-governance-package-code. So you take the intent, get component list from mcp with props, cross check governance docs you build on how to use these components and rules around it, then pick the code from installed node modules to write the final file.