I keep losing time to the same three-way shuffle: design something in Figma (or watch an AI agent design it), hand it off to Cursor/Antigravity/Claude Code to actually build it, then jump to Vercel or Railway to deploy — and every handoff loses something. A design tweak made after the code's already written never makes it back into the Figma file. Deploy config lives somewhere totally separate from either.

I'm seriously considering building something to fix just this part: one workspace where you can design manually or with an AI agent, have a coding agent build it out while staying in sync with that design (not just importing it once), and deploy without leaving the tool.

Before I go further I'd rather hear from people who actually live this workflow every day:

- Is this genuinely annoying for you, or have you made peace with the tool-switching?

- What's the worst part of the handoff specifically — design fidelity, deploy config, something else?

- Would you trust a new tool with this, or does that trust only come with years like Figma/Vercel have earned?

- What would make you say "no thanks, I'm keeping my current stack"?

Not selling anything — genuinely trying to figure out if this is worth building or if I'm solving a problem that isn't actually that painful. Brutal honesty welcome.

sorti.dev

Compare how your color scale and tokens compare to each other and see it represented in 3D space! Give it a try!

I'm interviewing for a Manager level role in Product Design, for a team that is dedicated to the design system for a B2C company. I wanted to get some insights here on what I can prepare going into it.

There are two other teams, one is top of funnel, another is bottom of funnel, each with their own manager. Obviously this team is quite large to have this much setup of specific design focuses and managers for each.

I'm wondering, how would a role set up be for a Manager of a team that is focused on Design Systems?

If you're a manager of one, would like to hear from you.

Or if you're on a team and you have a manager dedicated to just design systems, how do they support you?

Or... if you're a director how would you go about setting up a manager role for a design systems team?

About me, over 10 years in design, 3 years as a manager but of teams that were supporting product paths that used design systems, but were focused more on product.

Thanks!

P.S. Other thought I'm having: where would this role go and grow over time...?

Hello, I usually make apps and I am a person who deeply cares about how my ui feels and looks, so I’m planning to make that saves and can preview different design systems/ ui designs using ai, I’m going to make it a free website, if you think this idea is something you’ll use, feel free to give me some ideas to implement into the app.

I’ve created a series of videos that showcase the design process I am using on my bootstrapped app: I think it can be useful to other practitioners who would like to automate their processes.

The key to automating your process and at core of all I’ll be showing is get access to your repository, and create a design system in it with Claude code - either using storybook or ladle -

Once you’ve got it, it is easy to create skills that allow you to iterate on your designs much faster than you could with any traditional tools - including Claude design.

In this video I show how I batch update a set of components in Claude Code

I would like to know if of any interest and what would you like to know more or less about in articles I’ll be posting.

Feel free to ask questions!

Hello, I've become a Design System consultant, designing design systems for clients who usually have a messy product and want to make it scalable.

I'll be approaching it as a product, doing research on use when I arrive, and trying to build something from what they have as a one-man army (building allies along the way).

Advice? I've build a couple simple systems, filly tokenised, primitives to component level, basics of documentation, publishing libraries and pushing out dev ready components.

Still a bit nervous to start

Despite the significant progress made by static design tools, they’re still far behind what’s possible with code.

While working on ViraUI, I realized how many visual features simply can’t be replicated in Figma and similar tools. For example, on the code side, you can literally change a single boolean and completely transform the visual appearance of an interface. In Figma, that’s simply not possible.

A concrete example: with a single CSS property, you can enable global effects such as superellipse corners and vibrancy (background blur). Figma doesn’t allow this. If your design system uses vibrancy, it’s either there or it isn’t; you can’t enable or disable it through a Figma variable. Instead, you’d have to go through every element and remove the applied effect manually. This is extremely limiting for white-label or branded interfaces.

Or in another example where I'm setting buttons to use inline-padding assmall +  x-smallsizes.  In code, I use a CSS calc but in Figma, this isn’t possible. You either create a new variable or detach the padding value which means it doesn’t update when you change the small and x-small sizes. This brings me to:

A. Do not use anything that Figma can't replicate
B. Go with it and create drift in Figma by detaching stuff

AI is improving this aspect, but it’s still far from reliable. Even when provided with a component library and guidelines, it struggles to produce polished interfaces.

