Transcription
All right everybody, another day another no-code AI builder. This time from GitHub, Microsoft, and it's called Spark. This is Spark right here. Looks like every other one that you've seen, and we are going to give a reaction based on, you know, it trying to generate, um, a relatively robust app.
So, this is the prompt, and I am not going to read the whole thing. I will scroll through it so that you can pause and see yourself, but I will read a little bit of it. So, basically, I'm asking it to build a real-time design feedback board web app. So, think of it like a, a real-time Dribbble of sorts. Um, core concept is just a public single-page app where anybody can upload design screenshots and leave feedback based on emoji reactions in real-time, and no login required. So, there's some other, you know, tidbits here like a masonry-style grid displaying each card, or, you know, each design that's uploaded. Um, just, you know, just some real-time functionality such as no authentication, interactions like drag and drop, text stack, React, Tailwind, all that good stuff. Let's go ahead and see what it actually generates. So, when I click play, this is going to take probably about three to five minutes. And I know this because I have literally recorded this same freaking video twice so far. This is my third time. The first time, there was audio issues. The second time, there was an actual screencast issue. And now, I hope this is going to work.
But I'm glad it happened because I was able to see how different the same exact prompt was between the first and second try. The first try, it used Superbase and required me to add Superbase credentials. It had a ton of issues with actually publishing the app. I tried clicking "fix issues" five or six different times, each time taking about three to four or five minutes, and it would not work. So, I couldn't get the app actually published. Now, the second time, it didn't use Superbase. It used something else for the database storage, and it did work, and it did publish. But there are still some drawbacks that I'm going to discuss here that I'm sure will probably be present as well.
[Music] Oh no, this isn't good. So, autofix error. Now, the previous two times, it did actually load the app after generating it. This time, no such luck. It generated an error. There goes oneshotting. This is our first follow-up prompt. All right, there is the design. And it's a garbage design. I mean, yes, it's usable, but I wouldn't personally probably take this too seriously. Um, yeah, I'm zooming out here. I was zoomed up a lot. I. All right. Well, let's, let's see if this actually works and see if it's based on like some template fake data. I'm going to upload a file. This is not a UI, it's just something random. So, that does work. Um, now, if I add a comment. Let's take a look here. "Hi, that is ugly." Hit enter. One comment. "Color wizard." That is ugly. Let's give a reaction. Two reactions. All right. So, the functionality seems to be working, which is awesome. Let's see if this actually publishes. So, let's click publish. Publish and see if we had the same issue as before. Um, the fact that it's already working out of the gate tells me it probably didn't use Superbase because, in order to use Superbase, you have to create the credentials, and, um, you have to create the Superbase project and manually then paste in some SQL through the SQL editor. Uh, that was the first attempt. It had me do that. It didn't have me do that this attempt or the previous attempt as well. And here we go. We have an error. It doesn't want to publish it. So, "Error creating app.json cannot unmarshall object." So, you can click on this. It'll tell you kind of what's happening. Obviously, if you're non-technical, which is the target audience, let's be honest with this type of app, you won't understand any of this. But, you can click "fix all." So, let's hope that it fixes it.
[Music] All right, let's try clicking publish again. Come on, please work. Please work for GitHub Spark's sake, rather. All right, it says it actually published. So, if I click this URL, uh, I choose, we'll upload another, um, file here. Um, this time, we'll do something different. All right, there's a UI right there. All right, so it is a masonry grid style layout. That's cool. It seems as though all this stuff works. So, I will copy this URL so you can all check it out. You will have to log into your GitHub account, um, in order to use it, though.
So, let me go back to the actual editor and I want to show you, um, a couple other things. So, let's say, for instance, you want to be able to update the UI, right? Well, there's a couple ways to do it. First up here, let me zoom up here. You can click on "theme" in this section. And we have some different themes that we can check out. Like, what is "candy shop"? Let's click "candy shop." And automatically, it's updating the UI to some predefined colors. Um, you don't give a ton of access right here, um, to different CSS properties. They're actually quite, quite limited. You can change the colors, like the primary, secondary, and base colors. Um, click "show all colors." Okay, that's pretty cool. The appearance, like you can change border radius and spacing. Uh, they're not robust CSS values and properties, though. You're not going to get a ton of options here.
Another way to change is through this "target" option up here. So, you select the element to edit, and it's these are selecting HTML elements, and that's what UIs are comprised of, HTML scaffolding. So, here's an H1, that's a heading element. We have a paragraph element right there. Uh, we have this area. So, let's say, for instance, we want to, for whatever reason, we would like to make the strokes thicker right here, right? Because they're like one pixel right now. So, if I take this target element and I click it, I can say right here on this little quick prompt area, say, "Make the stroke on this element, uh, three pixels." Hit enter. And now it's going to go ahead and think about how to do that. Hopefully, it doesn't take too long because this is a very simple and easy request. But I do notice overall, if you compare it to some of the other LLMs, encoding LLMs, it is a little bit slower for it to make changes. There we go. So, it, it changed this here specifically, um, all these buttons to three pixels. So, that's fine. I'm not saying that that's a good design change. I just wanted to show you kind of what it, like, what it's like to be able to update different things.
Um, so, like this design that it produced objectively, from somebody who's been a UI/UX designer for a couple decades now and longer, um, is, it's, it's not, it's not high quality. You know, it's, I could definitely do way better on my own. So, you might ask yourself, who is this app for? Well, coming from their perspective and other competitors like Lovable and Volt, I mean, Bolt, they're really going after non-technical users. You're, they're talking about a huge demographic of market of people who don't know how to code, but now they can, and they're marketing to those people. So, to those people, it's a great way to maybe just create quick personal apps and to also experiment with getting into coding, um, or vibe coding, rather, and being able to make, you know, stuff that's cool. But you're not going to be able to create a really scalable, huge, robust app that is top-of-the-line in terms of UI/UX functionality and all that stuff. That's, that would be very, very difficult, um, without understanding HTML, CSS, and coding in general, and also while using these types of tools.
I, where people are at now who have an understanding, a technical understanding, is they're using things like Cloud Code and Cursor, uh, and those type of IDE-based approaches using LLMs and AI to help them, uh, build out apps, but they're not oneshotting them like this. I, I'm doing an app right now called Sideling in Cloud Code and Cursor, and that is not oneshotted. There's a ton of different prompts involved, and there's also a lot of manual control, especially with the design. So, this has utility for people who are technical as well, if you wanted to try to rapidly prototype an app for whatever reason. So, it's good for prototyping very quickly because it can create the functionality quite quickly, as you can see here. But there are shortcomings, which I'm sure they will all eventually get a lot better at.
Anyhow, so that is my take on GitHub Spark. You know, the, there, there's so many different competitors that do roughly the same thing right now, and they're all trying to become the number one at it. But for me personally, I wouldn't use it to build an app. I would take the Cloud Code and Cursor approach myself. All right, make sure to check out designcourse.com for a lot of AI content and courses, and I will see you all very soon. Goodbye.