Windsurf and Cursor are both able to take an image and then use an agent to build out what it sees in that image. This lesson is going to compare Windsurf and Cursor by uploading the same image to both and giving them the same prompt. Comparing not only the results, but also the steps that they take to get there. We'll also try uploading additional images throughout the process to see what they do as far as revising along the way and improving the site as they go along.
Transcript
[00:00] Windsurf on the left, Cursor on the right. I've given them each this screenshot of OpenAI.com. We can zoom in for more detail. Each of them are starting from a basic Next.js template. And I've uploaded the images already and given the prompt of update the existing Next.js project based on the provided screenshot.
[00:18] Make sure this is on write, hit enter, make sure this is on agent, and hit submit, and let them go to work. Now cursor did allow me to drag and drop the image if that's valuable, so half a point to cursor. Looks like Composer started with some of the hero stuff, a card section, that's a hero card section, and adding that all to the homepage with some basic text in there. So it says it's got the basic structure, we'll go ahead and accept all. And a lot of the work inside of WinSurf is hidden in these analyzed.
[00:47] I'm not sure what it's doing there. You just kind of have to look at the result. And it says it has the hero, the grid, responsive design, custom animations. So let's accept that. I definitely prefer WinSurf's little summary here that it's made updates, what it updated, and then a bulleted list of what you can expect.
[01:05] This just reads a little differently as far as a summary goes. It doesn't list out the files that were changed and essentially says here's all the work that's left to do and kind of leaves us in a place would you like us to do this where this kind of implies that it's done. So let's check these two out. This is Winsurf's version. Got our hero banner.
[01:22] Got these with rounded corners. Our reference image really didn't have that much of a rounded corner. Then scrolling down, features, partners, and then no footer section. So this is all that Winsurf made. Then we'll check out cursor.
[01:36] Looks like we got an animation here with I'm not sure why text is just kind of hanging out. We got cards with nice hover animations, which these do not have any sort of animations. So from a results perspective, I would personally choose this one just it looks cleaner and the cards have this hover state. Winsurfs definitely feels like it tried to do too much with the color palette and didn't do any hover states or animations here. And the footer is non-existent and on both of them it doesn't have any of this stuff at the very bottom.
[02:05] And I'm not sure if that's a limitation based on the size of this image because I don't think I see the header navigation above these either. So let me double check with both of these and ask them for headers and footers. Both the header and the footer from the reference image are missing. Please implement them. So let's start that in WinSurf, paste it over here into Cursor and see what they do.
[02:27] Again Cursor has the kind of inline preview here. WinSurf is all behind the scenes. You have to click this open diff if you want to see it. And I definitely wouldn't call this a race per se since they're both using the same API and that's gonna vary wildly. Alright so let's check on cursor's version while windsurf is still working.
[02:43] That is a solid header, matches the design well, and a solid footer as well. Not sure if I would say it matches the header of the image. So I think the header actually looks great, but it doesn't necessarily match our reference too much. There's nothing centered there, and there's no search icon, which I'm sure you could prompt it for I think I'll try that next. The footer looks solid and it did make the header sticky it doesn't scroll with the site and there's a nice transparency there too.
[03:12] It's a pretty standard footer it doesn't quite match what's going on in our reference and there's definitely no social or copyright or anything. So let's go over to Windsurf. That's definitely another option. I would subjectively say it's a little worse than the other one but I'd really have to make up a rubric for that. And then a very similar footer and this one does have a copyright.
[03:35] So I took screenshots of only the header and only the footer and I want to try doing that and asking it to recreate the header and footer just to see if they can essentially fix what's currently a bad design if I zoom in on a section. So I'll say I've added new reference images for the header and the footer. Please fix the existing header and footer based on the new reference images. So we'll get that started and then we'll do the same for cursor. I had to cancel this real quick.
[03:59] I tried to drag and drop two images and it only added one so that's why you saw a brief cancel. This one took a long time and I think timed out so it's retrying again. I don't know if the API is down it looks like they're both kind of spinning on generating the footer. My internet is definitely up. Alright cursor seems to be done.
[04:17] Not sure what's going on with WinSurf here. I assume API issues. Looks like it's failed twice and trying for a third time but it hasn't really said what's going on. It just keeps on doing this spinner next to a footer TSX. So the cursor result looks much better now with OpenAI Research Product Safety, although these aren't centered.
[04:35] But it does have a search icon over here, which doesn't do anything, but that's fine. And then the footer looks much much better, especially when compared to the reference. Even got the arrows, and I'm not going to go through and verify all of them but close enough for me to go in and tweak. The social icons are pretty good too with hover states and I'd say this did an admirable job. Winsurf ended on a protocol error, unexpected end of file.
[05:01] It says one file needs review. I'll say please finish your work on the footer, see if that helps. So I honestly don't know what's going on here. It seems to fail over and over again without any explanation. The big concern here for me is like is this using up some of the paid-for requests that based on their pricing you have a limited amount.
[05:23] Hopefully that's not but I would imagine that anything having to do with an image would be a pro request. It looks like it finally worked for whatever reason. I'm gonna hit accept and I'm gonna write off that there was API issues at the time some service was down. It would have been really nice if they said something about it but let's see WinSurf's result here. The header looks solid left middle right left middle right.
[05:48] Then the footer is pretty solid as well. The sections aren't as bold as I would expect and it doesn't have any of the icons. So based on this extremely subjective test where you expect it to one-shot an image and build a site. I'm going to have to give Cursor the better result here. The cards are much closer in the as far as card formatting since they're tall rectangles whereas these are like little squares and wide rectangles.
[06:15] The headers above the sections are on the left, which matches the design here. And the entire footer section on Cursor's implementation is much cleaner than Windsurf's implementation. So there you go, this round goes to Cursor, which really surprises me. I heard great things about Windsurf's ability to take an image and generate a site, but for whatever reason this time it just didn't do quite as well.