I have kind of the same opinion. Maybe more provocative. When people show me figma to HTML with AI I tell them “have you ever heard of Dreamweaver?”
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.
Not sure about Dreamweaver, but the fact that no Frontpage equivalent exists this day and age, and armies of developers are grappling with HTML, React and GraphQL (e.g. Gatsby) to generate what are essentially websites, is very surprising.
I'd like to talk about today's sponsor, Squarespace.
(in Jest, I know it doesn't solve every problem!)
I used to look down on it but when I heard it handles payment it blew my mind and I decided I'd rather use it myself if I ever make a shop instead of building it myself. To quote a random guy "I trust their code more than what I wrote at 2am."
I am a SWE. When I needed a website for a small business I was running, I used squarespace too. If you just need a static public facing site it's absolutely great.
There are countless of no-code tools to build landing pages, static site content.
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.
My friend works on a low code system marketed to small governments. (Basically just CRUD builder optimized for bureaucracy.) There's definitely a niche for it, it just hasn't caught on much for some reason.
Of course it exists, it’s just not produced by Microsoft and therefore relatively few people use it.
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.
That's because things that were made with Frontpage back in the day are not made in HTML/React/GraphQL today.
They're made with Wordpress, Squarespace, etc.
Are you sure? I remember one of Dreamweaver competitive advantages was that it produced much cleaner HTML than it's competitors. FrontPage was the big offender with awful code.
Toward the end of its life, Dreamweaver's code was quite readable. Webflow today is kind of an equivalent, and also puts out relatively readable HTML. I think most of the reputation comes from people looking at its early output.
I’d say nobody who “hand crafts” code finds any generated code readable. AI almost puts a dent in that, but even that often produces really ugly code.
People also produce really ugly code.
To be honest I can’t remember when was the last time I used dreamweaver but it sure wasn’t towards the end of its life. So, it could very well be that it got better after my last experience. What I remember was way too many tags and almost unreadable classes or repeated styles. It was not possible to directly take over without quite some re-writing.
I used Dreamweaver significantly back in the day, and use Figma professionally today. I see what you're saying, but there's no question about them being equivalent in functionality, except insofar as I do not consider generated code from either of them particularly useful. In that respect they are the same, but in every other way Figma is 100 times better.
We're so close! Now we just need to reinvent Flash and life will be complete again.
There are still tools to do it. I think the reason they are not more popular with programmers is that it's basically some stupid subconscious thing where we are afraid of being accused of being users or beginners. Not something we realize consciously, but anything that doesn't involve complex colorful text naturally gets kind of peer pressured out because it looks like a "beginner tool".
I first started programming with VB6 and have yearned to make a GUI program as simply as I did then. Can you point me to something as simple?
I've tried Glade before but the time I used it I didn't find it a particularly pleasant experience
Windows Forms for .NET Framework 4 using Visual Studio was (is?) a simple Windows-only option.
I used VBA and Tk. They were good. I always assumed front end web people have similar tools?
I also used VB6 back in the day. It was great.
Sadly I, like all programmers, have been peer pressured or something into avoiding tools like that. But I know they exist. I also made one several years ago. (No one was interested).
But I think if you search for "RAD" or "Rapid Application Development" or graphical component based development may get quite a lot.
I think that there are several plugins for WordPress that have similar functionality, although less code integration.
Maybe search for "drag and drop React editor".
Glade is actually annoying enough that it's easier and faster to construct your UI in-code.
You are missing a huge caveat of those tools. They tend to have limits in functionality.
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.
That's a good rationalization for doing everything manually, but I don't believe it really holds up. I think it comes down to some social psychological effects that as I said are subconscious. So people don't realize it's effecting their decision making.
When they decide not to use those tools they will use rationales like you said rather than admitting that they felt peer pressure.
Some people want to be good software developers, not just good website builders.
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.
You have perfectly illustrated the peer pressure I am talking about.
By the way, I have been programming for 38 years on many platforms and have built my own drag and drop UI editors and frameworks. I don't use these types of tools today because they are not popular and because of psychological factors as I said. But I still think that it would be more logical if programmers used them more often. And the times that I used them in the past they did increase my productivity.
The types of tools I am talking about often require editing code to customize functionality. They are not no-code tools.
The most up to date version might use something like Streamlit with a drag and drop editor.
I get your point, but it only applies to the most simple of these examples. This can do all kinds of stuff, for example look further into that thread and you’ll see it implementing tic tac toe. The tool works by basically sending a screenshot of your diagram to GPT4 and saying “implement this”.
The tic-tac-toe example really makes it clear that oh — this works by plagiarism. Until you see that one, it's kind of easy to forget.
The industry has a number of repeating tasks ("Make me a CRUD app"), so "plagiarism", aka "following an example", can go a relatively long way.
The interesting part is going to be stitching such parts together into a whole which has no direct analogs, but each stitching step does.
What about that example makes it clear?
Which in turn only works for simple stuff that GPT-4 can implement from a single screenshot, and is, as OP pointed out, non-deterministic. The code OP is referring to would have been written to integrate with the rest of the project, to connect to data stores and services that the screenshot has no way of knowing about. People built huge applications in VB and similar tools.
Don't get me wrong, these new tools are cool, and I imagine they'll be great for prototyping small things quickly!
Human beings build stuff non deterministically too. The key is just to give the tool more information along with the screenshot, for example showing it your current codebase so it writes code using the same conventions.
I think this is kind of missing the point. The fact that the underlying implementation is not a hand-coded-deterministic one is the interesting thing about this demo. This is clearly going to be useful by making people more efficient and only going to get better with time.
I, for one, love to have my code generated non-deterministically. Makes debugging so easy.
Now, instead of looking in some cryptic symbols which you don't understand, you just mash "regenerate" button until it works. Can anything be more simple? Of course, with newer models you need to hit that button even less, it's progress, isn't it?
I’d just ship drawings and have it generate the code at runtime.
There was a reason why we moved away from this. Everything is code, the UIs for creating such interfaces are just abstractions. The code generated by those no-code approaches to interface design was horrible and would break down quite fast in larger projects. Maintainability for such interfaces was non-existent.
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.
Everything is code, the UIs for creating such interfaces are just abstractions. The code generated by those no-code approaches to interface design...
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.
That's not how VB6 or Delphi work.
Delphi's visual editor allows you to position 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
I don't use these tools (I do backend dev), so perhaps I'm mistaken, but the benefits here are, I assume,
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.
And don't forget this stunt took some kilos of Co2 released in the atmosphere to run the AI.
I would like to see an actual report on this
My laptop from multiple years ago (6GB VRAM) can run local models with decent performance. It's my understanding that the major energy cost is from training the models, which you do somewhat infrequently, and that generation isn't nearly as costly.
Someone who knows more, please correct me if I'm wrong!
I think we'd all be gladly sitting atop high abstractions like that if not for the fact that brands pay the bills, and brands want custom experiences. Website and app design often begins with "what does a button look like," and design tools focus not on prebuilt widgets but on paths and fills, because the last thing a brand wants is to speak with different tones in different media. Their software has to feel like their stores and advertisements in order to create a brand-consistent customer experience. Design systems are a hot topic today because what brands got with this design method is a different voice in each of their sites and apps, because they're all independently custom.
Website and app design often begins with "what does a button look like,"
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.
This is what killsHorizon Worlds,which is Facebook's earnest answer to the problem of making VR authoring much easier than "making a video game"
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.
HN has this weird nostalgic thing for VB and Delphi, but I feel that most people who express it either haven't actually used these tools or don't remember it well. There's no way to do responsive interfaces with it. If you want anything but your OSes native controls, you're in the world of hell too. Even localisation is a problem. No unit, no integration tests. WYSIWYG editors mean that form files are changed automatically and it's often not realistic to review the diffs. And the languages itself — while being adequate for their time, they're don't even have support for functions as first-class objects, so compared to modern alternatives they're almost unusable and require enormous amount of boilerplate.
No way to do responsive interfaces?
Oh sweet summer child. (if you are going to call us weirdly nostalgic)
There were ton's of methods - from extremely manual code-based detection of window resizing events, then subsequent calculating and scaling contained controls, to a myriad of third-party libraries/components that would provide an automatic resizable host container for other controls.
Localization was not a problem - VB6 supported 'resource files' like every other Win32 app. Unit and integration tests were possible - but uglier with visual forms - typically requiring third-party products, and/or low-level Win32-API integrations. But in reality - you would abstract all of your business logic into classes/modules/units with very little within the UI, so that those would be unit-tested, instead of the UI.
Now - don't get me wrong, VB was limited in many many ways, and I am not nostalgic for it - but, it was more capable than the picture you are painting. Delphi even moreso, as it had easy and direct access to the entire Win32 API and could handle threading and pointers as well.
You couldn't have a conversation with Dreamweaver.
Is it because you couldn't have a conversation with Dreamweaver that you came to me?
You're absolutely correct.
When we went to the browser we took 30 years of UI development knowledge and UI/UX principle and flushed it down the toilet.
Only very recently have we started to gaincomposabilityin browser UIs through things like React, and it's a sad facsimile of the widget composability we had in WYSIWYG UI development on PCs in the late 1980s and early 1990s.
The web is a shit UI platform, but that's because it wasn't designed to be one. UIs were shoehorned into a hypertext system designed for viewing documents.
It's also a shit document platform even though that is what it was designed for.
Keep in mind this could equally be a picture of a napkin.
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.
Also old(ish) and agree, everything in here could just be a drag-and-drop component.
You still see this using just about any major native UI toolkit. They may not be RAD-fast, but all kinds of elements and interactions that require custom and usually-janky JavaScript to implement on the Web are available “for free”. And actually work correctly, interact with the rest of the toolkit the way you’d expect, and i18n and a11y and all that work correctly and consistently.
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'm also reminded of Steve Jobs's Interface Builder demo:https://www.youtube.com/watch?v=dl0CbKYUFTY&t=70s
I still think it's impressive that AI can just look at 2 rectangles and discern slider though.
It has nothing to do with the browser, it has to do with how opinionated your framework is.
VB washighlyopinionated; 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 thebrand. 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 the company doesn't want boring/generic UIs.
Once upon a time, there was a fresh new operating system, the next step, being demo'ed in the Graphics pavillion of Comdex. Some huge nerd stood there, dragging things around with a mouse, 'proving' that you didn't have to be a programmer to build applications.
A decade after that, something floated around for a year or two called Visix Vibe, which gave the same thing, but for this relatively new language (at the time), Java.
Every few years, maybe 4-5 or a decade or so, someone gets the itch to make all the complexity fade away. Eventually though, they build an OS.
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.
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.
I blame Microsoft for having five different UI toolkits across three languages. Web browsers aren't that cross platform, is the GUI toolkit that is, so use that!
Which of the 7251 reactive JS frameworks do you want to pair with which of the 15281 css frameworks to achieve the result?
Does the user care?
Yes. Almost none of those get i18n, hotkeys, shortcuts, taborder, screenreaders and other accessibility right.
Most users don't care about any of that, either. And I would argue that i18n and l10n belong outside your language's framework (and obviously outside CSS).
Accessibility is legally mandated in many cases and if you ever want to sell your app to government or enterprise customers, it’s likely to be a requirement.
Most users don't care about any of that
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.
Most users don't care about any of that, either.
That's because they don't know what they are. They suffer the consequences of not having them though.
But if you use a specification language, then how can you build a pixel-perfect, unique set of sliders that’s subtly different from everyone else’s?
IME the real "problem" (maybe just interpersonally) is when you have a product person, or a designer, who insists that something needs to be pixel-perfect and subtly different when it objectively does not. Maybe even when it is a grey area but the juice isn't worth the squeeze.
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.
The usability article [1] from yesterday suggested a similar problem - design-oriented people want to put their graphical mark on their GUIs, and it comes at a significant usability cost. GUIs are most usable when they are consistent - everyone uses exactly the same UI elements, with the same exact color schemes and shapes and sizes, to mean the same things every time. And that’s…not what people do anymore.
Dear god another “engineers don’t get the difference between design and ux and complain that everything should just all be the same” thread.
I swear the art form here is to provide the product people and designers with a tool/framework where they make the choices and they suffer the constraints, then they have to blame themselves when they can't do it.
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...
Exactly. Look not at the requirements but at the likely space for requirements over time and build an engine that can be tuned/tweaked/configed to meet all the likely requirements. Makes testing a little harder but makes dev and product happy.
Hook the resulting GUI code up to customizable styling?
I have been thinking about that a lot recently. Where I work, we spend a very small fraction of our time on building things that are unique to our business. Maybe we are doing something very wrong, but I am under the impression that most of the code that gets written anywhere is extremely low-entropy.
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 onhttps://sql.ophir.dev
we spend a very small fraction of our time on building things that are unique to our business.
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.
"Code beautification" is not the point, but a tool. Smaller and clearer code could be faster to write, and harder to make mistakes using. This is why e.g. Rails can be so good at producing certain kinds of apps very quickly and in very few LOCs.
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.
Hopefully this sounds like helpful feedback instead of annoying nitpicking: I found that the substantial "flash of unstyled content" when the page first loads to be very jarring/unappetizing. I think it would be worthwhile to investigate one of the approaches that can mitigate this FOUC effect.
Cheers and good luck!!!
thanks for the feedback ! I cannot replicate that on my computer with any browser, and all seems normal to google pagespeed insights as well:https://pagespeed.web.dev/analysis/https-sql-ophir-dev/4o7q6...
Which browser/device are you using, and from where ?
My email signature sometimes says "software done right is always solving novel problems." I wish people always had the time and mandate to find the simple generization of their sequence of one offs.
Huh? UIs should be repetitive not impressive or original, so users don't have to learn different new interface for every app.
UIsshouldbe repetitive, but we keep reinventing them anyway to satisfy the vanity of product owners/designers/managers/clients/... and built entire industries around making slightly the UIs slightly more differently than the last time.
Usually things naturally get mature and stop changing so much (e.g. some software reaches such maturity level that it starts offering LTS releases).
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?
In my experience it's because every time you give a page or product spec to a designer they give you something slightly different based on however they happen to be feeling that day. Combine that with whatever product people do, and you get basically random UIs for each task.
Is that because we still don't understand things well enough to design a decent foundation?
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.
I suspect a large part is that the visual nature of the topic simply lends itself to endless bike shedding and fashion cycles; maturity and stability are going to be anathemata in these contexts.
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, ...
OK but if it's that common it shouldn't take more time to create the final result than the time it took to draw it and render it. We don't want to spend time at such a low level abstraction, we want to be describing higher-level behavior.
it shouldn't take more time to create the final result than the time it took to draw it and render it
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:
<input type="range" id="volume" name="volume" min="0" max="11" />
<!-- And then you get more boilerplate double-binding the input and wiring it up to whatever component it controls -->
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 controlisand what itdoes. 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.
So then every app should be a CLI? Not sure how you can actually believe a statement like that.
I think the parent's comment isn't saying that UI should be wildly different from each other but moreso highlighting that this is a prime usecase for an easy abstraction over the top.
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.
Do you really care about extensibility and maintenance when you could just generate an entirely new component when you want more features or need to upgrade the library?
If the team that came up with the prototype assumes that responsibility, then no, I don't. I'm sure an AI will understand how to refactor the codebase on an adhoc basis without creating any problems down the line.
Well yeah, you just put the spaghetti into another black box and have that deal with it
People used to write assembly language manually too, writing the most simple control structures over and over hand crafted for each case.
This is even more automation of drudgery and easy repetitive work.
I welcome these tools but when you need to be completely accurate with something, you have to drop the nice graphical tool and actually edit code.. and then it's a mess. Either the code is super complex to humans or going back to graphical mode breaks everything.
Html supports a lot of UI widgets now but everybody keeps reimplementing their own. And because nobody is using them they arent improving so nobody is using them so they arent improving.
Well billions of human beings are living remarkably repetitive and unoriginal life. Doing few categories of work, living in few categories of home, and eating few varieties of food. Same for entertainment, transport and so on. Most people are just running in rather tight loops.
Perhaps to start with, one way to have vastly more creativity/diversity of things people do is to have vastly fewer humans on earth.
Can we please stop posting twitter links? It's a horror show of a website, especially if you don't have an account.
I’m confused - what are you specifically having problems with?
I’m not logged in and the site loaded fine on mobile and then again on desktop. The video played immediately, I didn’t see any ads. Are you hoping to be able to comment without an account? That’s usually not how things work.
I’m guessing this is another case of Elon induced nerd grumpiness?
Not who you’re replying to but: Im on iOS using the HACK app and the built in safari web view wouldn’t play the videos, and same in chrome. So now I’ve given up.
Also, if I clicked into the tweet (xeet?) in the web view and hit “open in system browser”, I just got an X “something went wrong” page. Also if I opened the first video that failed to play, closed it, and clicked the second video, the first would attempt to load again instead until I reloaded the whole page and clicked the second…that still failed to play
Im on iOS using the HACK app and the built in safari web view wouldn’t play the videos, and same in chrome. So now I’ve given up.
I use HACK on iOS without any account and everything renders fine, the video plays with no issue for me.
The cookie terror footer? The additional giant sign up bar? The fact that after a few seconds it will just hide everything behind a giant black pop-up about enabling notifications?
Malware websites are less awful than this.
Also that it has stopped showing either the post being replied (unless RT-replied) to or any of the replies so you just have one item with no context available.
Never been a big fan of twitter, but it looks the same to me as it always has. It's never beenthatuser friendly for those not logged in.
Anything Elon is bad now though apparently. Seen quite a few comments hoping the Starship launch fails tomorrow, strange times we live in.
but it looks the same to me as it always has. It's never been that user friendly for those not logged in.
You used to be able to see context, not just a single tweet. If that doesn't make a difference to you in cases like this I don't know what to tell you.
Also when logged out on mobile I find that it just fails to load and you get an error with a try again, and that try again never works.
I want to see the twitter comment not the sole tweet
One forum I frequent automatically replaces Twitter links with nitter.net, which still isn't great but at least lets you see the post.
It’s a lot better as it lets you see the replies / thread which xitter has stopped showing and does not drive engagement it.
xitter has stopped showing and does not drive engagement.
In the specific case in Xitter, I perceive that as a good change. I like seeing what was linked to, without otherwise getting engaged there.
Using nitter is the part which avoids engagement-ing with xitter.
Not having any context is the part which makes links to xitter useless, most of the time you get a link to a reply but without context it’s difficult to impossible to understand what it’s about, and the link is functionally useless.
I know this doesn't help you in the particular circumstances you mentioned, but: for that I would place the blame on the person who provided the link, for not giving sufficient context to understand.
for that I would place the blame on the person who provided the link, for not giving sufficient context to understand.
I would not. First, I would assume logged users do get context so they likely are not even aware of the issue, and second that is what link for, if you have a to quote everything you're linking to in full then the web is broken.
xitter is what's broken.
install the nitter app (available on fdroid) and associate Twitter/x.com links.
problem solved for good
Does the link load so you can see the content OP thought worth sharing here and join the discussion? Yes. What else do you need?
Nope, it didn't until I hit refresh for the 5th time, somehow Twitter/X has been broken for me where it willalwaysdisplay the "signup" page even for non-NSFW content.
I need it to load the content when I click, it's pretty simple.
excluding the popups to sign away my privacy, 90% of the time it asks me to login and shows no content.
What else do you need?
The twitter comments.
Good luck trying to make the posters stop posting to Twitter / X.
It's almost as if lots of peoplestilluse Twitter / X to post content, yet a year later people still crying and moaning about it.
The hundreds of millions of users still posting their content on the platform don't care regardless.
The problem is that the content is not accessible unless you're logged in, with some recent changes. And even worse, it doesn't tell you what it's hiding, so you don't really know that you're only seeing parts of it. Makes it really confusing when linked to a twitter post.
It loaded faster than a YouTube video would have for me. Since I don't have an X login, there wasn't even a temptation to get drawn into any other pointless content. I like it.
FF + Nitter Redirect extension solved most of the problems I had with Twitter.
There should be an extension or greasemonkey-script that will allow you to curate the frontpage to your own liking.
Meh the paywall / medium / etc. ship has sailed. Post a workaround if needed.
Works ok for me in safari. This post shows a video and I was able to watch and close with no popups or anything.
Certainly the least scary horror show I’ve seen in a while.
I can help you create an account if you need.
>Can we please stop posting twitter links?
Friendly fyi... the moderator allows Twitter links and previously explained the reasoning:
>We're not going to ban Twitter because, like it or not, it's the source of some of the most intellectually interesting material that gets posted here.-- fromhttps://news.ycombinator.com/item?id=30430760
There's also a related moderator's post about allowing "paywall" articles :https://news.ycombinator.com/item?id=10178989
Solved!
Hear, hear
You could choose not to click on it.
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.
The demo shown in the tweet seems pretty similar.
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.
I don't know if "do everything manually and slowly so that you never have to set realistic expectations" is a great way to do business. Being worse at your job on purpose isn't typically a great strategy.
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.
I don't know if "do everything manually and slowly so that you never have to set realistic expectations" is a great way to do business.
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.
i'm not replying about the concept of under promise, over deliver, but more like.... why would you avoid a tool that helps you do something quickly because you don't want to explain to your client that some steps aren't as fast to do as others.
The third time, when requirements have grown enough to be beyond what ChatGPT can deal with, he'll be angry that timescales have exploded.
Or worse, they'll feel they've been scammed, and that you're a fraud.
AI or not it's not a good strategy, in life and in business, to lie regarding on what you can actually do/deliver.
its a tool. use the tool. I don't care if the house is built using an old fashioned hammer or a nail gun. I do care if you used nails when you should've used something else, or used the wrong nails.
This comment is so relevant.. people underestimate software complexity. In software services, often it's not the algorithms that are hard to implement or maintain, as they often have very clearly defined input and output requirements, and you can and test them, but its the ever changing and regularly patched up business logic that evolves the system into a complex and fragile service needing careful maintenance.. Can't imagine an AI system taking 'charge' there as a subtle mistake by the AI system would then need a human intervention to 'fix' it which by then would be close to impossible. At that point you can't also make use of AI beyond a co-pilot role as anything complex would need line by line and careful inspection by a software dev.
Yeah, let's see about the long run.
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).
"Your scientists were so preoccupied with whether they could, they didn’t stop to think if they should."
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?
The software world is much more flexible than the real world (yeah , I know, you're taking to Sherlock here).
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.
I don't think this is about flexibility. It's more about culture. Software engineering culture does not value simplicity, and actually seems to value complexity. Other engineering cultures place a lot more value on simplicity, and its associated values of reliability and risk mitigation.
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.
Also programmers tend to think we’re very smart and clever.
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.
Basic "fill out the fields then submit" forms are simple. But many use cases these days want intakes or onboardings like apps, then complain about complexity or timelines when they fail to realize the requirements spawned 45,000 branching paths.
Yah GPT cannot create a form that has that kind of UX, I promise. Try it.
Not just simple, it's a thing I'd never even ask a coder to do anymore. I'd pay for Hubspot or some kind of form-management SaaS tool.
how do you put a screenshot into chatgpt?
I believe it requires plus*, but I’m not sure.
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).
you mean plus i assume
Just snip it and paste it. If you're in Windows, I use the Snipping Tool Windows + Shift + S. Then just go to ChatGPT4 (Pro only) and hit paste.
They are probably using the new GPT Vision API that OpenAI just added this month.
It’s most likely using chatgpt in the backend
No need to guess, there's a thing at the bottom asking for an OpenAI API key at the bottom, and it can't function without that.
(So actually technically I think that means no, it's not using ChatGPT, but I don't think that was the point.)
I think it's accurate enough to call the OpenAI API the ChatGPT API since it's using the same models. But yeah, technically not the same thing.
Shudder at the thought of every client expecting this for granted
They do that anyway. I've lost count of the number of times customers have asked me for something that "could be knocked out in an afternoon".
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.
If this was an e-mail or chat conversation with a client, imagine if your client was asking ChatGPT the best way to formulate his requirements to you.
It’s turtles all the way down :+)
Yeah, but maybe the client didn't want you to expose his data to ChatGPT.
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.
The gpt4-turbo api is now deterministic
It isn’t. It’s “mostly deterministic,” whatever that means.
https://platform.openai.com/docs/guides/text-generation/repr...
From the link: Sometimes, determinism may be impacted due to necessary changes OpenAI makes to model configurations on our end. To help you keep track of these changes, we expose the system_fingerprint field. If this value is different, you may see different outputs due to changes we've made on our systems.
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 youseenmodern software development?
Joking-but-not-really reply: I wonder if someone could train a "bad AI code to human-maintainable code" AI.
I'd prefer a "bad human code to AI-readable code" AI.
If you can so easily and cheaply generate a new version of the app/widget, why would you even use traditional version control?
Generally because although you can easily generate new versions, it is difficult to generate a new version that is different from the old version in a specific way, without also being different in 100 other ways that you didn't want.
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...)
This reminds me of what I’ve been saying to friends… we will either see al lot more layoffs of us software engineers or another big boom because the technology is moving way faster than normal humans can learn. Non tech people will just hire software engineers to do it for them.
It’s like autotune.
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
Unlike software, a song doesn’t need to be maintained to keep working. A song doesn’t need to grow in complexity as more people use it, and a song can’t contain subtle bugs that steal listeners’ credit cards or damage other songs.
Of course metaphors have limits, but the limits of this particular metaphor hide all of the flaws of this technology.
"Entirely new genres" of anything is unlikely from ML models trained on existing work. Someone using AI to implement an entirely new idea will be frustrated as the AI keeps gravitating toward convention.
It's more like autotune in that "literally everyone will use it all the time."
That was my initial gut reaction, this will be an utter nightmare to customize and integrate. Wonderful for prototyping though.
Either LLM / ai becomes perfect or we will start writing code/frameworks which makes it much easier for LLM/ai to use them.
I think a lot of these demos aren'tnecessarilytrying 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
Ugh Twitter / X. That site needs to die - it’s honestly so broken, none of the redirects seem to work today.
I'm trying to get people to pronounce it "eggs" as in
Eggs, the site formerly known as twitter. So instead of a tweet you "egg something".
I think it gives the site the dignity it deserves.
Not bad. I still prefer Xitter though. The X is pronounced 'sh'.
That's a good one; another good one is birdchan.
i like Xitter and Xcrete
Right, but the letter "X" may be pronounced "Eggs" and people may not even notice that you're not pronouncing it in a cool "Dimension X" scifi way with reverb and stuff.
Double Yew, Eggs, Why, Zee / Zed
Eccentric billionaire Elan Mosk, while cosplaying Howard Huges, Laid an egg that "he is going to make a wooden rocket that can land on the fondue oceans of the moon"
[edit: added the zed for friends who count on their hands starting at the thumb not pointer finger]
Lay down some yolks
What still miraculously works for me is s/twitter.com/nitter.net/
I installed this extension, it made me hate Twitter less by not having to use it.
https://addons.mozilla.org/en-US/firefox/addon/nitter-redire...
At this point I’m assuming this is broken on purpose (for visitors not logged in).
I wonder if people still on there realize that their posts are essentially not visible for unregistered users anymore without jumping though major hoops.
What redirects? Everything works fine. Not a single time I experienced any issue with Twitter since the acquisition.
Interesting fact is that according to the statistics of DownDetector, Twitter is more stable now. It was down more often prior to the acquisition.
Lets make ourselves redundant.
At least I won't have to relearn JS every 2 weeks.
These little demos of toy UIs are cute but humans can still hold the context of a whole codebase in their heads.
We're not quite at the level (yet) of feeding a whole codebase to an LLM and making it add features or make changes while understanding the big picture of the problem being solved, being consistent with the design principles and coding style of the overall existing codebase. And I'm not even talking about creating complex UIs where performance matters
Another issue I've ran into a lot is staleness of the knowledge the LLM was trained on, a lot of libraries and frameworks get really frequent, quite often breaking changes, and LLMs have a cutoff date.
Try using ChatGPT for something like Godot's GDScript, it will always try to use old Godot v3 style scripting because that's what it's been taught, and the whole documentation for Godot v4 is not something small enough to just fit into context
Maybe this would be a better fit for some agent type workflow where it can decide what to lookup from the documentation and then retrieve it, but it also needs to know and decide what to look up and how. There is still a lot to figure out
We're not quite at the level (yet) of feeding a whole codebase to an LLM and making it add features or make changes while understanding the big picture of the problem being solved
We are one step away from that. All we need is a more advanced form of fine tuning.
lol, this magical thinking; also not AI, it's ML
If there is one good thing going to come out of EVEN the fairly clumsy LLMs, it is that we probably can forget about this js frontend framework crap and can focus on work instead of figuring out what the taste-du-jour is. It won't matter; the LLM will translate it.
Probably not. Instead we’ll be stuck using the old frameworks driver because LLMs won’t be able to learn anything new without years of stack overflow examples.
Don't worry, in 5 years it will just be another layer in the JS dev stack, so then not only the version of npm, dependencies, docker, and 3 API keys have to match but you'll also need the correct commit of the 20GB LLM so the build doesn't fail. All for the sake of simplicity and increased productivity, of course.
We’ll have dependency files for LLMs in our mixture of experts config and we’ll get paged at 2am to update a version of an LLM because there’s a new social engineering CVE making it vulnerable to disclosing secrets.
More like - let's give ourselves better tools. The people who hire us won't be able to build this stuff themselves no matter how good an AI you give them. The only developers who will lose their job are ones who fail to embrace AI.
You don't have to now too
Much like cockroaches JS will survive a nuclear explosion
Earlier in the year I wanted to understand LLMs and GenAI so I tried to push their limits to see what broke and what didn't. One of my projects was to build a blog/site from scratch. I had 0 web dev/design background.
My experience was starkly less optimistic, and am curious if any one else has tried something similar.
-----
First off, I must state a deep respect to people who build + design websites, while dealing with Clients.
I had assumed that ChatGPT would be very useful in helping me pick up and build things. However, I had to jettison ChatGPT fairly soon. I just couldn't trust the output of the model. It would suggest things that wouldnt work, then link to sites that didnt exist.
I switched to teaching myself. I had to watch hours of videos, learn CSS, Astro, and several other things from scratch. Definitely not the LLM experience I was expecting.
Code from Figma was great - but if I wanted an actual responsive site, I had to write the CSS myself, because boilerplate CSS had all sorts of odds and ends.
Getting an image to come out as I liked from Midjourney was fun - but it was also a massive time sink.
I had hoped to be able to get complex tasks done entirely with assistance from the LLM. In the end it helped maybe 20-30%. Its greatest use was to clarify concepts instead of me having to wade through specification docs.
When I went back to the videos of people using chatgpt to build a website in under 30 minutes - its always someone who knows the domain extensively.
I did get a site up and running after ~1-2 weeks of work including the necessary ritual sacrifices.
edit: writing in a rush, grammar and text are messed up. edit: GPT 4, copilot and midjourney. AFAIK I had no half measures.
Its a bit of a game changer if you already understand things so can point it to the right tasks and also clock that it's screwed up just from glancing at the code.
I haven't tried Cursor yet, I just get it to write or refactor functions bit by bit maybe that's better for monolithic tasks?
I should probably write a post about this, but comments are easier.
0) LLMs introduce the challenge of automated semantic verification.
1) LLM work should be broken up by usecase. These use cases lie on a semantic complexity continuum.
2) Tasks like classification are simple to verify (precision recall etc.). Tasks that require semantic complexity like summarizaiton are on the other end.
3) Anything on the high semantic complexity end of the scale needs expert human review.
4) Chained or complex calls greatly complicate verification
Which is why you are getting use out of it. There is a human (you) in the loop, and the calls are not complex.
As long as a human is reviewing the output of the LLM every time, its great. This is the vast majority of "generative" output.
Its when you have things like agents, or chained calls that things go awry. ITs why proof of concepts are easy, but production is hard.
For the record, many people have called this out, including people at Open AI, and AI ops was the largest sub group in YC's fall batch.
I had hoped to be able to get complex tasks done entirely with assistance from the LLM. In the end it helped maybe 20-30%.
Ok but if you would do the same task again, how much would it help you?
When I went back to the videos of people using chatgpt to build a website in under 30 minutes - its always someone who knows the domain extensively.
You are one step closer to become this person.
Ok but if you would do the same task again, how much would it help you?
100%, since I would never do it again.
Was GPT4 out then? I self taught to build a Web app before LLMs, for the second one, I had LLMs and it helped me so much, in the area you mentioned: clarifying concepts and spotting obvious bugs due to inexeprience
Yup. I had Gpt 4, copilot, and midjourney to assist.
There is a difference when an LLM is used in limited ways, by someone who knows enough to discard bad output.
I'd put it this way - ChatGPT will help you build a ship in the desert without hesitation.
I'm mind blown because it's already so good and I do imagine that it will get as good as you need it to become.
And yeah as you said with domain knowledge it works very well
What model did you use?
I've been in the same boat. Earlier this year I wanted to up my game as well with an improved website and blog to go along with it, not even sure which frameworks to use.
Using ChatGPT has been a hit or miss experience, helping me maybe 30% of the time as well. But when it did help, it helped me massively, especially for quickly setting up Wordpress PHP designs and accompanying CSS. I can honestly say I couldn't have done my web and blog redesign if it weren't for ChatGPT. Not because I wouldn't have been able to get the knowledge without it– more so because I wouldn't have had the patience to figure all of this out in my spare time.
Using ChatGPT has certainly been a more fun experience than browsing documentation, but I did have to do the latter about half the time anyway.
That's the equivalent of a todo app. How about something more complicated?
Same thing I tell my toddler any time he gains a new skill and people try to act impressed. Like bro come on I've been doing that for literal decades.
Did your toddler get billions of dollar from MS?
Well, there still doesn't exist a todo app that matches my needs.
Technology like this is interesting from a progression standpoint because this is now the new baseline.
I think the point isn't something for AI to do the hard complicated parts for us, but help us with the boring repetitive ones that pop up all the time.
Making forms UI is one of those.
The challenging part here is creating the design language or style guide) and I plementing the business logic once the form gets validated (which AI could generate code for, too).
It's easier to fill the hype cycle this way. Complexity introduces nuance, which is not what Twitter is about.
How about something more complicated?
This is still very early days and nobody thinks this is as good as it's going to get.
It's nuts how quickly something magic becomes mundane.
to be fair though, most apps are just over complicated CRUD apps that shouldn't be much more complex than a todo app
Slowly realising my father was right and should work for our family business (construction).
While I've had similar notions throughout my life, they have their own host of problems, yeah?
Nothing is truly perfect. Maybe in 5-10 years we'll have massive 3D printers that can build you any house without needing a big construction crew. I doubt but if you asked me 5 years ago about AI being capable of replacing me, I'd have laughed in your face... Alas, here we are.
Not replacing, augmenting. Try to find ways to use the new tools to become more productive than other engineers. Help evolve integration and deployment frameworks to handle the snippets from LLMs in the context of larger projects with a minimum of glue.
I wouldn't be surprised to see some old ideas come back to life like encapsulation concepts from enterprise software development. But this time we let LLMs deal with the boilerplate code needed to use and connect them.
Maybe we’ll have the robot equivalent of TFA in 20 years. “I need a new garage that looks roughly like this sketch.” Half a day later…
Computer, please create an adversary capable of defeating Data.
South Park was right (panderverse episode)
Very nice... Shame no source code. But super nice idea.
How about the source code of the result?
Click the little Copy icon next to the output iframe.
Did they just invent Microsoft front page but with 10000x more power used?
I love this part of the README:
Disclaimer: This is a demo and is not intended for production use. It doesn't have any auth so you will go broke if you deploy it.
Thanks! Somehow it didn't show up when I searched for it in github. My fault for sure.
I won’t visit Twitter but reading these comments I think I’ve got the gist
You can try it out here:https://makereal.tldraw.com/
Thanks!
Note: This requires an OpenAI API key with access to the model 'gpt-4-vision-preview', so a paid subscription.
very brave of you
Is it? I didn't think it had anything to do with bravery.
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 hate it when designers present what looks like polished and complete UIs in Figma. To the execs it looks like a finished product which frequently creates unreasonable expectations that interfere with what should be the iterative nature of UI design.
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.
I hate it with engineers complain moan and drag their feet on implementations that are hard but worth it. Because really under the surface they just don’t like doing something new, even if it has clearly defined user and business value.
I suspect you're on the wrong side of town for a comment like this, haha.
Almost always its just conflicting requests. Every ticket has a clearly defined user and business value to the person who wrote it.
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 takeso longto 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.
How? You literally just give GPT-4 a new prompt: "Thanks. Please connect it to the rest of this code:"
If you want it to do a better job, add "it's very important for my career".
Lol.
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 athttps://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
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?
Yes! If you have a previously generated shape selected, it incorporates the code from that file into the prompt for the next one. i.e. "here's what we had before, here are the notes that came back"
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."
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?
Telnet is the future! We've gone full circle.
Or maybe we can call it "Tell net" when using audio
A nerd can dream…I can stay in the command line, work on the fun hard stuff, just explain the UI to a transformer and then push straight to production, sight unseen.
That is going to replace about 0.001% of my job! Scary.
0.001% is only 17 doublings away from the whole job.
My hobby: interpolating
The water is just getting lukewarm. Said the frog.
What about the back end, deployment, hosting, dev ops, architecture, etc... I think that's where the opportunity is.
Huh?
You know ChatGPT produces a whole REST Api with authentication and db migrations backend in 5 seconds too right?
You still need to host it somewhere, deploy new features and then keep it running, generating code isn't enough and besides, back end is higher risk, so there needs to be a human there for insurance purposes to verify that access controls are properly defined and to rectify any urgent issues that arise. Same reason they still want human pilots inside planes even though most of the flight is automated.
Of course but analogous things can be said about front end. Pretty sure tldraw would fail spectacularly at anything slightly more complex like interactive world maps or parallax animations with dynamic break points.
Point being I'm not sure which of the two is safer from ChatGPT.
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.
Squarespace, Wix etc have already taken the bottom of the market
Meanwhile most SMBs don't have an app/website or have an useless one. There is so much space for niche markets and good tools.
Why do you think it can only work for trivial tasks? That's just denial.
Business process workflow software is quite popular. There are many applications where people do something similar with drag and drop/interactive widget editors and they can have complex forms, parent-child, state transitions, etc.
Using something like GPT Vision means you can skip the widget drag and drop and use more freeform drawing tools or freehand sketching.
Notion is probably the most popular example today but there are more complex ones going back forever.
I see this as a useful tool for creating interactive demos and prototypes which allow to quickly iterate over ideas. Could keep the feedback loop with clients short and allow to minimise miscommunication. I could see for example Figma implementing this.
ITT: people in denial while the writing on the wall is literally shoved into their face.
Writing was on the wall over a year ago, shocked how many were in complete denial then. Even more surprising now.
People don't even seem to grasp that the next gen of these tools wont be rolling the dice once it'll be rolling it 1000 times then you pick the one that nailed it. Then the next generation will roll 10,000 times and it'll be picking the one that nailed it even without your input at all.
Alternatively, ITT: people who have been through the design-to-dev handoff process and understand the comparative advantages of both teams.
Tools like this can be good for indie developers, the ones who in the past may have had to learn a bit of dev/design to release something. The division of labour is larger teams is different. The product manager may have a user research background instead of a software one. The designer may be good with semi-complete prototypes in Framer, but the responsibility for delivering production code may still rest with the dev team.
Let me guess...simple image recognition of the slider, the names need to match a CSS property? Wow,so impressive.
You are both wrong an arrogant, congratulations. Next time, don't guess.
Really? Then show me a video thatdoesn'tlook like what I described, if you want to be taken seriously. That demo is, what, 5 clicks with a decent gui builder?
How would you go about editing the final product though? Wouldn't you then still need intimate knowledge of the system?
Change the sketch and get it to build it again. It only takes a couple of seconds.
That seems a lot more complicated than just coding it. How would you go about drawing a box shadow on the sliders? What if you wanted a background image behind it? How would the model know that it's a box-shadow, or that the background is an image?
I feel like for that level of granularity, you'd spend more time figuring out how to style it than just writing it in code, since you'll need to start using descriptors on things, which is literally just coding again.
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?
First attempt didn't work, but it nailed it when I added text saying "Show web page here" to the second box:https://gist.github.com/simonw/dac37e575b214c7e13ec907a026e5...
All the developers out there who make demos for scaling and rotating a box are about to lose their jobs!
Only the ones that don't align their sliders.
The Tiktokization of software development. Software made to look good in videos
It needs that fuzzy glow filter that every AI art generator spits out.
I think we need to get started on organizing the resistance to our robot overlords.
Butlerian Jihad when?
So does this mean in the future GUIs will be custom and on demand depending on the situational context or personal preference?
Did we get every spaceship control room wrong? Where the Star Trek bridge would simply morph into whatever gui objects were necessary? (I can’t imagine them going away entirely and EVERYONE talking to the ships computer as it would be audio chaos and annoying a/f so I guess we’ll always need a nice quiet user interface.)
LCARS, the control panel UI in TNG/DS9/VOY/LD was always supposed to be quickly reconfigurable to the task at hand. But the prop implementation was usually sheets of translucent acrylic under glass, which isn't that easy to update.
AI truely is just a marketing term.
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.
Cheap hype like this is why public perception of AI is turning into "the new crypto'. The revolution is here! Get in now!
Instead of Coinbase P&L screenshots, it's short demos of what amounts to a TODO app.
What is this insanity?
Looks like drawing a prospective UI, then having OpenAI multimodal AI turn it into functioning UI. Pretty cool demo. Probably needs some automated test cases, documentation writing etc if it's going to have even a hope of being maintainable. I wonder how much of the GPT-4 coding process described here can be automated as part of an application:https://gwern.net/tla
The site requires an OpenAI Key and describes doing this as "risky but cool" ... What data would be exposed by sharing my key?
Hey, this is Steve from tldraw, I was up late last night putting this together.
I've added a note next to the input with more info here, but basically: the vision API is so new that its immediately rate limited on any site like this, and because OpenAI doesn't have a way of authorizing a site to use their own API keys (they should!), this was the best we could do. We don't store the API key or send it to our own servers, it just goes to OpenAI via a fetch request.
Putting an API key into a random text input is obviously a bad idea and I hope this doesn't normalize that. However, you can read the source code (https://github.com/tldraw/draw-a-ui) and come to your own conclusions—or else just run it locally instead.
and who will maintain it?
more examples are available on the app account:https://twitter.com/tldraw
He is using an open source app called tldraw and this is the prompt used:
https://github.com/tldraw/draw-a-ui/blob/2ac633bbbd5fda39e59...
Is this thing self-hosted? Can it make itself?
What is the letter 'A' supposed to look like?
Every scribe had their own style and flourish. Every scribe was an artisan. Discerning patrons favored particular scribes for their uniqueness and quality.
Somehow, someway, the hivemind mostly settled on today's 'A'. Something good enough.
Moveable type replaced scribes.
And so it is with sliders and flexbox layouts.
The code for the demo is open-source (https://github.com/tldraw/draw-a-ui/blob/main/app/api/toHtml...). The prompt they use interesting:
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
That's nice, can it work out of web browser to actually make something usable?
Wow, I have always had so much trouble building things in the browser when two sliders were involved. Glad someone has solved this problem.
Building an HTML Widget > $0.
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?
I mean, cool, but surely if this is a technical feat it speaks more to the complexity of our tooling and platforms than it does the impressiveness of AI. What I'm trying to say is that all of this is pretty primitive if you built the right tooling to express those ideas trivially. Like even a 6 year old could create noughts and crosses if the paradigm they were using allowed them to express the game rules in a way that was natural to them. So yes, while I think this is cool, I don't get how it warrants the hype and hysteria. It makes me sad that this minor technical accomplishment seems impressive because the web is an unintuitive medium for expressing logic entangled with UI.
We need to differentiate "Wow!"[1] (these ML/AI systems are impressive), and "Wow!"[2] (this is something I want to use).
Seems pretty loose with the input prompt. Good thing stake holders are notoriously forgiving and would never ask to push pixels.
I do see the potential as a professional tool if it came in the form of a "fix up" button in a WYSIWYG editor. It would be great if you could haphazardly slap together a UI and have a button that unifies the margins and spacing style without taking too many liberties.
hey I'm Lu from tldraw, I worked on some of this.
The point of this demo is to experiment with new ways of interacting with an LLM. I'm very tired of typing into text boxes, when a quick scribble, or "back-of-the-envelope" drawing would communicate my thoughts better.
It worked a lot better than I expected! If you give it a try, let me know how it goes for you! And please feel free to check out the source code:https://github.com/tldraw/draw-a-ui/
I gave it a mockup from a FB interview question (two lists of checkboxes with two buttons to swap checked items between them) and it nailed it:https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...
Does this export to HTML/JS/CSS and if so, is the code on par with what a good dev would write?
From the Readme athttps://github.com/tldraw/draw-a-ui
„This works by just taking the current canvas SVG, converting it to a PNG, and sending that png to gpt-4-vision with instructions to return a single html file with tailwind.“
Exciting and very useful for quick demos or Proof Of Concepts, we’re living through interesting times.
I don't get what's so amazing in the demo
It takes seconds to pick a button and place it somewhere. Is it really so much better to let an AI guess that a green rectangle is supposed to be a button?
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.
Look at me I'm old yelling at clouds!