Andrej Karpathy first used the term “vibe coding” in February 2025 to describe a coding style focused on intuition and AI collaboration. By March, Merriam-Webster listed it under trending slang. Y Combinator noted in its Winter 2025 batch that about 25% of startups had codebases in which AI generated 95% or more of the code. Cursor is a leading tool in this movement.
Cursor, first released in 2023, is a fork of Visual Studio Code built for AI-assisted software development. The familiar interface makes it easy for those who have used VS Code before. The AI integration allows you to describe what you want to build, and the editor generates the code. Anysphere, the company behind Cursor, reported over $500 million in annual recurring revenue in its 2025 Series C funding, valuing the company at nearly $9.9 billion.
In this guide, we’ll walk through building a website using Cursor and Vibe’s coding principles and show you how to deploy it to our hosting platform.
Installing Cursor
- Visit the official Cursor website and download the installer for your operating system.
- The site automatically detects your system and provides the correct installer.
- Installation usually only takes a few minutes.
- Create a Cursor account after installation. Sign up with email, Google, or GitHub.
- The free tier offers a set number of AI completions per month and is a good way to test features.
- New users often receive a free trial of Pro features for the first few weeks.
Choosing a Plan
- Hobby Plan: Free, suitable for small projects.
- Pro Plan: $20/month, removes most usage limits for professional work.
- Pro+ Plan: $60/month, designed for those who rely on AI agents heavily.
- Ultra Plan: $200/month, offers high usage limits and priority access to new features.
- Teams: $40/user/month, includes centralized billing and admin dashboards.
Consider starting with the free tier to get familiar with Cursor before upgrading to a paid plan if you need more features.
Understanding the Interface
Cursor 2.0 was released on October 29, 2025, with a new coding model and agent interface. The layout feels familiar to anyone who has used VS Code. AI integration is present throughout the workflow.
- Ctrl+L (Windows) or Cmd+L (Mac): Open the sidebar chat for AI conversation.
- Ctrl+K: Open an inline prompt for code generation at your cursor position.
These shortcuts cover most AI interactions.
Choosing an AI Model
Cursor supports several leading AI models, including OpenAI, Anthropic, Gemini, and xAI. As of April 2025, Claude 3.7 Sonnet is the most used by Cursor users, followed by Gemini 2.5 Pro. Switching models is possible at any time based on your needs.
- Composer Model: Version 2.0 introduced Composer, Cursor’s high-speed proprietary coding model.
- Parallel Agents: Run up to eight agents in parallel using git worktrees or remote machines, each operating in its own copy of the codebase.
This setup helps avoid file conflicts and speeds up development.
Setting Up Your Web Project
- Open Cursor and create a new folder for your website project.
- Use the File menu or terminal to make the directory.
- Navigate to the folder inside Cursor.
- Open the chat panel (Ctrl+L or Cmd+L).
- Type a prompt to describe the website you want. For example:
Create a React website with Next.js and Tailwind CSS. The site should have a home page, an about page, and a contact form. Set up the project structure with the App Router.
Cursor generates the files and folder structure based on your prompt. Review the suggested changes using the readable diffs before accepting.
Adding Cursor Rules
Cursor Rules guide the AI in code generation. Community-created rules are available at Cursor.directory. To add rules, create a .cursorrules file in your project’s root directory and include guidelines such as:
- Use TypeScript for all files
- Follow React best practices
- Use Tailwind utility classes for styling
- Use the Next.js App Router conventions
- Keep components small and focused
Set global rules in Settings or project-level rules in .cursor/rules files to keep generated code consistent with your preferences.
Building Your First Page
Once you’ve set up your project, begin by building the home page. Open the chat panel and describe your requirements.
Create a home page with a hero section that has a headline, a short description, and a call-to-action button. Add a features section below with three cards that highlight the product’s main benefits.
Cursor generates the component code. The editor works smoothly with React, Next.js, and Tailwind CSS, offering valuable suggestions for components and understanding server components and API routes.
Using Tab Completion
- While working in your files, Cursor shows tab-completion suggestions as you type.
- Press Tab to accept the suggestion.
- This feature accelerates repetitive tasks and reduces the need to switch panels.
Inline Edits with Cmd+K
For targeted changes:
- Select the code, then press Ctrl+K or Cmd+K.
- Describe the change you want. For example, make this button larger and change its color to green.
Cursor updates the selected code based on your description. This works well for quick adjustments when you know what you want to change.
Building Additional Pages
Repeat for additional pages by opening the chat and describing each page you want to create.
Create an About page with a team section that lists three team members, each with a photo, name, and short bio. Include a company mission statement at the top.
Create a contact page with a form that collects name, email, and message. Add form validation and a submit button.
Cursor generates each page based on your prompts. Review the code, adjust with inline edits, and continue building as needed.
Using the Visual Editor
Cursor offers a visual editor for the Cursor Browser that combines your web app, codebase, and editing tools in one place. Drag elements, inspect components, and make changes by pointing and clicking.
The visual editor lets you adjust layout or structure without writing code. Drag and drop elements to rearrange your page, and the tool automatically syncs changes back to your code.
Working with Checkpoints
Experimentation is part of the process. If the AI produces code that isn’t working as expected, use Cursor’s checkpoint system to roll back to earlier versions.
- Click the restore checkpoint button beside any previous chat message to revert to that state.
- Rolling back and trying again can be quicker than troubleshooting some issues.
Debugging with AI
- If there’s an error, paste the message into the chat panel.
- Describe what you expected and what happened.
- Cursor will analyze the problem and suggest solutions.
- For complex issues, add context by including relevant code files.
- Type @ in the chat to select files.
- Cursor will review the files and offer more targeted solutions.
Cursor’s tools recognize your codebase structure, which makes it easier to catch issues that span multiple files or involve component dependencies.
Deploying Your Website on GreenGeeks
Once your website works locally, you’ll need hosting to make it accessible online. We offer reliable hosting focused on performance and environmental responsibility. Our entry-level shared plan starts at $2.95 per month.
We match 300% of the energy we use with renewable energy credits and plant a tree for every hosting account through our partnership with One Tree Planted. Since 2008, we’ve been recognized by the U.S. Environmental Protection Agency as a Green Power Partner.
Performance Features
We use LiteSpeed servers across all shared hosting plans, including our entry-level offering.
- SSD RAID-10 Storage Arrays combined with LiteSpeed servers and MariaDB databases.
- LiteSpeed Cache for faster page speeds.
- 99.97% uptime on our platform.
- Unmetered transfers, unlimited bandwidth, and unlimited databases on all plans.
- Free SSL certificates are automatically installed on every domain through Let’s Encrypt and renewed every 90 days.
Security and Extras
- DDoS protection, web application firewall, and automatic malware scanning are included with all plans
- Free migration assistance
- Panel for server management
- Softaculous for installing WordPress or 150+ other applications
- Free domain for the first year
- Daily backups
- CDN integration
- 30-day money-back guarantee
Uploading Your Site
- Export your website files from your local project.
- Log in to your cPanel account and upload files to the public_html directory.
- For static sites, this completes deployment. For Next.js sites with server-side features, additional configuration or a Node.js hosting environment may be required.
Keep Building
In practice, Vibe coding can speed up setup by about 35%, according to developer reports. Cursor helps by handling boilerplate and scaffolding components and routes.
The process involves specifying what you want, reviewing the AI’s output, and iteratively adjusting it until it meets your requirements.
Scrimba’s “Vibe Coding with Cursor AI” course on Coursera covers:
- Using the AI chat panel to generate and refine code
- Building applications with agent features
- Debugging with context-aware tools
Start with a small project, such as a personal portfolio or landing page. Practice using the chat panel, inline edits, and tab completion. Checkpoints make it easy to experiment and learn. Deploy your site with us when you’re ready to share your work.
