Revision: Generative Text-to-UI

Frontend engineering is complicated. We know what we want things to look like, but our code doesn’t always reflect that. Off-the-shelf UI kits can be easy to add, but tough to modify to our liking. AI can help, but unbounded, it’s hard to integrate into our frontend stack.

That’s why I built the Thiggle Revision AI. Given a natural language prompt, it generates a React Component that you can copy and paste straight into your application. Better yet, you can iterate on the component with natural language – make the text bigger, add a gradient, resize a section. It keeps the history so you can branch, fork, and revert.

Generative text-to-UI is too general of a problem to tackle head-on. The trick: Thiggle Revision doesn’t do everything. In fact, it’s extremely scoped for now. It’s best to start by forking an existing component rather than starting from scratch. It only supports styling through TailwindCSS. The only external components you can use are a few shadcn components. You can’t generate (or run) arbitrary JavaScript. Like HTML in email, there’s only a subset of elements and attributes supported for now.

Why try it?

It’s fun. It’s fun to instantly get feedback on UI changes that are described with natural text. Ask the LLM to generate stylized text, add emojis, generate funny bios, or anything else. It’s not always faster at generating a final design faster than I can, but it can provide a first draft just as fast as I can type. The feedback loop is tight (and will only get tighter).

It’s useful. Starting from scratch is a pain. JSX is verbose. The current generation of programmers won’t know how difficult it was to center a div, but there are new problems to be solved. Sometimes, it’s easier to just describe the layout. Or take a template from somewhere and make a few tweaks. Some tweaks are easy, but a rules-based mapping would be too much work: switch this component to dark mode, make the elements proportionately bigger, and find the smoothest layout.

Give it a try, and let me know what you think. It’s still a very early version, so there are bound to be bugs. But I’ll add more features and iterate over the next few weeks.