In-Depth
Hands On: Testing Cursor, Windsurf and VS Code on Text-to-Website Generation
Many AI-assisted code editors can generate a working website from a short natural-language description. That baseline capability is becoming table stakes.
I explored that capability early on with GitHub Copilot, feeding the tool a mockup image with which it generated a web page (see "Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds"). Just last week I followed that up with an examination of how that cutting-edge Insiders Build tech has improved nearly a year later and what similar capabilities are in Microsoft's flagship IDE (see "Hands On with Copilot Vision: VS Code's Head Start and How the IDE Is Catching Up").
I wanted to do another hands-on comparison of AI-assisted code editors that are pushing the envelope in this space. However, there are few free options that can duplicate the generate-code-from-image capabilities of VS Code and my paid GitHub Copilot plan. So I switched gears to find free tools to compare with VS Code's generate-code-from-natural-language functionality.
I chose Cursor and Windsurf, two VS Code forks that have made headlines recently for their AI-assisted coding capabilities, including text-to-code generation.
I ran the same sequence of text-based prompts across all three editors, using the free versions of Cursor and Windsurf. Being free versions, I don't know if they could do better in paid plans, or if those have image-to-code capabilities -- and I'm not going to pay to find out.
The project focus was a simple static website built with plain HTML and CSS, with sub pages and working navigation among them. They were then iteratively refined without manual code edits. VS Code defaulted to Claude Sonnet 4.5. Windsurf said it used SWE-1.5, created by Cognition. I went to ask Cursor while writing the above, but it told me I had reached my usage limit. It didn't explain what the limit was or if it would reset, just nagging me to upgrade to Pro.
See the Sites in Action:
To see live examples of the websites created using each tool, you can visit the following links, thanks to (free) Netlify hosting. Note that Windsurf and VS Code guided me through the process of enabling live email functionality (thanks to a free EmailJS account) from their respective Contact pages, but I couldn't get that working with Cursor due to usage limits.
Methodology
Each editor received the same prompts, in the same order:
- Create a four-page static website (Home, About, Services, Contact)
- Add a site-wide logo
- Improve accessibility
- Redesign the site visually
- Suggest further improvements
- Implement all suggested improvements
The first three steps produced broadly similar results across all tools. All three generated a functional multi-page site, applied a logo consistently, and added semantic HTML and ARIA attributes for accessibility. Differences became more pronounced once the tools were asked to rethink the site visually and then decide how to extend it further.
Visual Redesign as an Inflection Point
The visual redesign prompt asked each editor to modernize the site's appearance, including a hero section on the home page, imagery on subpages, and updated typography and spacing.
Cursor
Cursor treated the redesign as a holistic overhaul. It introduced a new color palette, modern typography, card-based layouts, and a prominent hero section. It also added realistic imagery to subpages and adjusted spacing and layout across the site. The redesign materially changed the site's appearance and required no follow-up clarification.
[Click on image for larger view.] The Cursor Site (source: Ramel).
Windsurf
Windsurf paused to request confirmation before overwriting the existing CSS. After approval, it delivered a similarly ambitious redesign, adding modern layout techniques, animations, and updated styling. During this step, Windsurf surfaced lint warnings, and later previewing the site introduced additional friction related to runtime assumptions.
[Click on image for larger view.] The Windsurf Site (source: Ramel).
VS Code (GitHub Copilot)
Copilot focused on a CSS-driven redesign. It introduced gradients, modern typography, card layouts, and hover effects, along with a hero section and reorganized page layouts. Imagery was represented through placeholders, gradients, and icons rather than realistic photos, resulting in a more abstract visual style.
At this point, all three sites were visually distinct, but broadly comparable in scope. The more consequential differences emerged in what the tools proposed to do next.
[Click on image for larger view.] The VS Code Site (source: Ramel).
Each editor worked much the same, providing a project structure after the initial prompt and replying to prompts. Here's Cursor's project structure after the initial prompt:
[Click on image for larger view.] The Cursor Project Structure (source: Ramel).
Here's Cursor's reply to a navigation prompt:
[Click on image for larger view.] The Cursor Reply to a Navigation Prompt (source: Ramel).
How Each Tool Diagnosed Its Own Work
When asked to suggest further improvements, each editor effectively performed a self-critique of the site it had created. The resulting plans offer insight into how each tool "thinks" about web projects.
Cursor: Broad, Production-Oriented Roadmap
Cursor produced a categorized list of enhancements spanning visual design, user experience, content, accessibility, SEO, and performance. Its suggestions included mobile navigation, testimonials, statistics sections, image optimization, metadata for social sharing, form enhancements, and accessibility refinements.
The list was framed as a practical roadmap, with "quick wins" and higher-impact changes identified. Cursor then asked which items to implement, implicitly treating the site as something that could move toward production readiness.
Windsurf: Feature Expansion with Runtime Assumptions
Windsurf proposed a similarly comprehensive set of enhancements, including dark mode, advanced animations, navigation improvements, additional content sections, and performance optimizations. Like Cursor, it grouped suggestions by category and recommended starting points.
Several suggestions assumed more dynamic behavior, such as page transitions, interactive components, and enhanced previews. These assumptions later influenced how Windsurf executed the final implementation.
Here's Windsurf's reply to the redesign prompt:
Based on the current modern design, here are some strategic improvements to make the site even better:
Visual & Design Enhancements
Dark Mode Support
Add CSS custom properties for dark theme colors
Implement a toggle switch in the header
Smooth transitions between light/dark modes
System preference detection with prefers-color-scheme
Advanced Animations
Scroll-triggered animations: Elements fade in as you scroll
Micro-interactions: Button ripple effects, card hover reveals
Loading states: Skeleton screens for perceived performance
Page transitions: Smooth fade between pages
Enhanced Typography
Variable fonts: Dynamic font weight adjustment
Better hierarchy: More distinct heading styles
Reading optimization: Improved line height and spacing
Custom font pairing: Complementary serif/sans-serif combination
Functionality & UX Improvements
Interactive Components
Search functionality: Live search across all pages
Filter system: Filter services by category
Image gallery: Lightbox for service images
Testimonials carousel: Social proof section
Navigation Enhancements
Mobile menu: Hamburger menu with slide-out drawer
Breadcrumb navigation: Better orientation
Sticky navigation: Smart hiding/showing on scroll
Quick access: Floating action button
Content Features
Blog section: News and insights
Case studies: Portfolio showcase
FAQ section: Expandable accordions
Team profiles: Detailed team member pages
Performance & Technical
Optimization
Lazy loading: Images load as needed
Critical CSS: Inline above-the-fold styles
Image optimization: WebP format with fallbacks
Minification: Compressed CSS/HTML
Advanced CSS Features
CSS Grid: More complex layouts
Container queries: Component-based responsiveness
CSS custom properties: Dynamic theming
Blend modes: Creative visual effects
Accessibility & User Experience
Enhanced Accessibility
Focus indicators: More visible focus states
Keyboard navigation: Full keyboard support
Screen reader: Better ARIA labels and descriptions
Reduced motion: Respect user preferences
Progressive Enhancement
Feature detection: Graceful degradation
Offline support: Service worker for caching
Performance monitoring: Core Web Vitals tracking
VS Code: Exhaustive Checklist and Documentation Mindset
Copilot produced a long, detailed list of potential improvements covering visual polish, UX, content expansion, accessibility, SEO, and technical optimizations. Suggestions ranged from mobile navigation and testimonials to structured data, print styles, and progressive enhancement.
The list read less like a prioritization and more like an exhaustive checklist. Copilot also surfaced optional additions, such as pricing pages and blog sections, even though those were beyond the original four-page scope.
Implementing Everything
In the final step, each editor was instructed to implement all of its suggested improvements.
Cursor
Cursor executed the full set of enhancements in a single extended pass. It added mobile navigation, scroll animations, testimonials, statistics sections, additional content blocks, SEO-related files, accessibility refinements, and UI polish. The site remained static and immediately viewable by opening the HTML files directly, with no runtime dependencies introduced. As noted I ran into a usage limit quite early with no option but to update to a paid Pro account, so I couldn't set up a functioning email form on the contact.html page, which I managed to do with Windsurf and VS Code.
Windsurf
Windsurf implemented a similarly expansive feature set, including dark mode, animations, additional pages, and interactive elements. During this phase, it defaulted to a localhost-based preview that did not initially work. None of the others tried to run a web server, just advising to click on the index.html file in File Explorer. Running the site with full functionality on localhost required manually starting a Node.js server by opening the terminal and pasting in cd "C:\Users\dramel\CascadeProjects\simple-website"
node server.js. Once running, the implemented features behaved as described. Windsurf churned away at this problem for a while, seeming to run in circles until I finally realized I had to do that manual step.
Windsurf also had a button on the top of the pages to switch between light and dark mode, which worked well, a nice feature. It also guided me through the process of setting up functioning email on the contact page, which involved creating a free account on a third-party email service (EmailJS) and copying account information into placeholders. Once done, the contact form actually worked (send me a message here!).
VS Code
Copilot applied all enhancements incrementally across existing files, touching every page and expanding a detailed README.md that documented features, accessibility considerations, and customization options. The final site included mobile navigation, animations, testimonials, SEO metadata, form feedback, and additional content sections. As a test of full functionality, I asked Copilot to guide me through the process of setting up actual email functionality, which it did handily, editing the contact.html page so all I needed to do was fill in some placeholders in a JavaScript file using information from a free EmailJS account. So now the contact form actually works (send me a message here!).
After completion, an issue surfaced in which the About page stalled on a loading spinner. Copilot identified the cause as a missing script reference responsible for hiding the loader and fixed the issue in about a minute.
What the Differences Reveal
All three editors were able to generate and extend a static website using identical prompts. The key differences emerged not in whether they could do so, but in how they approached improvement and execution.
- Cursor emphasized autonomy and production-oriented polish, executing large changes with minimal friction.
- Windsurf matched Cursor's ambition but introduced additional workflow complexity and runtime assumptions.
- VS Code emphasized structure, completeness, and documentation, at the cost of visual realism and occasional integration issues.
As AI-assisted editors continue to evolve, these differences may matter as much as raw generation quality, particularly for developers deciding how much control, polish, and predictability they want from the tools doing the work.
Final Thoughts
One thing that stood out is that, despite their sophistication, these AI-assisted editors remain a long way from agentic AI. They can generate, revise, and extend code across multiple files, but they stop short of autonomously modifying runtime logic, such as updating a script.js file, or executing actions like starting a web server from the terminal to display a site on localhost. A bridge too far, probably, is the ability to access my Netlify and EmailJS accounts to grab and insert information as needed -- maybe someday. For now, they remain powerful assistants rather than independent actors, leaving developers firmly in control of when and how generated code is put into motion.