Tom Bohdalek

Design engineer building @webora_app — a visual editor where the canvas edits the code. Real React + Tailwind, no lock-in.

[Tom Bohdalek @tombohdalek]

This is Webora. I've been building it in my free time, and until now only a few people knew about it.

I've been doing frontend for 10+ years. Almost every design system I've worked on lived twice. Once in Figma, once in code. Two sources of truth that slowly drift apart.

Why keep two? In Webora there's only one: the code. You edit your React design system visually (components, variants, tokens, breakpoints) and build the product UI on top of it. The canvas edits the real source code. Change the button on the canvas, and you've changed Button.tsx. Nothing to translate, nothing to keep in sync.

Made for designers and developers who build and maintain a design system. Agents like Claude Code, Cursor or Codex can work on the same code too, over MCP. You can start from scratch or from the shadcn preset.

Webora covers the UI layer. Business logic stays in your codebase.

Private alpha is opening now. Request access, link in the reply. If you work on a design system and want to try it early, reply or DM me.

[Tom Bohdalek @tombohdalek]

You might not need a shadcn kit in Figma.

In Webora your theme is the real CSS variables, light and dark side by side. Change primary and every component repaints.

When it's ready, install it into your app with the shadcn CLI.

[Tom Bohdalek @tombohdalek]

@ImSh4yy Same math for me. I could build my own feedback widget, but every hour on that is an hour not spent on my actual product. That's why I use UserJot :)

[Tom Bohdalek @tombohdalek]

I designed the first version of @webora_app in Figma, using Untitled UI as the base. Today that Figma file isn't usable anymore.

Why not straight in code? I needed to design the main screens first and set the visual direction. Then I started designing directly in code. Working alone, it was much faster, with no handoff. And of course the Figma file drifted.

Partly that's my fault. Partly it's how Figma thinks about components.

In Figma every variant is a separate component with its own layers. Two variants can have a completely different structure and still count as one component. In React, a variant is usually a prop that changes classes on the same component. When the structure changes, you need conditions in the code, and often it's really a different component.

Take a button with an icon. In Figma it's just another variant with one extra layer. In code it's an icon prop and a condition that renders it.

So even a perfect Figma library doesn't match the code one to one.

For first screens, visual direction and brand work, Figma is still great.

Many teams still keep their design system there and sync it with code. We do the same in my day job. It works, but it takes a lot of extra time. I don't think it has to. That's why Webora today is a visual editor that edits the React code itself.

[Tom Bohdalek @tombohdalek]

@tibo_maker I agree with every single word.

[Tom Bohdalek @tombohdalek]

Agreed, that's what Figma does best. Each component in Webora has its own canvas: draw a frame next to Button and sketch your three bad versions there. The frame is its own file, so Button.tsx doesn't change, and deleting the frame deletes the file. Where do you explore today, Figma or straight in code?

[Tom Bohdalek @tombohdalek]

This is Webora. I've been building it in my free time, and until now only a few people knew about it.

I've been doing frontend for 10+ years. Almost every design system I've worked on lived twice. Once in Figma, once in code. Two sources of truth that slowly drift apart.

Why keep two? In Webora there's only one: the code. You edit your React design system visually (components, variants, tokens, breakpoints) and build the product UI on top of it. The canvas edits the real source code. Change the button on the canvas, and you've changed Button.tsx. Nothing to translate, nothing to keep in sync.

Made for designers and developers who build and maintain a design system. Agents like Claude Code, Cursor or Codex can work on the same code too, over MCP. You can start from scratch or from the shadcn preset.

Webora covers the UI layer. Business logic stays in your codebase.

Private alpha is opening now. Request access, link in the reply. If you work on a design system and want to try it early, reply or DM me.

[Tom Bohdalek @tombohdalek]

Request access: https://t.co/2ai1btZaHq

[Tom Bohdalek @tombohdalek]

@CyprianAarons I recommend the Impeccable skill to cut the AI slop https://t.co/xQhb4WTcnj, its great

[Tom Bohdalek @tombohdalek]

@orcdev How do you use them? All from the terminal, or some app like @conductor_build?

[Tom Bohdalek @tombohdalek]

Yeah I agree it's often easier to just ask the AI for the current state than to read stale docs. Depends how big the project is though. Last two months a setup like this has been working for me: https://t.co/p0c046BWCP Brain stays current and the important decisions live there. Before the agent starts on anything, it starts there.

[Tom Bohdalek @tombohdalek]

@jonathan_wilke Nice, looking forward to it

[Tom Bohdalek @tombohdalek]

@kunchenguid Don't know why but I keep needing to justify that I need the hardware. But price/performance just doesn't make sense. The only real reason I see is privacy.

[Tom Bohdalek @tombohdalek]

@tdinh_me Yeah that's what you get when you tell the AI to write tests.

[Tom Bohdalek @tombohdalek]

@thsottiaux How does he always time this. Every time I'm about to run out, the reset just lands.

[Tom Bohdalek @tombohdalek]

@eMeRiKa Until design is a separate thing next to the code, it will always drift. But when design is real code, it can't.

[Tom Bohdalek @tombohdalek]

@localhost_5173 I like the idea of matching with Base UI.

[Tom Bohdalek @tombohdalek]

@Joi2James Building https://t.co/rD0P4oFOwI

[Tom Bohdalek @tombohdalek]

@solopribuilds https://t.co/rD0P4oFOwI