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

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)

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."

``` 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.

Test page: https://output.jsbin.com/jixoqur/quiet

[0] https://output.jsbin.com/hawelubaxo/quiet

[1] https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74ea...

Incidentally, here’s a briefer spelling of that function (skipping the superfluous Array.from(), using a for loop instead of forEach, and using .append() instead of .appendChild(), cumulatively reducing 8 years of browser support to 5½+ years, which is no meaningful difference; and although I’ve declared Array.from() superfluous, note that this is only the case because querySelectorAll returns a non-live NodeList—you couldn’t do this with childNodes since it’d be being mutated during iteration so you’d miss half the items due to how it all works):

  function moveSelectedItems(fromList, toList) {
      for (const item of fromList.querySelectorAll('input[type="checkbox"]:checked')) {
          item.checked = false; // Uncheck the item
          toList.append(item.closest('li')); // Move the entire list item
      }
  }

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.

The way has been shown with the web. Now many people who would have been paying a designer are using things similar to Wix. A lot of people don’t need top of the line custom work, and most custom work isn’t top of the line. I’ve seen AI frequently, but a bit unpredictably, hit the high notes. https://www.joelonsoftware.com/2005/07/25/hitting-the-high-n...

This low-entropy, repetitive coding is not limited to the user interfaces. We do tend to describe the same structures and logic over and over again in front-ends, backends, and databases.

I am currently building an open-source project that tries to make the definition of applications from database structure to business logic to user interfaces, much more declarative and compact. If you are interested, you can try it on https://sql.ophir.dev

I usually see this in places/cultures that value code-beautification projects rather than delivering value to the customer. Sometimes, they even want to do the latter, but actually do the former.

If you work somewhere that focuses on delivering value, the devs constantly complain about technical debt that will never, ever get fixed. That's the only sucky part.

The problem is, of course, that simplicity follows complexity, not the other way around. Because of that, it's mostly "trivial" and "repetitive" tasks that receive polished tools for easy and compact expression. Anything new and non-trivial usually grows ugly and uncouth for quite some time.

Usually simple, lean, and logical is also beautiful; beauty is not a random quality. But sometimes too simple and too lean is not flexible enough; then that's a case of a wrong abstraction, or of premature optimization.

  Stanley worked for a company in a big building where he was Employee #427.
  Employee #427's job was simple: he sat at his desk in Room 427 and he pushed buttons on a keyboard.
  Orders came to him through a monitor on his desk telling him what buttons to push, how long to push them, and in what order.
  This is what Employee #427 did every day of every month of every year, and although others may have considered it soul rending,
  Stanley relished every moment that the orders came in, as though he had been made exactly for this job.

https://thestanleyparable.fandom.com/wiki/Dialogue#Introduct...

Value, or short-term value? When the codebase gets hard to manage, the value is there.

Cheers and good luck!!!

Which browser/device are you using, and from where ?

The worst I'm able to get when manually disabling the cache and simulating a slow 3G connection is this: a blank page first, then text in the browser's font, then the text re-renders with the right font, then the icons load. The user should never see completely unstyled content.

The site uses "font-display: fallback" so this happens only on slow network connections. If the font loads fast enough, then the fallback never appears.

You can probably just use the system font for the title, and nobody would ever notice the issue.

Case in point I'm in the middle of, let's just call it what it is, an argument, because a new page in a new section of our app has a different design for form elements, specifically single check boxes (think TOS, affirmations, etc). Well we have shared components obviously, so we're reusing the component. No sense taking half a day or more to reskin this one checkbox on one page.

The amount of grief and manhours wasted discussing this checkbox would astound you. Thousands of dollars in payroll over multiple meetings so far with no end in sight because this particular check box just has to be slightly different. The ticket which has been feature-complete for over a week has no chance of being merged in November.

There is the old story about Steve Jobs and the Mac calculator app, where they made a calculator toolbox to build one in order to prevent him demanding seemingly arbitrary changes all the time.

https://www.folklore.org/StoryView.py?story=Calculator_Const...

[1] https://news.ycombinator.com/item?id=38280201

That's because they don't know what they are. They suffer the consequences of not having them though.

The problem is, for every user it's a different 10%.

This is 100% incorrect. Users do care about software being built for them, in a language they can understand and use, and they very much want it to be usable and accessible to them. You'll have to provide me with some citation showing otherwise for me to take that argument seriously.

> I would argue that i18n and l10n belong outside your language's framework (and obviously outside CSS).

Obviously Frameworks and CSS disagree with this assertion. Considering you've presented no argument though, I don't see why you would think that, for example, it wouldn't be important to style your site differently for different languages. Are Americans routinely reading rtl?

Edit: It just occurred to me you think this way because most everything you create is specifically created for you and those like you. You care, you just don't realize you care until it's taken away.

We know this, you don't need to tell us (and it makes your argument weaker that you did...).

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.

The only tool I can say I'm reliably using is Copilot context aware completions work very nicely and it's easy to get used to when it will be usefull and when it wont so it improves productivity.

Copilot chat interface is terrible - I gues it tries to be stingy about the context tokens it's always so much hassle to get it to do anything useful - takes more explaining than doing a google search and read.

ChatGPT is hallucinating so much, mostly in times you want it to hallucinate the least.

I've tried using Midjurney and DALLE to generate placeholder art and memes - it's worse than ChatGPT.

I've built stuff on top of the API and it's very inconsistent and falls apart at totally random unexpected places (not to mention undeterministic).

I want these tools to work, but they are just so inconsistent and introduce so strange failure cases I'm not used to that it's just more trouble than worth over existing workflows.

But there are some times, where something is behaving very strangely, and ChatGPT helps me work through it. Examples are complex SQL queries, quickly combining existing queries, oddities in CSS, etc..

It may not give super-accurate answers, but at least it gives something that I can work with or work on.

I think this makes it a valuable tool, but it's not going to replace developers. Well, sure. Some people will just use ChatGPT rather than hire a programmer - I've worked with business owners who learned to code rather than hire programmers. I don't expect different results in either of these cases, the code will be very flawed, have huge security issues, and not be maintainable.

https://news.ycombinator.com/item?id=22399357

GPT 3.5 should be able to handle this functionality easily on the basis of these demos yet a full-fledged product that does this has yet to make an appearance. Squarespace, Wordpress page builders should be all over this, yet they're not. Neither are any "disruptors" like Webflow. Maybe they know something that Hello World prototyper does not?

If those old goalposts actually helped solve engineering and product needs then there would be huge praise for the achievements.

In the best of all possible worlds, you'd have to deal with the C++ or JavaScript code about as often you have to dig into the x86 or ARM assembly code now.

This extends far beyond just developers. This is a majority of all office work, from data entry to accounting to creative work. Most office work is just doing the same thing over and over again, often times with different people repeating what are essentially the same tasks, just at different companies.

Perhaps to start with, one way to have vastly more creativity/diversity of things people do is to have vastly fewer humans on earth.

This doesn't seem to be the case with UI toolkits. Is that because we still don't understand things well enough to design a decent foundation?

But it also doesn't help that input/output formfactors keep changing. We just about understood what did and didn't work with terminals when desktop GUIs sprung up, by the time those started maturing, we had to figure out how to adapt to PDAs and pen inputs, then came smartphones and tablets, then 3D for a while, then VR, and in parallel to that increasingly exotic "classic" form factors like folding devices with fluid screen sizes, ...

Nope. Don't let the conmen fool you that the incremental changes in HCI justify all the new coats of paint. Form and function changes are happening in parallel.

Fashion has to change, that's just the nature of fashion. Fashion will also spin yarn to justify itself. That's also just the nature of fashion. Don't get me wrong, I want all my software to be palatable to modern tastes. But entropy always increases with time.

The parts of the UI toolkits that change are the least consequential. Round or square corners, buttons, skeumorphism, etc...

Ideally it should be faster. Ideally it should be slower to draw and render it than it is to create the final result.

My controversial hot take on UI is that I don't think graphical tools like Figma encourage good UX habits. Unless you're doing something really creative, (opinion me) you will get better results if your UI starts in a text editor. You want a slider? What you want is:

  Volume (0-11 slider) => Music Volume

And we say that this kind of boilerplate should be eliminated rather than plugged into an AI, what we're talking about is trying to get rid of the stuff that makes people feel like "well, I just need to draw my interface, it's too much work writing it out or programming it." Because web authorship isn't actually there yet, it isn't efficient and easy to do this boilerplate from scratch.

But in a way, visual representations of high-level behavior are themselves an inefficient way to describe behavior. It's lossy, it doesn't always represent multiple states well, people forget to handle other setups or states. You need to draw boxes and move them around and if you want to reposition anything you have to move everything else around it? Nah, it's a slider from 0-11, it should be double-bound to some kind of variable. And I don't want to think about boxes, I want to think about what the control is and what it does. When I start building UIs, the first thing I do is I make a markdown list that just lists the controls. I don't start by drawing.

This is viewed as a kind of programmer-centric way of thinking about design, but I don't think it is, I think it results in better designs across the board. Drawing shapes should be a step that comes much later in the design process. It should happen, you want to do these kinds of visual tweaks to make sure things line up well and to think about presentation, the same way you want to do a visual pass when typesetting a book. It's not that it's not important, butthe visual position of every element is not the part of the design that's most difficult, figuring out what to show the user and when and how to represent it is the difficult part. And in the same way that you wouldn't write a book and start out thinking about the page breaks, it doesn't make sense to think about the positioning of every control before you've figured out what your controls even are.

It's kind of a failure of modern UI/UX toolkits that people are so hungry for visual design. It's backwards, we treat the behavior of controls as an implementation detail and the positioning of controls as the primary design step. It's the opposite, how a control behaves is important, and how it looks is an implementation detail that we may need to change or polish in the future depending on whether our current app-wide default styles work well for the control or not. But that's because people are so used to feeling disconnected from the implementation and are so used to the implementation being a repetitive chore.

This is even more automation of drudgery and easy repetitive work.

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.

It certainly will lead to fun and productive conversations like “it’s already working right there! Why is it going to take so long to get it into the app?!? Can’t you just download it?”

Since well before GPT there has been an argument for making very early prototypes/mocks more obviously lo-fi, such that their visual polish is proportional to how functional they are under the hood.

Beautiful, seemingly “working” UI-only prototypes have a way of setting unrealistic expectations even with clear communication, leading to a higher probability of proto-duction.

I don’t know how many times I’ve come across a project where a terrible system design was foisted on a group of engineers because of the constraints required by a Figma design that was blessed by some exec or other.

Granted there are worse problems in these orgs, but easy high fidelity mock-ups vs wire frames has made it worse.

Almost always its just conflicting requests. Every ticket has a clearly defined user and business value to the person who wrote it.

And these engineers would always boast the most about how they knew best about X or Y.

Maybe that was my fault as a leader -- but I couldn't fix the incurious.

If you want it to do a better job, add "it's very important for my career".

Lol.

Scale

Rotation

Part of why IDs are supposed to be unique on a page.

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.

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?

Go to a civil engineer and ask to create a building that tilts extremely on one side and requires concrete reinforcement with titanium whatever... they will laugh at you.

Do the equivalent to a software engineer or product manager and they will hurry to invent yet another framework to satisfy your request, without giving a second thought about long-term consequences.

My point is that the real world has the laws of physics keeping things in check. With software, we don't have such obvious hard limits and each situation is case-by-case with lots of variables... it gets messy.

A civil engineer can build you that building, but they will think "what a ridiculous architect." With a software engineering mindset, they would happily build that building for you, and invent a new type of concrete mixed with titanium flakes to do it for you. And then they will go on a decades-long campaign about how titanium-flake-concrete is the Next Big Thing and that anyone using normal concrete is a simpleton.

On top of that, a little bit of software can be used by a lot of people, but a little bit of building usually can't, so unless you're Gaudí building the Sagrada Família, nobody really wants to spend a couple centuries building a complex building.

There is no one so willing to do things the hard way as a German car engineer trying to implement something that has existed for decades, and functions perfectly in standardized form.

I'm only half kidding.

We tend to like complex problems and complicated systems and build them.

Ironically it’s much harder to make simple software that covers complex use cases than it is to make complex software to do the same.

It sounds to me like the commenter has found a subset of his work which can be sped up significantly with chatGPT and is using that to continue conversations with a potential client. Pretty cool if you ask me.

It’s called Expectation Management. It’s how successful business is done.

Marketing 101: Under promise, over deliver.

P.S. Apple is quite good at this IMHO. I notice they often very quickly go from product announcement to product availability. My theory for why this is good is that there less time in between for people’s imagination to run wild and fill in the information gaps with their own ideas that the actual product might not satisfy. Expectations remain ground when their customers receive the product vs a product getting hyped to the moon such that it’s practically impossible for it to ever live up to the hype.

Right now with the increased productivity, it leads to customer engagements that previously wouldn't have been possible for me. E.g. now it's feasible from a cost standpoint to let me as a freelancer build internal tooling that previously would have been to expensive in total. It's also easier to deliver initial MVP milestones for projects for a price that's in a much more comfortable range for smaller companies.

Yeah, that advantage may go away, but just like good "googling" was/is a skill that can set you apart from your peers, proper usage of LLMs is a skill as well that needs to be learned (and that many won't).

If it takes you a long time to build a form, you've done something very very wrong.

It’s turtles all the way down :+)

However, you can paste in an image, or you can click the paperclip on the bottom left of the prompt area to upload an image (or other files).

2. Switch model to ChatGPT 4

3. Click the attachment/paperclip button in the prompt bar

4. Send

(So actually technically I think that means no, it's not using ChatGPT, but I don't think that was the point.)

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.

Joking reply: Have you seen modern software development?

Joking-but-not-really reply: I wonder if someone could train a "bad AI code to human-maintainable code" AI.

https://platform.openai.com/docs/guides/text-generation/repr...

It's like a revision control system where when you submit a commit that changes one line, which it faithfully records, it also records a change in dozens of other lines in the file. (Which leads you down the merry road of Stable Diffusion where you can "inpaint" that one line, but now it's not able to adjust the rest of things to accommodate that change because you told it not to...)

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

Of course metaphors have limits, but the limits of this particular metaphor hide all of the flaws of this technology.

Look at me I'm old yelling at clouds!

Ok, dreamweaver code was ugly and unusable when AI generated code is not too bad (sometimes). But still, I also feel we kinda were already close to where we’re at today.

(in Jest, I know it doesn't solve every problem!)

For web apps the level of custom logic makes it unavoible to just code. Since web developers tend to be coders they would code static sites too. And use what they are most comfortable with, usually React.

They're made with Wordpress, Squarespace, etc.

Webflow has been around for a while and I’m sure they implemented AI already (I didn’t even check). Other React-based tools surely also exist, but have an even smaller user base.

As others mentioned the closest descendant of dreamweaver today is most likely Webflow.

Well, no one else on the team was that familiar with java swing so they couldn't work with it, so one of my coworkers had to spend an hour rebuilding the panel in the UI builder that the rest of the app worked in. It produced a perfectly functional UI that had all the features requested and could be maintained by anyone on the team. Sure, the raw java file was twice as long, but who cares? It gets compiled.

I was enlightened on that day. "Elegant" is worthless in most cases. Five years later that entire app was rebuilt as a web app and nobody gave a shit whether one of it's option panels was artisanally hand crafted with care and love or spit out by an actually really good and regularized UI builder.

We are data plumbers. Nobody cares if the pipes you laid out are arranged to look like the mona lisa, and it's probably worse for the customer and maintenance that way anyway.

VB was highly opinionated; it made native windows-style UIs and nothing else. Nobody was taking arbitrary mockups from designers, with a wildly custom look-and-feel, and replicating them down to the pixel in VB.

Today, most product GUIs are part of the brand. For better or worse, every company wants a distinctive look and feel and set of UI behaviors. This requires the tools used to build them to be much more complicated.

You could replicate VB in a browser. Many people have done roughly that. But nobody uses them to build products, because their company doesn't want boring/generic UIs.

I'm sure it was some monstrosity of a hack. I didn't understand it at the time.

Don't get me wrong, these new tools are cool, and I imagine they'll be great for prototyping small things quickly!

Nobody that has ever had to maintain software is going to look at this and be impressed. Without a reproducible and predictable set of transforms from the source artifact to the product artifact(s), maintenance of software generated in this fashion will be impossible. The concept of a "localized" change doesn't exist; you have to assume that any and every change risks breaking the entire product.

This is, of course, just another version of folks looking at something that mimics a (structured, evolved) human activity and assuming that it is in fact reproducing that activity, rather than just copying some subset of the visible consequences of that activtiy.

The interesting part is going to be stitching such parts together into a whole which has no direct analogs, but each stitching step does.

Recall that this is an LLM; it doesn't "think", it's just cutting and pasting "likely" scraps of things from its training set. At this point, the vast majority of those scraps were human-generated, so a) many of them work, and b) copying them in this fashion is plagiarism ("the offense of taking passages from another's compositions, and publishing them, either word for word or in substance, as one's own")

There’s no reason HTML can’t do a lot more than it does out-of-the-box, saving crazy numbers of developer-hours and piles of user frustration every year. It just doesn’t.

I want to make a 3-d world based on photographs (even stereo) and visual art and to do that I need to import JPG or PNG images. No can do. They have a short list of textures they supply, but you cannot import media assets like images, audio, video, geometry, point clouds, whatever, ...

McDonald's would insist on putting a Coca-Cola logo on the cups and so would every other brand.

Yup. Been a long time since I've used an un-customised standard button outside my personal projects, no matter how much R&D has been spent by Apple on working out what it means for a UI to be good.

I think just regretting an old feature long gone without proper context is dangerous. If we are to bring back those approaches we have to keep in mind exactly why they went away in the first place.

I'm not sure you're replying to the same thing. I never used VB much, but Delphi was not and is not no-code. In fact it emphasised using libraries a lot ('components' in its terms are classes provided by libraries) and the UI had a text description, which was streamed and created at runtime.

Delphi today could indeed create something doing this just as fast, and you wouldn't draw a trackbar and hope it's recognised in the image by the AI... you'd drop an actual trackbar.

Delphi's visual editor allows you to position, link together and configure visual and non-visual components in design time, automatically serializes all the components into text file and in runtime your program deserializes these components from the resource embedded in the program's binary file. It also allows you to create handlers for events like OnButtonClicked or OnDBConnectionOpened where the usual arbitrarily complex programming happens.

The first result from google showing what this looks like: https://www.youtube.com/watch?v=AyWm24ekSVM

a) For UX people who have minimal programming knowledge but need to produce mockups.

b) For people like me who might want a basic UX to start with for demo purposes.

It isn't uncommon that you prototype with a tool and it is super fast but before you can launch for real you need to rewrite everything.

At that point it is difficult to know if the prototype was valuable. Certainly quickly visualizing is good but a prototype tool that is non functional is even faster to use.

Having a tool that allows easy drag and drop without any friction on the generated code (including difficulty of using that code) while also having all the powers of HTML would be really cool.

Such a tool wouldn't be a beginner tool but any that fail this and can't really go all the way to final product gets discarded as "I am going to have to rewrite anyway".

Less of a "I am too good for that" more a "not a useful abstractions level" when considered holistically.

If you want to use low code website builders, feel free. If that suits your work style and the projects you're building, great.

But you will never develop the skills you need to actually build software. A person who spends their life using website builders instead of writing software will never be able to build their own website builder, for example.

Some of us actually like to have the skills to build the tools ourselves.

If you want to call that peer pressure, then sure. It's peer pressure to elevate your own experience and attain mastery, instead of settling for only ever using tools that other people built for you.

Similarly if you use a code generating tool written by a software engineer and then adjust the code output, it doesn't make you a software engineer.

Yes, software engineers can use those tools, but they're limiting their growth as engineers if they rely too heavily on those tools.

If that's peer pressure, then I am unapologetic about it. I'm not hiring people who can't build their own code to work as software engineers.

I've tried Glade before but the time I used it I didn't find it a particularly pleasant experience

I still think it's impressive that AI can just look at 2 rectangles and discern slider though.

Ignoring that though, I t’s fair to make this point for the current level of capabilities, but look at the trajectory… in a year or two when the training set has lots of examples of people using this, it should be pretty competitive.