Discover more from Matt Rickard
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.
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.