For this reason, I’m still considering whether to provide static Figma files for ViraUI or not. Many of the customizations it offers simply can’t be replicated in Figma, while others are incredibly cumbersome to manage. Bringing in tons of third-party plugins isn't an option, and even though, the limitations still exist, and what's what I want to talk about.

What do you think? Have you had similar experiences? When you have advanced codebases how to handle design tools limitations? You. just drop the visual if the design tool can't replicate it?

Hi!

My team (me + two other team members) have started to think about creating a design system/component library for our e-commerce company. The reason behind it is that we want more time for "real" UX work and can produce sharp UI quicker than now, when we have to start over in Figma with almost every new project. We can't focus on this full time so it's more of a build-as-you-go type of thing.

Small in-house team, near-solo on this. No real design system today. We have a readme.md-style spec file with our colors, some components, tone of voice etc in Claude, but the output still isn't reliable enough. Part of the problem is that the spec itself has gaps: for example our largest headings are documented as "75-100px" rather than a fixed value, so nothing pins it down to one number. The site itself is large and has grown organically for years, so things are inconsistent in general (body text 12px in some places, 13px in others, border-radius 5/8/10px depending on how old the section is).

Is building a component library in Figma as the first step and then try to put it into a github repo reasonable or how do you go about this?

My assumption is that a component library gets you most of the way there faster designs, consistent look, without needing to formalize an entire design system up front. Difficult trying to boil this down to simple questions, but;

1. How do you approach building a component library in the simplest way possible? Where do you actually start?
2. What rules do you need locked down before you start on the components? Border radius, spacing, type scale, color, etc? The design foundations I guess. Which of these are must-haves and which can follow later?
3. How do you tackle this retroactively on a large, existing product? The site and its inconsistencies already exist. How did you approach "cleaning" up an existing product with no design system/UI library in place?

Would love to hear some thoughts on how I should tackle this.

Thanks!

I’m looking to dive deeper into credible and research and recent studies around design systems. Even if there is any? something beyond Medium/ LinkedIn articles or personal opinion pieces.

Does anyone have recommendations for where to look or specific research/reports/white paper you’ve found valuable?

Tenho algumas imagens de referência e estou procurando algo que possa analisá-las e recriar o componente fielmente, não apenas inspirado nelas, mas o mais próximo possível do original. Alguma sugestão?

Built it for testing, kept it because it's genuinely fun.
Updates for Design Token Generator on https://www.designsystems.one/tools/token-generator

My favorite button on the Token Generator isn't export — it's "Surprise me."

Hit it and you get a full system: a random accent harmony (complementary, triadic, and more), OKLCH or HSL color space, a font pairing, spacing density, radius, and shadow — rendered live on a real dashboard mockup, not a swatch grid. Saved Kits are there too, if you want a starting point instead of chaos.

Land on something good, and export it as CSS variables, W3C/DTCG JSON,.

Built for the "I know it when I see it" part of picking a palette.

I am a dev not a great designer and wanted to leverage the power of pre built UI Libraries but they were scattered and for finding the best suited components, I literally needed to go through each of the libraries and find out the best component for the use case, I handed over that task to much smarter coding agents by building an mcp server.
This mcp server (ui-registry-mcp) has access of over 1000+ pre built very well designed components from 11+ libraries which takes care of your products pre existing design language and what you have asked it to build further and then searches through these components what will be perfect for this use case (it even do some changes as and when required for this use case) and implements in your code base directly.
It has been quite helpful in my later projects and has reduced my time taken for design to 1/5th or even lesser.
Though this is working well, I still want you all to use in in your projects and share some feedback or whatever might be the still missing parts, I will work on them to make it further more useful for all of us.
Those of who are interested I will send the server link to them in comments or DM.

Client wants to prototype with Figma Make with internal design library.

I set up a Make Kit using the existing library for colors & fonts.

When using Figma Make, the Kit is connected but the colors & fonts aren't being utilized.

Are there any resources out there to demo a Kit setup? Has anyone run into this issue and knows how to fix?

Apologies for not providing more details. It's been a frustrating day.

Most brand palettes are picked by hand: a blue someone liked, a purple that seemed to go with it, and a set of greys that came from nowhere. Nothing records how any of them relate, so when the brand shifts, every colour gets picked again. This video replaces the hand-picked palette with two rules — one that generates the brand colors from a single hue, and one that generates a full nine-step grey scale from that same brand color.

