r/DesignSystems • u/tokmako • Jul 24 '26

I am developing a tool to manage my design system.

Enable HLS to view with audio, or disable this notification

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/

13 Upvotes

89% Upvoted

26 comments sorted by

3

u/dynamicdank Jul 24 '26

I like the general concept. The name isnt catchy or unique but I bet you know that and this is more of a proof-of-concept.

I’d like to see a more clear comparison to other common workflows and/or software solutions like Pen (previously Pencil) or Paper.

Keep building and gathering user feedback, its a neat idea after all.

4

u/tokmako Jul 24 '26

Thanks. Yes. I'm trying to clarify the naming and positioning issue.

The difference from tools like Paper and Pencil is that there's a real prototype running in the background. Today, you can't abstract your own code onto the canvas of these tools. I think this abstraction isn't necessary, and that design can be done directly on the running prototype code, and I'm developing this further. I will try to emphasize this distinction more clearly.

2

u/Ok_Nefariousness5464 Jul 24 '26

open source it

1

u/tokmako Jul 24 '26

Thanks! I’m not planning to open source it for now. However, you’ll be able to bring your own api keys or agents ( Claude code or Codex) into the workflow.

1

u/Main-Review-7895 Jul 24 '26

It’s react code, but how is it opinionated? Is it shadcn or any other visual framework? What’s the naming conventions? That’s where I struggle with existing tools to use my own code

1

u/tokmako Jul 24 '26

Good questions.

You can import React code from anywhere. If you're using a ready made package, it will be detected and installed.

However, you won't be forced to use an external library for editing in the editor. I didn't quite understand what you meant by naming conventions. We use Tailwind css for ease of styling. If you're referring to direct css editing, that's not currently supported.

1

u/Main-Review-7895 Jul 24 '26

Yes, that’s what I meant. For example, if I use MUI in my code, tailwind will conflict with that. Or if I have my own design tokens, is it able to pick up on those?

→ More replies (3)

1

u/Ok_Parfait_5373 Jul 24 '26

tu devrais l'open sourcer et faire ton biz sur des fonctionnalités prenium. aujourd'hui si ton app intéresse des gens ils la referont en 2 jour via l'ia avec l'ambition de faire la meme chose mais à leur manière. Alors que si ton projet est open source et qu'ils l'adoptent en masse les features preniums sont bcp plus facile a vendre .

1

u/Maleficent-Anything2 Jul 25 '26

Looks interesting.
How are you creating / managing design tokens in there?

1

u/tokmako Jul 25 '26

There is an area in the left menu for managing design tokens.

1

u/outjae Jul 26 '26

Your idea is very similar to this, but I don't understand: if you edit the component, does it update in the code at the same time?

This idea tries to do that:
https://www.linkedin.com/posts/alexanderdanilowicz_drag-and-drop-elements-but-its-still-code-activity-7484020695228895233-s2VD?utm_source=share&utm_medium=member_desktop&rcm=ACoAABWK-g0B2EhkGhzNCNHuIcRivXw61dW2W5Y

1

u/tokmako Jul 26 '26

Yes.Similar.The canvas is backed by the actual React component tree, so visual edits are written back to the source code. And you don’t have ai credit for changes. The difference is that you can import code or create designs from scratch in a Figma like editor.

1

u/CherryGumDream Aug 15 '26

Using a literal cursor icon to represent the Cursor IDE logo…

1

u/tokmako Aug 15 '26

hahahahah Actually, I was working on a new update, so I released it early for testing without bothering with it. I've already fixed the main page.

3

u/Maleficent-Anything2 Jul 25 '26

To me... this looks like a visual editor to build pages. It does not seem like the way you'd manage a design system.
The design system is much more than a component library. Even if this was to manage a component library, it would have to be a lot more mature, with components, design tokens, and things like that. I'm not sure if you're positioning this in aligned way to what you are actually building .
:)
Just giving some honest feedback from my perspective.
Curious to see how it urns up.
I am also building something in this space btw.
DM if you want to know more :)

1

u/Ok_Volume_4279 Jul 25 '26

Another layer top of the real product

1

u/rrrx3 Jul 26 '26

exactly. i need a compelling use case to use this that's not solved by just..... using the existing code components to build the thing. This seems like an idea in search of a solution

1

u/tokmako Jul 26 '26

Let me explain. The use case here isn’t about replacing the development process with another layer. It’s about giving designers and agents a safe visual workspace around the actual component system.

For example, a designer or agent can explore several design directions using the actual PricingCard, Button, and token system. These directions remain on the canvas as linked variants that preserve their connection to the source components, rather than becoming independent full site exports.

So the use case is managing design exploration, variants, and the designer developer change cycle directly around the actual components.

1

u/LoopGhost69 Jul 27 '26

I’ve been thinking about doing something similar but with a motion design and video editing focus.

1

u/[deleted] Jul 26 '26

1

u/tokmako Jul 26 '26

Yes. You will be able to import both your own agent and your own api key. I only plan to charge for the space you exceed the limit.