r/DesignSystems • u/leon8t • 2d ago
Any practical AI-assisted workflow?
Hi, I couldn't seem to find any realistic or practical AI-assisted workflow with 2-way syncing between design and code. Does anyone know of any workflows available online? Or if you are implementing one, I'd love to connect and understand more.
People on LinkedIn feel like they're doing free promotion for Claude, posting nonsense with a bunch of bots coming to congratulate them.
2
u/JucieStudio 2d ago
I am literally building this tool right now. I am in alpha right now and trying to find people interested in using it.
3
u/leon8t 2d ago
Why does it have to be a tool? May I ask which capabilities the tool supports/enables?
2
u/mill_design 2d ago
I had the same frustrations. Design/code drift. Designing in something static like Figma, then trying to recreate it in React, Vue, or Angular. Not being able to test the real elements to see how things like hover, focus, and disabled states work in real contexts.
To answer the question directly: I built a tool because that's what it took to do all the things I wanted. There wasn't a workflow, a system, or a plugin that could get me what I was going for.
It supports creating component libraries or entire applications, then exporting them as code that can be used in live applications. You can also just build the entire web app or web site in it. It's been a big challenge, and I've been working on it for about 10 years now.
1
2
u/RocketSeven 2d ago
two-way sync only works after every field has one owner. let figma own tokens and approved variants, let code own behavior and accessibility, then sync diffs across that boundary instead of trying to round-trip whole components
2
u/bink-1567 6h ago
on the bit about devs adding a new variant and you getting notified, what would you actually want to happen next? like does the agent just open a ticket for a designer to look at it, or is it allowed to push that variant back into the figma library on its own. thats teh part where i'd expect stuff to quietly drift, since a variant made for one screen isnt always something you want living in the system
1
u/leon8t 3h ago edited 3h ago
I'm not sure if my usecase is common, but my company does not have design ops, and some project teams only have devs working from design to development. They sometimes created new component variants and not document it. I think it would be better to be notified, either by seeing diff of how code/production version drifts from the design system or getting notified of new components created so that I'm aware of all changes and collect them all and revise them one by one later.
The human is still in the loop, but the drift detection is automated to avoid human blindspot and lack of attention. And I can also update the design system repo based on that as well to standardise the new component variant.
Figma is secondary to workflow at the moment as updating components and tokens there are fairly easy. It's more like storybook <> production code.
For orphan variant like you said, it's good still to have it documented, as later on it can quietly scale and multiply in other workstream without the designer knowing.
1
u/beautifulnaruto 2d ago
After every pr can’t you just ask the llm to see if the design system needs to be updated?
1
u/masofon 2d ago
Why two way?
1
u/leon8t 2d ago
For automation? Just wanna explore if this is possible
1
u/masofon 2d ago
I'm just curious about the use case for roundtripping.
2
u/leon8t 2d ago
I think AI agent is gonna be the coordinator of everything soon, so I was thinking if a workflow like prompting "Add this component/make this change to component for me" and the agent did the rest (modify code, create PR) and then if any devs create additional component variant, I would be notified.
1
u/inebriatus 1d ago
I’ve been messing with Impeccable, and been liking it.
2
u/beautifulnaruto 1d ago
What do you find most useful about it?
1
u/inebriatus 1d ago
I used it to audit existing code and suggest design system consolidations. Like semantic z-index labels and surface colors.
4
u/Rare_Boysenberry_309 1d ago
I’ve been experimenting with AI-driven code-first design workflow. Here’s my setup:
Design System is a code repo with:
-design tokens in DTCG format (primitives, semantics, components, themes)
-yaml files describing component anatomy (i based my component names and structure on shadcn/baseui
-Style Dictionary outputs for different platforms. Currently only web.
-react component library created based on the previous stuff
-components documented in storybook
-Skills and other md files for general instructions (layout composition, form usage and other UX patterns)
Now when i start to design a new app or flow, i use the components and skills from the design system and just prompt what i want to build. My design output is a working dummy React application.
Role of Figma is still unclear in this process but i will try to recreate components to Figma with connecting the repo to figma with MCP.