r/DesignSystems

So my client is an German installation artist, over 40 years of work, which means 120+ project pages. And obviously he didn't want every page to look the same.

Fair enough. But I also wasn't going to build 120 pages by hand, so here's what I ended up with.

(and yes you can use AI too but more to that later)

One content row component with variants.  Named by the column splitting

- 2/3 + 1/3, the other way around
- 50/50
- full screen
- 33 / 33 / 33 (three columns)

In the CMS every row has an option field that picks the variant, and each column has conditional visibility bound to it.  Empty stuff just disappears. One artwork = one CMS entry.  No second collection, no back references, none of that complicated stuff. Maybe im just not smart enough

Well, two things got me.

First one, fit vs fill. 

If you put all three columns on fill you need fixed heights, and I have no idea how tall the client's text or pictures are going to be. What worked: middle and left on fill with space between, right column on fit with a fixed gap.
Then your top and bottom items are actually aligned.

Second one, and this is the part where it really gets tricky. 

Two columns at 2fr and 1fr next to each other with the same gap do NOT line up with a three column row. I mean this:

2fr___  / 1fr
1fr / 1 fr / 1fr

Looks like theyshould, right? 2/3 and 1/3 together, that's three thirds. Nope. 

Framer calculates fr against the whole width, not against your element (I think). 
And before you tell me I'm acting dumb (lol) and should just use 19px instead of 38px, no, that doesn't work . I tried. 
Ended up building a component just for that case. I named it "clutch double image" because it helped me clutch this .

Also, the canvas lies to you. Framer renders items inside columns even when they're invisible, so half the stuff you're debugging isn't actually broken. Check the live preview first, would have saved me some time.

The nice part is once the fields exist, filling them is boring, so I don't do it. I point Claude Code at the hi-if design PDF and it fills the entry, picks the variants used per row in the hifi design and drops the content from the pdf in the cms. Works better than I expected honestly.

I recorded the whole thing in the editor, my English isn't the best but I hope you will understand  it all tho: https://cms-layout.framer.website

Let me know what you think, happy to answer anything about the setup.

Hey r/SideProject,

I’ve been working on AnyGradient, a gradient editor for designers and developers.

I started building it because most gradient generators I came across were either very basic CSS tools or focused on exporting images. I wanted something where I could create more complex gradients and then actually use them in a real project.

AnyGradient supports:

• OKLCH and Display-P3 colors
• different color interpolation methods
• linear, radial and conic gradients
• layered gradients and noise
• Image to Gradient tool
• export to CSS, Tailwind, React, React Native, SwiftUI, Android, Flutter, Figma, PNG, WebP
• a collection of ready-made gradients that can be opened and edited
• import gradient code

The main goal is to keep the visual editing experience simple while still giving you much more control when you need it.

I recently launched it and I’m now trying to figure out what’s actually worth improving or building next. Would love to hear what you think, especially if you’re a designer or developer who uses gradients in real projects.

I've been trying to design interfaces with AI, and I keep running into the same problem.
The project already has a UI kit: components, variants, tokens, the lot. I ask the agent to add a button to a screen, and instead of using the Button component sitting right there in the codebase, it draws a new one. Slightly smaller. Slightly different. One more inconsistency to clean up.
That's what pushed me to try dedicated design tools.
I started with Claude Design. I couldn't get my existing UI kit into it because I hit the 5 MB limit, so I let it build a design system from scratch instead.
It duplicated components and icons. The same icon was drawn again on the next page, and by the third screen it looked different each time. I also couldn't point it at files on my machine or give it the tree of Markdown skills and project rules my agents already use.
The result wasn't product-ready. I still had to assemble the actual UI kit and design system by hand afterward.
Then I tried Figma Make. In my experience, it accepted my UI kit but never really treated it as the source of truth. Screens were built around my components rather than from them.
Skills were the other half of the problem. Mine are organized as a tree of Markdown files across multiple folders, and there was no clean way to import them or keep them synchronized with the codebase.
But the biggest problem was extension. If a prop or component was missing, the system didn't extend the kit. It either left the capability missing or created a one-off implementation, putting me back where I started.
Both are useful tools. They just stop at the exact boundary I needed to cross: designing against the real system, then extending that system when a screen requires something new.
So I built Varelyo for that workflow.
Varelyo opens your local React project and reads its components, variants, sizes, and tokens directly from source. The works directly with JSX code, so the component you edit is the same component your project imports.
If a screen needs a missing prop or variant, Varelyo adds it to the component. If it needs a new component or token, it adds that to the system according to your project's rules instead of dropping a one-off implementation into the page.
Agent skills are generated from the source and updated when the source changes. A second brand can use the same components with different token values rather than forking the whole system.
What comes out is ordinary JSX built from your own components and tokens, on an ordinary Git branch. There's no proprietary design file that needs to be translated back into code.

