Is there such a tool for designing web projects or do you need to reinvent your own wheel?

Question

css

For several years, developing different sites / projects, I caught myself thinking that I often do the same thing. That is, I do it in different ways, but I come to the same result. Desired result - design.
Specifically - site design expressed in css. This is not about layout, but about the design of elements - buttons, menus, checkboxes, etc. Color, shape, size, effects.
I decided to somehow systematize it all, organize it so that it would be convenient and relatively fast.
Maybe it's time to create your own bike? Or does such a tool already exist?
First of all, I plan to create a tool for myself. existing solutions do not fully meet current needs.
The idea is this - an application / site for developing / customizing web design elements (buttons, menus, checkboxes). Visual interface with viewing the result in the current time. I changed the color of the button - I saw how it would look.
But this already exists. Of course, over the years I have tried many tools, but each has its drawbacks. And the task - or rather the result is often the same - a css file with design.
1 A bunch of online tools - generators of buttons, checkboxes. Different functionality, different settings. A bunch of sites - inconvenient. There is no unity.
2 Photoshop. Layout - transfer to css. Not fast. There is no way to view the effects, the behavior of the element when hovering / clicking. Yes, this is what websites do, but here the main layout, composition. This is more about a specific site, and not about elements.
3 We write CSS by hand, we update (it is possible with a plug-in) the page. For a long time. Remember the colors, one color here, another there, sizes.
4 Scss + Prepros (or equivalent) above. There are already variables, mixins, etc. Already something similar, but still we write the code by hand. The code is written by hand, but when it is different.
And here is the standard and 90% of the same type code - the borders of the element (border), color, size. And even their values ​​are often inherited, for example, one border color for all buttons.
5) Frameworks. They go along with everything-everything-everything. To edit it by hand - you can but for a long time. Even knowing what is where, it is difficult to create a good design due to the lack of unity. Here the color set the color to green, there it is red, the border is thicker - thinner, the indentation is more less. For a long time.
One way or another, template design has patterns. Conditional, but still there.
A certain number of colors, the uniform design of elements, the same indents / fonts / sizes, etc. Some sites, in terms of design, are web applications. Composition is not needed.
You just need to set the base colors, sizes, padding, effects, the same type of hover / click behavior, etc.
Is there such a tool for designing web projects or do you need to reinvent your own wheel?
For the development of desktop software (skins / visual elements), there are skin generators that implement part of the above functionality.

Answer 1

I heard about Figma here, and I would like to stand up for her. The tool was created for the development of interface design, and is fully used as an application, not a "website builder". Figma has a bunch of UI-kit, which in turn are divided into components. Through the command library, any user can use these UI kits and construct an interface. The whole result can be viewed in CSS:
Moreover, most of the big companies have already switched to Figma.
Here you can create text styles for the entire document, and button styles, and color styles, and shadow styles - and use all this as a single component, applying styles to any elements.

Answer 2

In addition to Mikhail Proskurin 's answer :
Introducing: Figma to React

Answer 3

Have you tried webflow, figma? what about them?

Answer 4

>need to reinvent the wheel?

Yes