Hey, Steve here from tldraw. This is a toy project with a horrible security pattern, sorry. If you want to run it locally or check out the source, it's here: https://github.com/tldraw/draw-a-ui. You can also see a bunch of other examples at https://twitter.com/tldraw.
Happy to answer any questions about tldraw/this project. It's definitely not putting anyone out of work, but it's a blast to play with. Here's a more complicated example of what you can get it to do: https://twitter.com/tldraw/status/1725083976392437894
Hey Steve! Super exciting project and congrats on the launch! I tried to use my open AI key and am getting an error around "you exceeded your current quota, check billing". Does the standard $20 a month OpenAi Pro subscription work for this or are there additional permissions needed?
Edit: found the answer on the github readme
"*To use your own API key, you need to have access to usage tier 1. Check out your current tier, and how to increase it in the OpenAI settings."
Wow! That flow chart is really a killer point and probably should be a first-class concept for a tool like this. Really starts to give someone the right levers to making something useful vs. a toy.
That last example is fun, it's amazing how you can give it feedback like that. When you select the generated app + your text, what's it actually receiving as input? Is it receiving its previously generated code plus your new text?
```
You are an expert tailwind developer. A user will provide you with a
low-fidelity wireframe of an application and you will return
a single html file that uses tailwind to create the website.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design's html will appear as a white rectangle.
Use creative license to make the application more fleshed out.
if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file.
```
(not sure about why the creative[commons?] license is referred here and why does it help.)
and for each generation the user prompt is:
```
[IMAGE_LINK]
Turn this into a single html file using tailwind.
```
"creative license" in plain English, means essentially "don't worry too much about constraints, do what you feel will is best." I don't think it has anything to do with software licenses.
Such recent demos show both how impressively ML/AI has advanced recently, and how unimpressively repetitive and unoriginal tasks keep being reimplemented by millions of developers worldwide. Since most UI screens can be accurately described in one or two paragraphs, it's no wonder they can be represented in much detail in a relatively small embedding vector.
While I agree at a high level, it's also important to understand that most of these demos are being carefully cherry-picked. If you are just seeing the viral demos on social media, you're going to think AI is further along than it actually is for more complex tasks. People who are non-technical and not using AI in anger to get real work done are going to be the most susceptible to this.
Those in the weeds are generally going to have a more nuanced view of the benefits and challenges--i.e. that it's incredibly useful but also very fallible and requires careful hand-holding to get production-ready results.
I say all that as an AI optimist. The value is real and the most impressive demos are glimpses of where we're heading. But it's going to take some time before the median result catches up to the hype.
A lot of methods of expressing software ideas are also very inefficient. The actual interesting part, the entropy, is very small. In the demo it’s literally two sliders controlling two CSS attributes which is not a lot of bits of entropy in a UI specification. With an appropriate UI specification language, that would be, what, three lines of code? Needing to manage Web UI boilerplate is where the difficulty is.
You've put into words what has bothered me about the relentless boosterism of B2C AI solutions on the backs of hundreds of these "Hello World" type demos. "OMG, programming is dead!"
The strange thing is that on HN, the limits of these approaches re: extensibility and maintenance are easily recognized when talking about traditional no-code platforms. But somehow with AI, these problems are now fixed, and we wont have to worry about unspooling spaghetti spat out from a black box.
It just exposes how stupid our software stacks are. Everything is driven by "well, maybe they'd want to customize this and that and that and three hundred irrelevant details". When in reality all we ever wanted was to separate the functionality from its presentation. Which, incidentally, was exactly the Web we had in 1996 with just bare HTML. Things have gone horribly, horribly wrong in such a mind-bogglingly stupid way and nobody is better for it. Oh but those dropshadows and inner flexboxes or something.
I just see this as a tool to help make UI designers (and maybe POs) look smart and competent, but the real work is going to go to the programmers, just as it does today.
UI designers will be able to give a "demo" but how will this basic functionality translate to the rest of the app? It won't.
I was discussing with a client how to integrate our software with his.
He sent me a screenshot of the main form.
I put the screenshot into ChatGPT and said “make a react form like this in bootstrap”.
Made some adjustments, added my software, a few hours later showed the client who was knocked out to see a proof of concept of our systems integrated so quickly.
When doing web development I often take a screenshot of a problem with css layout, upload to ChatGPT and ask how to fix it.
But the thing is, creating a basic form page -is- simple. What is so amazing, is that after ~25 years of web development, we have continued to make it more complicated than it should be, by continuously coming up with new web frameworks that are brilliant for all kind of fancy use cases but overcomplicated for the more common and basic tasks.
Yes, there have been exceptions every now and then, but most web devs don't like them. They don't look fancy on your cv and face it, who wants to stick to building web forms for the rest of their career?
Yes, the customer will be impressed by your speed the first time. The second time, he will expect it. The third time, when requirements have grown enough to be beyond what ChatGPT can deal with, he'll be angry that timescales have exploded.
> When doing web development I often take a screenshot of a problem with css layout, upload to ChatGPT and ask how to fix it.
Oh wow, that’s a neat idea that I hadn’t thought of before. I’m decent enough at CSS that I can normally fix it in dev tools then port/copy the styles to the code but I’ll have to remember that trick.
I haven’t used ChatGPT as much for code as I have CLI piping or bash scripts to munge data quickly. Things I wouldn’t have checked (like for debugging or proving a hypothesis) become almost easy when I can give ChatGPT the output of a command and ask it for bash to format/collate/sort/extract what I want out of it. I can do it manually but I’m slow at that process and have to google or use man pages to remember flags/args/etc. For code I mostly just use GH Copilot.
Creating the front-end of a Bootstrap form with no backend logic isn't particularly impresssive, it's something that would be taught halfway through any bootcamp course. Source: me, a person who built BS sites for years until I finally got around to learning Flexbox and CSS Grid properly.
Call me an unbeliever, but I don’t believe in the future of no code solutions. You will still have to align that button at smaller device resolutions, leave extra space so it looks nice in another language, and other requirements. Maybe it’ll enable us to use even more abstracted languages to build apps faster at most. This only works for extremely basic and common things like tic tac toe and not original works.
A huge part of the problem with LLM based no code is that the output is non-deterministic, so you can only check in the output to version control.
Imagine what happens when you have dozens of barely technical people all adding features by sketching them and clicking “make it real”. Each one is producing hundreds of lines of code. At the end of the day someone is responsible for understanding the output because since the output is non-deterministic, that’s all we have.
Artisans who can sing on key will continue to make very interesting things.
But also in parallel a whole new wave of people that couldn’t or didn’t want to learn to sing on key will make entirely new genres of music and also pop for the masses with far less effort.
Even the artisans will use it sparingly to enhance and perfect and speed up some of their workflows
I think a lot of these demos aren't necessarily trying to push forward a no-code purist approach, but rather showing how you can get basically a live wireframe going in no time at all. I think tools like canva, figma, etc will be all over this stuff and really improve high-fidelity wireframes/demos
Look at the success of ComfyUI in the Generative AI world and node-based editing in the graphics world (i.e. blender). "No code" works, but it has to be tailored towards experts who want to actual write code sometimes, not billed as making it possible for suits to write software.
Squarespace, Wix etc have already taken the bottom of the market, and if they hadn’t, Indian outsourcing would have anyway.
This is the logical progression of those same concepts. If I were a product manager at a website builder, I’d be all over integrating ai builders like this. It will never work for barely defined complex business tasks, but it might do fine to create a cost estimator for a photography business, for example.
I feel old now. I'm fairly sure that we could do this almost as fast with VB or Delphi a couple of decades ago, but a little more deterministic results instead of having the tool inferring it from the label names. We had this and then we shoved everything in the browser and forgot that we could do this without using huge amount of compute of some generative AI model.
Isn’t the whole point of all this so I don’t need to use a web UI anymore? I can just tell the computer what I want and it does it, then I can go about my life?
You are an expert web developer who specializes in tailwind css.
A user will provide you with a low-fidelity wireframe of an application.
You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.
Include any extra CSS and JavaScript in the html file.
If you have any images, load them from Unsplash or use solid colored retangles.
The user will provide you with notes in blue or red text, arrows, or drawings.
The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design's html will appear as a white rectangle.
Use creative license to make the application more fleshed out.
Use JavaScript modules and unkpkg to import any necessary dependencies
Can someone with an API key try making a rectangle labeled "URL", and a bigger rectangle underneath it, and then see if it is smart enough to make a simple browser out of that?
FWIW, I'd guess that the 2 sliders with labels like those, and a square or other shape, matches very closely some GUI and pedagogical graphics toolkit tutorials upon which the LLM was trained (in which a slider rotates the shape).
[+] [-] steveruizok|2 years ago|reply
Happy to answer any questions about tldraw/this project. It's definitely not putting anyone out of work, but it's a blast to play with. Here's a more complicated example of what you can get it to do: https://twitter.com/tldraw/status/1725083976392437894
[+] [-] ed|2 years ago|reply
Seriously this is lightning in a bottle. Charge $5/mo and have users bring their own OpenAI key.
Here’s a freshly MIT’ed licensing server you can use. It’s written in elixir and powers https://go.robocoder.app
Reach out if you need help getting it running!
https://github.com/emcmanus/robocoder-server/
(Or I’m sure Robocoder.app can walk you through the dev setup)
[+] [-] bastardoperator|2 years ago|reply
[+] [-] aketchum|2 years ago|reply
Edit: found the answer on the github readme
"*To use your own API key, you need to have access to usage tier 1. Check out your current tier, and how to increase it in the OpenAI settings."
[+] [-] ugh123|2 years ago|reply
[+] [-] mcintyre1994|2 years ago|reply
[+] [-] firexcy|2 years ago|reply
``` You are an expert tailwind developer. A user will provide you with a low-fidelity wireframe of an application and you will return a single html file that uses tailwind to create the website. They may also provide you with the html of a previous design that they want you to iterate from. Carry out any changes they request from you. In the wireframe, the previous design's html will appear as a white rectangle. Use creative license to make the application more fleshed out. if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file. ```
(not sure about why the creative[commons?] license is referred here and why does it help.)
and for each generation the user prompt is:
``` [IMAGE_LINK] Turn this into a single html file using tailwind. ```
https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
Looks simple enough to run “privately” by screenshooting a normal tldraw canvas and passing the prompt with it to the API.
[+] [-] ojbyrne|2 years ago|reply
[+] [-] unknown|2 years ago|reply
[deleted]
[+] [-] chatmasta|2 years ago|reply
[+] [-] imjonse|2 years ago|reply
[+] [-] danenania|2 years ago|reply
Those in the weeds are generally going to have a more nuanced view of the benefits and challenges--i.e. that it's incredibly useful but also very fallible and requires careful hand-holding to get production-ready results.
I say all that as an AI optimist. The value is real and the most impressive demos are glimpses of where we're heading. But it's going to take some time before the median result catches up to the hype.
[+] [-] jprete|2 years ago|reply
[+] [-] rchaud|2 years ago|reply
The strange thing is that on HN, the limits of these approaches re: extensibility and maintenance are easily recognized when talking about traditional no-code platforms. But somehow with AI, these problems are now fixed, and we wont have to worry about unspooling spaghetti spat out from a black box.
[+] [-] titzer|2 years ago|reply
[+] [-] booleandilemma|2 years ago|reply
UI designers will be able to give a "demo" but how will this basic functionality translate to the rest of the app? It won't.
[+] [-] paxys|2 years ago|reply
[+] [-] andrewstuart|2 years ago|reply
He sent me a screenshot of the main form.
I put the screenshot into ChatGPT and said “make a react form like this in bootstrap”.
Made some adjustments, added my software, a few hours later showed the client who was knocked out to see a proof of concept of our systems integrated so quickly.
When doing web development I often take a screenshot of a problem with css layout, upload to ChatGPT and ask how to fix it.
The demo shown in the tweet seems pretty similar.
[+] [-] misja111|2 years ago|reply
Yes, there have been exceptions every now and then, but most web devs don't like them. They don't look fancy on your cv and face it, who wants to stick to building web forms for the rest of their career?
[+] [-] toyg|2 years ago|reply
[+] [-] jorvi|2 years ago|reply
It’s turtles all the way down :+)
[+] [-] cynicalsecurity|2 years ago|reply
[+] [-] joshstrange|2 years ago|reply
Oh wow, that’s a neat idea that I hadn’t thought of before. I’m decent enough at CSS that I can normally fix it in dev tools then port/copy the styles to the code but I’ll have to remember that trick.
I haven’t used ChatGPT as much for code as I have CLI piping or bash scripts to munge data quickly. Things I wouldn’t have checked (like for debugging or proving a hypothesis) become almost easy when I can give ChatGPT the output of a command and ask it for bash to format/collate/sort/extract what I want out of it. I can do it manually but I’m slow at that process and have to google or use man pages to remember flags/args/etc. For code I mostly just use GH Copilot.
[+] [-] rchaud|2 years ago|reply
[+] [-] 2-718-281-828|2 years ago|reply
[+] [-] seydor|2 years ago|reply
[+] [-] nwoli|2 years ago|reply
[+] [-] JCharante|2 years ago|reply
[+] [-] sarchertech|2 years ago|reply
Imagine what happens when you have dozens of barely technical people all adding features by sketching them and clicking “make it real”. Each one is producing hundreds of lines of code. At the end of the day someone is responsible for understanding the output because since the output is non-deterministic, that’s all we have.
[+] [-] yoav|2 years ago|reply
Artisans who can sing on key will continue to make very interesting things.
But also in parallel a whole new wave of people that couldn’t or didn’t want to learn to sing on key will make entirely new genres of music and also pop for the masses with far less effort.
Even the artisans will use it sparingly to enhance and perfect and speed up some of their workflows
[+] [-] code_runner|2 years ago|reply
[+] [-] twoquestions|2 years ago|reply
[+] [-] kubiton|2 years ago|reply
[+] [-] Der_Einzige|2 years ago|reply
[+] [-] geraldwhen|2 years ago|reply
This is the logical progression of those same concepts. If I were a product manager at a website builder, I’d be all over integrating ai builders like this. It will never work for barely defined complex business tasks, but it might do fine to create a cost estimator for a photography business, for example.
[+] [-] JanneVee|2 years ago|reply
Look at me I'm old yelling at clouds!
[+] [-] reidjs|2 years ago|reply
[+] [-] random_cynic|2 years ago|reply
[+] [-] resiros|2 years ago|reply
You are an expert web developer who specializes in tailwind css. A user will provide you with a low-fidelity wireframe of an application. You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website. Include any extra CSS and JavaScript in the html file. If you have any images, load them from Unsplash or use solid colored retangles. The user will provide you with notes in blue or red text, arrows, or drawings. The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts. They may also provide you with the html of a previous design that they want you to iterate from. Carry out any changes they request from you. In the wireframe, the previous design's html will appear as a white rectangle. Use creative license to make the application more fleshed out. Use JavaScript modules and unkpkg to import any necessary dependencies
[+] [-] croes|2 years ago|reply
[+] [-] world2vec|2 years ago|reply
[+] [-] tolmasky|2 years ago|reply
[+] [-] neilv|2 years ago|reply
[+] [-] marban|2 years ago|reply
Knowing what Widget to build and where to place it > $Invaluable.
Also, you end up with an isolated code fragment that will look different the next time you generate it, so what's the point?
[+] [-] dangerface|2 years ago|reply
Spend half an hour making a simple demo.
Film it 100 times until you get a passable result.
Post on twitter "Oh WOW AI!?! GUYS AI!"
Pick up your VC check.
[+] [-] rchaud|2 years ago|reply
Instead of Coinbase P&L screenshots, it's short demos of what amounts to a TODO app.
[+] [-] ks2048|2 years ago|reply