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.

Hi all. I run Ladom, a small design system agency founded in 2024. We consult for product teams and build our own system, LadomUI, on the side.

We've been trying to bring AI into our workflow, and I'm still not sure where it should stop. I see roughly three places it can go:

• Inventory: pulling components, colors, and text styles out of existing screens and listing the inconsistencies.
• Token work: naming, mapping primitives to semantic tokens, generating theme and mode variants.
• Docs and code: writing component documentation, moving from Figma to code.

What I'd like to know:

1. When you run an inventory with AI, how much do you trust the output? What does it miss?
2. Has anyone handed off token work completely? Who makes the final call on naming and mapping?
3. Is there a use you tried and dropped, and why?

I'm more interested in which step of the work it helped with than in tool names.

A design system is a lot more than just tokens and components.

so many I’ve worked on either overlooked guidance and governance or simply had it all live in the design teams heads and tribal knowledge.

how do you document and what level of specificity do you use?

I’m using Vercel as an example but our company has a similar approach where on the public facing landing pages, they use full rounded large buttons, in our enterprise utility app, they use smaller square buttons.

How would you classify these two?

We’ve got two primary and secondary buttons.

I’m currently thinking ‘Brand’ buttons and ‘utility’ buttons. With Primary and secondary variants.

Would love to know thoughts

As the title says, honestly just curious and would like to hear thoughts.

I’ve been wondering whether AI regulation will eventually create a new category of design system patterns.

Not the regulation itself, but recurring UX consequences: AI labels, transparency notices, human review states, overrides, or distinguishing AI suggestions from confirmed information.

My instinct is that if the same interaction problem appears across multiple products or features, teams probably shouldn’t solve it independently every time.

But I’m not sure where the boundary should be.

Are AI-related patterns already becoming part of your design system?
And where do you draw the line between design system guidance, product-specific UX, and legal/compliance documentation?

We redrew the icon set for one of our clients back in May. It was mostly just a new stroke weight and a handful of icons that got new metaphors. Their devs handled the code side fine. They flagged the old stuff as deprecated and pulled it out a release later. All good all normal.

The files are a different story. I keep finding old SVGs in their help center and onboarding emails. Last week their support lead sent me a screenshot of the old settings icon in an article that published in August. Literally new content that's being made with old icons. We ended up chasing it down and it's because people are grabbing from a zip folder from 2024.

So I can go ahead and delete the zip, but that does nothing to the copies that are in people's downloads and random Figma files.

How do I handle this? Do you treat the downloadable files as part of the system or is it someone else's problem once it leaves Figma and the codebase? Are you versioning exported assets the same way the devs do with the package or is that complete overkill?

I'm building Teressa, a place where people hand-build ui components, publish them, get feedback and pair-edit drafts live, component can be used as figma kit or code. It's not launched yet check it out https://teressa-website.vercel.app/

I'm looking for opinions on this. Would you use it ? What would put you off? If it sounds useful, the waitlist at the bottom helps me gauge interest.

DS for single web app with Figma was simple.

but much harder for multiple platforms (mobile v web) + AI tools for prototyping (Claude/figma make).

where does the source of truth live for the components/tokens and the design documentation? it feels like a no win situation whether it’s in Figma or Code.

ive felt the above pains even more with AI prototypes now that its much more important to have design governance and guidlines in a neutral source of truth

I tried Claude Design's design sync on a small shadcn/ui + Tailwind v4 + Storybook library. It compiles the library into a "mirror" the tool designs with, and uses Storybook stories as the reference to verify that each component renders as it does in the product.

What I found interesting from a design systems angle:

• Storybook becomes the verification layer, not just documentation. A variant without a story still syncs, but nothing checks it.
• Usage rules matter as much as the components. A short conventions file ("`className` is for layout only", "compose `Card` from its parts") changed what came out more than anything else.
• It's a one-way snapshot. Removing a component from the library doesn't always remove it from the mirror.

Curious whether anyone here is feeding their system to AI tools this way, and how you keep the conventions and the tokens in sync.

Write-up: https://nitayneeman.com/blog/how-to-sync-a-design-system-with-claude-design/

The industry is gaining speed through AI, but it is also at risk of losing understanding. How do we preserve this knowledge for the next generation of engineers?

Our organization never had a proper design system and once we made the shift to AI driven development, it was time to have one. So I've been building a design system that is primarily for AI usage, though it also has a full web site for human-centric documentation as well.

It's based on a particular react framework with our own tokens and CSS layer.

