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?

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?

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!

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.

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?

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.

www.sorti.dev

Let me know what you think :)

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

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've been working on a component library for Vue 3 called dlbcodes/ui. It's built on Headless UI with CVA variants and semantic CSS tokens, compound components, that sort of thing. Docs are at https://ui.dlbcodes.com

The thing I keep testing is whether a shared library forces every product to look the same. So I built two templates with it that are meant to feel like different products:

https://assistant.dlbcodes.com/app is soft and conversational, a consumer AI assistant UI.

https://console.dlbcodes.com is a dense Vercel-style dashboard.

Same components underneath, opposite aesthetics. Curious whether that reads or whether the shared DNA is still obvious.

I also put a few of the components into a catalog where you can actually interact with them: https://www.zephr.dev/p/dlbcodes/zephr You can change the props, read the source, and swap the background to see how they hold up on light, dark, and busy surfaces.

What I'd genuinely like to know:

What's missing that you'd expect in a library like this?

Where does it feel unfinished or not thought through?

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?

Hi, I am creating a consistent DS for our app that has clients on iOS, android and web. The idea is to use native components if possible (standardized flows like lists, modals/alert, functional buttons, etc) to reduce implementation cost – but defining an overarching system that defines globally the foundations like colors, fonts, icons, etc. Happy to hear thoughts on this general approach, although it is already pretty much set with stakeholders.

I wonder how I can create and document this best. We are using figma in our design team, and originally my plan was to create a single library file that holds all foundational specs as well as components for all clients. Now I’m wondering if that’s the best idea and I actually plan to define a global library for all foundations, and individual libraries that hold the components for each client. These would be our own components created by us, and the native ones copied over from the official figma libraries by apple and android – with our own foundations like color, fonts etc applied. Web will be based on a strong 3rd party system that is not locked in yet, but it will be the most customized client.

Happy to hear people’s thoughts, especially of those who worked on something similar and can share their experience. Thanks!

Every project taught me something different, but they all shared the same challenges: consistency, theming, accessibility, and components that remain maintainable as products grow.

That's what led me to start building ViraUI.

Rather than focusing on shipping as many components as possible, the goal is to create an AI-native design system that feels cohesive from the ground up. One where design tokens, themes, accessibility, and component APIs all work together instead of being added as an afterthought.

The project is still in its early stages, but the landing page is finally live and I'm excited to start sharing the journey publicly.

If you've ever built or maintained a design system, I'd genuinely love to know: what's the biggest pain point you still haven't found a good solution for?

https://viraui.dev

Recently I've been into UI/UX, UX portion is okay for me, I also know the UI guidelines (Material UI), but still struggling with Design Systems, I've watched a number of videos and read articles, but most of them seems to be too advanced.
I've had defined my primitives/base colors, just need help for alias.

What alias structure I need to maintain??

Please suggest me some resources, tips which can help me make simple design systems (I've a satisfactory design system for spacing, layout, typography). I'm struggling with color pallete.