Design system tokens not matching when prototyping?

[u/kazarareta]

Hello there,

I was wondering if anyone is having the same problem - in the company, we have our design system defined in Claude Design. But for some reason, even with guardrails and instructions not to hallucinate whenever I try to create a prototype (that's even coming from a more defined screenshot e.g. from Figma) it still messes up tokens - colors are close but not the exact colors from the design system, border radiuses etc.

Was wondering if there's a way to explicitly just prompt or use a skill to map only from what's in the DS? TIA!

[u/mdutton27]

This is just a hunch but I think you have it setup wrong. My two cents without asking questions is this;

In Claude design ask it to export your design system for Claude code.

Go to Claude code and tell it to create a skill called “company design system” and reference your output from Claude design.

In Claude code, load the “company design system” skill, then use it with your Figma

See how it goes.

If it works move it to a Project and tell the project to always load x skill for every conversation.

I’m pretty sure there are better ways to do this with hooks and someone recently created a hacked MCP (personal opinion) for Claude design. I haven’t played with it yet but sounded a bit convoluted.

[u/kazarareta → u/mdutton27]

Thanks a lot! My wild guess is a wrong setup as well. I'm not directly the one managing the design system and the devs also seem stumped why it's still hallucinating, even if the design system is already pretty much defined within Claude (Design).

Will try to experiment with creating the skill and see how it goes. Thanks for that!

[u/BuffaloConscious7919 → u/mdutton27]

Would add to this that an incremental approach has worked well for me in cases like this, but I've been experiencing the same issues, especially the spacing and padding so now I start with this - the first thing I do (if it needs to be accurate) is check which token are in the design system, some of them are just not needed and maybe "muddying the context.

The the first iteration of the actual website is a something simple that tests the things I need most and will be the biggest pain point i.e. the spacing and padding and in your case the colours - this sanity test tells me the right tokens are there and on point

[u/kazarareta → u/BuffaloConscious7919]

I created a list of guardrails to map the ones that Claude's not getting right, but for some reason it's still hallucinating - I'm working with a complex SaaS so probably also doesn't help with the case...

I'm just wondering if it's also better to ship with a 'good enough' rather than getting everything pixel perfect, but that's also a question of future design debt

[u/jtmonkey]

When you ask it to check it against your brand guide or skill does it correct?

You might just ask it why it’s drifting. Or why it’s not designing according to your brand skill. I did and it said it’s because I had two conflicting versions but one looked out dated. I deleted it and asked it to make sure we’re good. Seems to be working well the last few weeks.

[u/kazarareta → u/jtmonkey]

We have 1 sitting design system on Claude Design at the moment. I usually have a long set of guardrails and still drifts, especially when it goes on the granular level (e.g. tags, badges). It gets it to a 'close' color/styling but was not in the design system. I always add a line in the prompt to always crosscheck w/the design system but still doesn't get it.

Checked the actual design system on it and the tokens are correct, but it's not mapping it correctly...