https://varelyo.com/

Found these recently back and keep coming back to them three free color tools, no signup, nothing stored anywhere, one page with 3 handy simple tools for Web dev...

sharing in case it's useful to anyone here:

Color palette generator — https://thedesigntools.site/color-palette-generator/

WCAG contrast checker — https://thedesigntools.site/color-contrast-checker/

CSS gradient generator — https://thedesigntools.site/css-gradient-generator/

All free, no signup, runs right in the browser

Have you tried Figma AI on a file that already has a design system? I did, thinking: Figma knows my library, it is sitting right there in the file, this is going to be fast.

It was not. Every time I asked for a screen, it drew something that looks like my components instead of using them. Right shape, roughly the right color, and not one of them was an instance of anything in my library. Every frame invented and named on the spot, every color a hex it picked itself, every text size a number it typed.
My design system was open in the same file and it may as well not have existed. Cleaning that up takes longer than building the screen by hand.

So I assumed the problem was Figma, and I connected Figma to Claude Code through the MCP instead. Same prompt, same result. Different tool, same drawing.

That is when it clicked for me. The problem was never the tool. I never actually given the agent the design system. Not a link to the library sitting in the file, the content itself: design tokens, components with their variants and states, and the usage rules that say which one to reach for.

So I fed all of that to Claude Code through a homemade MCP, plus a few skills that teach it how you are supposed to work with a design system, in Figma and in code.

Third run, same prompt as the first two. This time it used my design system. Every element on that screen is an instance of one of my components, and it picked the right one each time, in the variant and the state I would have picked myself. Not a single raw hex either: every color is bound to one of my color tokens, at the right step, and the type sizes are my typography tokens instead of pixel values. I can name them one by one, but that is my library, not yours, so the part that matters is that it chose correctly and I had nothing to clean up.

Visually the first and the last run are in the same ballpark. As something to hand to a team and maintain, they are not the same object at all. One updates when the library updates. The other is a drawing.

Screenshots below are run 1 and run 3 (I did not capture the middle one, it looked like run 1). You can also open the file on the Figma community and check the layers yourself: https://www.figma.com/community/file/1671111797169916480

To be clear about what this is: one dashboard, one design system, one run each. An observation, not a benchmark.

That third setup is what I am building now, and it is called Stellar. It reads your design system, from your Figma library, your repo, or your documentation, and hands it to the agent before it starts, so it can only build with your components and your tokens. Same rules in Figma and in code, because a screen and its implementation should come out of the same library. It is in private beta:
stellar-design.app

Mostly I want to know if this is your failure mode too, or if you hit something else. Tokens drifting, variants ignored, accessibility quietly dropped? I would rather break this against a design system messier than mine.

Hi

I'm working on an early stage project like this. It's similar to Figma, but the entire canvas is generated from code.

This allows you to design on a working prototype. You can experiment with different aspects, manage design tokens, and ask AI to create consistent designs using components.You can connect your own Agent to the canvas. I'd love to hear your thoughts.

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

I'm a designer, not a developer, so I started this as a learning project, wanted to build something with my own design knowledge instead of just handing off specs. First time building anything like this.

78 components, custom token architecture (tiered approach learned from the Intuit Design System), zero runtime dependencies, an AI chat on the site trained on its own content.

The part I'm proud of isn't the tooling, it's that the design opinion and architecture are mine. Every token decision, every component rule, came from my own direction guiding an AI-assisted build, not a template. Aimed for production-grade the whole way, and it's been one of the best learning experiences I've had.

Fully customizable too, bring your own fonts and colors, inject your own style on top of the base tokens.

Would love a few people to install it, poke around, and tell me what breaks or what's confusing.

npm install u/robr0/design-system

Site: https://robertritacca.com/design-system
Playground: https://robertritacca.com/playground

Storybook: https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs
Repo: https://github.com/robritacca-dotcom/design-system

if you are building and irritated with the same UI from Ai tools, try hextodesign.com, it will generate a complete design system in 30 sec, that will have css, tailwind, json and prompt, try it and share your feedback.