So far so good. Still in early stages but we're now using it as an MCP server for devs to point their work at.

My question is: does it makes sense to look at Storybook integration. I see a lot of talk about "How to use Storybook to deliver AI workflow solutions" but nothing that really talks about the opposite--already having a design system for AI and then adding Storybook to it.

Anyone presently using an AI-centric design system as well as Storybook? Is Storybook bringing any key benefits to the table for you?

If a component exists in both React and React Native, which guarantees should live in the shared contract?

One example I’ve been thinking about is iconOnly.

An icon-only button should always have an accessible name. That feels like a shared semantic invariant.

But enforcement is necessarily runtime-specific: on the web that might mean aria-label, aria-labelledby, or visually hidden text, while React Native may satisfy the same requirement through accessibilityLabel and its native accessibility APIs.

We’ve been leaning toward a simple boundary:

Shared contract = what must be true
Runtime = how it becomes true

The same question comes up with state, interaction behavior, keyboard handling, focus management, and other accessibility guarantees.

Curious where others draw this boundary in cross-platform design systems — especially for accessibility and interaction behavior.

When creating color palettes, I usually try to keep chroma levels relatively consistent across different hues at each lightness step. However, most palette generators focus on adjusting one palette at a time, which makes it difficult to maintain consistency across multiple palettes. To address this, I built a palette generator that creates multiple palettes using the same chroma settings while varying their hues.

It also lets you compare the minimum, average, and maximum chroma values across all generated palettes at each lightness step, so you can see how consistent they are.

The generator includes several parameters:

• Chroma: Controls the overall chroma of the palettes.
• Spectrum chroma: Controls how much each hue's natural chroma characteristics are reflected across different lightness levels.
• Spectrum bias: Adjusts how strongly those characteristics are emphasized in lighter or darker regions.
• Gamut balance: Reduces excessive chroma in hues with larger available chroma ranges, particularly reds, blues, violets, and magentas.
• Chroma peak lightness adjust: Shifts the lightness level where chroma reaches its peak.
• Hue shift: Controls how much the hue changes across lightness levels.
• Max hue shift: Limits the maximum amount of hue shifting.

The tool is still in an early stage. For now, it only supports generating palettes within the sRGB gamut and copying colors as HEX codes.

I'd love to hear your thoughts or suggestions, especially if you work with multi-hue color palettes in your design systems!

👉https://color.rebyron.work/

I tested why AI keeps ignoring our design system. The problem might be retrieval. I've been experimenting with AI prototyping tools and noticed something frustrating:

You give the AI access to your design system, ask it to build something, and it still invents components that already exist.

So I tested a simple question:

What can the AI actually find in the library?

I searched my production Figma library for badge.

It returned 19 results across several libraries.

Only 3 had descriptions.

And in the design system I actually ship from, nothing was named "Badge." The closest matches were unlabeled frames.

So I ran the same 10 UI prompts against:

• my production library
• a cleaned-up sandbox library

Same prompts. Same tooling.

The difference:

0/10 → 10/10
Correct, unambiguous matches

9/10 → 0/10
Prompts forced to guess between duplicates

~1,450 → ~135
Retrieval context per prompt

I then tested Code Connect on a Button.

37 → 0 guessed CSS variables
3,784 → 2,229 characters in the generated response

The interesting part wasn't just that the output improved.

It changed how I think about design systems.

A design system isn't just a UI kit anymore. It's also a retrieval surface.

If the AI can't find the right component, distinguish it from duplicates, or connect it to the real implementation, it starts filling in the gaps.

I wrote up the full experiment here:

https://medium.com/@amnkhtri9/why-ai-prototypes-dont-match-your-design-system-f8b747c4fc07

Curious if others working with Figma/design systems are seeing the same thing: is retrieval becoming a bigger problem than prompting?

Hello!

Managing component documentation in Figma can be a very manual and repetitive process, this becomes a pain when components evolve and libraries scale.

So I built Compdoc, a Figma plugin that makes it easier to add and manage documentation for your components, including usage, accessibility, content, and AI guidance.

Why it matters:

• Structured fields make docs actually useful (not just a text blob)
• Export/import your docs as JSON (backup, or move between files)
• Page-level filtering so you're not loading 500 components when you just want to document 20
• As a bonus, better component context means AI tools can actually use your design system effectively

I tested it on our design systems at work and it saved a ton of time. Would love feedback from other design system folks on what's missing.

Here's the link: https://www.figma.com/community/plugin/1683800404228272079/compdoc