AInspiro
中文

Cursor 2.0 After 30 Days: A Designer Built 3 Complete Websites (With Prompt Templates)

Tech Trends
🤖 This article was generated by AI. Content is for informational purposes only.

Background first: I'm a designer, not a programmer.


Designers who've been writing code for over a decade are rare — I'm the type who can edit CSS but can't write React from scratch. Building websites used to mean either outsourcing to a frontend dev or making do with visual tools like Webflow. Then last month, a programmer friend told me “try Cursor 2.0, designers can use it now,” and I jumped in.


The result — 30 days, 3 complete websites, from design to development to deployment, all done by me alone.


This isn't a sponsored post. Cursor didn't pay me a cent. I've also documented every pit I fell into. If you're a designer who wants to build websites but has been deterred by code, read on.

What's Actually New in Cursor 2.0

Cursor 2.0 was released in October 2025 and has gone through several iterations by June this year. I started with the latest version, and the key changes that matter most to non-programmers like me are:

Multi-Agents: Multiple AIs Working Simultaneously

Previously, Cursor could only run one AI conversation at a time — you'd ask it to modify a file and it would modify that one file. Version 2.0 introduced Multi-Agents, which essentially means you can run multiple AI Agents in parallel, each working independently. For example, when building a website, one Agent writes the homepage layout, another builds the backend API, and a third handles responsive adaptation. Three running in parallel directly doubles efficiency.


What does this mean for designers? You can assign development tasks the same way you assign design tasks. You don't have to wait for one to finish before queuing the next — this mirrors how design workflows actually operate.

Composer Model: Self-Developed Coding Model, 4x Speed

Cursor 2.0's biggest highlight is the self-developed Composer coding model. It's 4x faster than comparable models, and the speed difference is genuinely noticeable — Tab completion that used to take a second or two is now nearly instant. More importantly, its contextual understanding is much better. When I renamed a component, it automatically updated every reference across the project — no manual find-and-replace needed.

Browser Integration: See Changes in Real Time

This feature is incredibly designer-friendly. Previously, you'd write code, switch to the browser, and refresh to see results. Now Cursor has a built-in browser with real-time preview. Tweaking CSS is particularly satisfying — change a color or spacing value and see the result next second, as smooth as adjusting parameters in Figma.

Voice Mode: Talk to Your Computer

I initially thought this was a gimmick. Then I got hooked. When my hands are busy on the drawing board, I just tell Cursor “change this button's border-radius to 12px and the background to brand color,” and it does it. Accuracy isn't 100% — occasionally I need to repeat myself — but overall efficiency is noticeably higher.

The 3 Websites I Built in 30 Days

Website 1: Independent Designer Portfolio

The simplest one, used as practice. A single-page site: top navigation + hero section + portfolio grid + about me + contact.


The whole thing took about 2 days. Day one, I described the effect I wanted to Cursor — “dark theme, large hero typography, portfolio cards with hover micro-animations, overall style referencing Awwwards-winning sites.” It built the basic framework, and I mainly fine-tuned visual details. Day two was responsive adaptation and micro-interactions, where Cursor's Multi-Agents helped a lot — one Agent handled mobile layout, another handled animations.


Pitfall: Initially my descriptions were too vague, and Cursor's generated layout was far from what I wanted. I later learned to provide reference links — sending Awwwards URLs directly and asking it to analyze the layout and color scheme made a huge difference.

Website 2: Friend's Coffee Shop Mini-Site

More complex — needed menu display, store info, and online reservation functionality. My friend had a tight budget and couldn't afford a dev team, so I took it on.


Took about 5 days. First two days for page structure and visual design, middle two days for the reservation feature — Cursor helped me write a simple form submission + email notification backend logic. I never touched backend code; the entire process was done through AI conversation. Final day for testing and deployment.


Pitfall: I let Cursor handle form data validation on its own, and on day one after launch, I received a flood of spam submissions. Added reCAPTCHA and field validation to fix it. Lesson: don't fully trust AI for security-related things — it won't proactively consider them for you. You have to ask.

Website 3: Design Studio Full Website

The hardest one. Multi-page, blog system, case showcase, CMS backend. Previously I would've definitely outsourced this to a frontend dev, but this time I wanted to challenge myself.


Took about 10 days. This project really showcased Multi-Agents' value — I ran 4 Agents simultaneously: one building the homepage, one building the case showcase page, one writing the blog system frontend, one handling backend APIs. Four running in parallel, with occasional file conflicts, but overall efficiency far exceeded my expectations.


Pitfall: File conflicts with multi-Agent parallel work are a real issue. Two Agents modifying the same file — Cursor flags the conflict but doesn't auto-resolve it; you have to manually choose which to keep. Once I didn't pay attention and overwrote a chunk of finished code, nearly losing an afternoon's work. I later got smart: assign each Agent to a separate file directory, minimizing overlap.

5 Cursor Prompt Templates for Designers

I hit plenty of pitfalls in 30 days and also developed some useful prompt patterns. Sharing them directly — feel free to use them.

Template 1: Reference Site Reverse Engineering
“Analyze the layout structure and color scheme of this website: [URL]. Then recreate the same visual effect using React + Tailwind CSS, maintaining responsive adaptation.”
Template 2: Component-Based Development
“Create a reusable [component name] component with these requirements: 1) Support the following props: [list props] 2) Default styles use [design system] 3) Hover and active states have micro-animations 4) Automatically switch to [adaptation approach] on mobile”
Template 3: Multi-Agent Task Division
“I need to develop the following modules simultaneously. Please create independent Agents for each: 1) Homepage hero section 2) Product showcase listing page 3) Contact form + email notification backend. Each Agent only handles files in its own directory.”
Template 4: Design Spec to Code
“Here's my Figma design spec [export JSON or screenshot]. Please generate the corresponding Tailwind config file and CSS variables based on these design tokens, ensuring colors, font sizes, and spacing are exactly consistent.”
Template 5: Quick Bug Fix
“This page shows [problem description] on [device/browser]. Please check the relevant code, find the cause, and fix it. After fixing, explain what you changed and why.”

Cursor vs Windsurf vs Claude Code

I've used all three. Here's how I'd position them:


Cursor 2.0 — Best for non-programmers. The most complete IDE experience, and Multi-Agents plus browser integration are particularly designer-friendly. Downside: some advanced features require a Pro subscription at $20/month, which isn't cheap.


Claude Code — Strongest Agent capabilities, best at multi-file refactoring and complex logic handling. But it runs in the terminal with no visual IDE, making it unfriendly for non-programmers. Best for people with development experience.


Windsurf — The youngest. The “Flows” concept is novel and can learn your development habits. But the ecosystem isn't mature enough yet, and community answers are scarce when you hit problems. Best for early adopters.


My recommendation: designers starting out should pick Cursor 2.0, heavy-duty programmers should go with Claude Code, and those wanting to experience the cutting edge should try Windsurf.


My biggest takeaway after 30 days: Cursor 2.0 didn't turn designers into programmers, but it tore down the wall between designers and programmers. Previously, if I had an idea, I needed back-and-forth communication with a frontend dev to realize it. Now I can validate feasibility myself, or even build it directly.


This doesn't mean frontend devs will be out of jobs — complex projects still need professional developers. But for small-to-medium projects, personal portfolios, and studio websites, designers can now handle it entirely on their own.


If you're a designer, my advice is: don't hesitate, just try it. The learning curve isn't as steep as you think. The first week might feel a bit chaotic, but by week two you'll start feeling the thrill of efficiency gains. Take the 5 prompt templates above — they're enough to get you through your first project.