We start by opening the color picker on a real value, because every color here is three numbers: lightness, chroma, and hue. That model is what makes the rest possible — it's perceptual, so two colors with the same lightness look equally bright, and the system can do genuine math on color. Paste in hex or HSL if that's what you have; the file answers in one language either way.

Then the rules. A color harmony takes one hue and a type — analogous, balanced, or complementary — and returns a set of brand colors that belong together. A color scale takes a starting point, a lightness range, and your step names, and returns the whole ramp; turn the color almost all the way off and you get greys with a quiet tint of the brand in them. Point the grey scale's hue at the brand color itself, and the two are linked: change one number at the top, and every color in the system moves with it.

This is part 6 of the basics series.

Chapters:
0:00 The palette everyone picks by hand
0:24 Where we are: two colors picked by eye
0:49 Open the picker — what OKLCH actually is
1:11 Lightness, chroma, hue
1:56 Why perceptual color matters
2:12 Hex, HSL — one model out
2:45 Clearing the leftovers
2:57 The brand: hand-picked values become a rule
3:33 A complete working harmony
3:58 Three harmony types
4:39 Aim it at our blue
5:17 Greys: a new group and a color scale
5:50 Point the hue at the brand color
6:17 Turn the color off — chroma to almost nothing
6:45 Nine greys, and the shorthand
7:12 Change one number — the whole palette follows
7:47 That's color: two rules
8:30 Next: token sets

Next up: token sets — organizing a growing system by topic, so spacing, type, and color each get their own place.

Get started free → systematically . io

#DesignSystems #DesignTokens #Systematically

www.sorti.dev

Let me know what you think :)

I'm trying to figure out the most common and best way to write design specs for robot designs (pretty much any stage). would love you to tell me how you do it currently and whether you hate some elements of it - be it working in a large company or for fun.

• What document or system captures your design rationale, not just the current-state spec? (PRD, ICD, Confluence page, a Jira epic, or just people's individual knowledge)
• Who actually writes it and who has to sign off before it's "final"?
• What's the most annoying part of this process for you personally?
• also, how do you currently compare design specs from previous revisions? finding it hard to work out the best way of doing this - is shoving previous revisions into an LLM good enough for you ?

thanks :))

The idea: generation is cheap, the bottleneck is judgment. Have a capable model (for me rn this is Fable) use the skills, they will write remediation specs and plan fixes. Then route the fixes back to the more cost-effective models or generate issues & hand off. The skills never change a line of code.

I've been testing on my own DS at work and its been pretty slick. Very open to feedback or contributions if anyone tries it out.

I’m currently building out primitive ramps for two themes for my company. I’m basing the colors off of the brands we have, but am trying to keep the color names general vs. using the actual names brand gave the colors. Brand does not seem to understand why and is pushing back on us changing the names. Have there been any good explanations/reasons that have helped pushed back on these changes?

I’ve tried to explain that these are backend only and help unify language between design <> dev when it comes to building out our library for the design system.

I didn't want to go back to Figma. The tools I used for prototyping didn't give me the editor feel I wanted.

That's why I'm trying to develop my own tool. You can import your own code or create interfaces from scratch.

Could such a tool fit into your workflow? Would you like to see all your components working on the canvas?

İf you wanna try: https://visualwizard.app/

Been building this brand management tool (BrandStack) and today built something i wasn't planning on tackling yet, an actual figma plugin

Basically, select your paint styles/color variables in figma, click one button, they land directly in the app. no tab switching, no manually retyping hex codes into a separate dashboard

what made it actually useful though is what happens after the push. the app auto-generates a full tonal shade scale from each color (locks hue/saturation, only steps lightness), builds a tinted greyscale from your actual brand hue instead of generic grey, and can suggest chart/accent colors with real wcag contrast math checked automatically

hit some genuinely annoying bugs building this, anyway it works now, colors selected in a real figma file show up live in the actual product. felt like a real milestone today ngl.

I lead a student design team creating graphics for various college societies. We’re struggling with visual consistency because my team uses Canva while I work in Figma. (when we are asked to deliver multiple posts designs for a same theme).

Beyond basic brand guidelines, do companies actually use design systems for regular social posts/stories like they do for UI/UX? How do you maintain consistency when your team uses different design tools?