Vibe coding with AI tools: Speed up web development

Vibe coding represents a new era of software development where human creativity and artificial intelligence work together to produce code in a seamless, focused flow. It’s not just about speeding up development, it’s about coding with feeling, reducing friction and enhancing the developer’s experience. At Marvik, we view vibe coding with AI tools as an evolution in how we design, build and approach software.

AI copilots assist with:

• Autocompleting complex logic.
• Instantly refactoring code.
• Generating boilerplate or full components.

This allows developers to concentrate on architecture, user experience and creative problem-solving, while repetitive tasks are handled by AI.

The term “vibe coding” started gaining traction after a February 2025 tweet from Andrej Karpathy, co-founder of OpenAI. He described the sensation of coding alongside AI as smooth and almost meditative. Since then, the phrase has spread across tech communities to describe this immersive, AI-augmented programming style.

The impact of vibe coding with AI tools on modern development

At Marvik, we’re always looking for ways to optimize processes without sacrifying quality. As part of that effort, we tested a variety of AI-powered development tools to evaluate their performance and how well they could automate parts of our web development workflow. The goal was simple: measure how much faster we could build and integrate new pages into our codebase.

We focused on tools that connect directly to Figma and generate usable code from designs. Our lineup included:

• Lovable
• Tempo
• v0
• Bolt
• VSCode + GitHub Copilot
• Cursor

The goal: Faster page creation

We focus on automating the repetitive but necessary task of adding new pages that follow a consistent structure. These typically include:

• A hero section with custom text and background image.
• Informational sections reusing common components and icons.
• Carousels or showcases with dynamic content.
• Language translation files that map text for internationalization.

To streamline this process, we created prompt templates that could auto-generate the relevant JSX/React and JSON files based on content from our Figma designs.

Figma-Based tools: Lovable, TempoAI, v0 and Bolt

These tools are excellent when you’re building something new from the ground up. They offer quick ways to turn visual designs into code. Ideal for landing pages, prototypes or small sites.

However, we ran into challenges when integrating their output into our existing codebase:

• Bolt was useful for creating a starting point, but adapting it to our architecture required significant effort.
• Lovable, TempoAI and v0 performed similarly: efficient at design-to-code, but lacking flexibility to adapt to custom architecture or reuse logic.

These tools work well for greenfield projects, but less effective for integration into mature codebases.

How we used cursor: A practical example

The following example illustrates the necessary prompts to modify the ShowCase section component, aligning with the target design.

Initially, both the image of the new design and the current component code were shared in the chat for context definition.

Subsequently, an additional prompt was issued to rectify an issue, since the implemented changes caused the card information to render incorrectly.

The next step involved requesting a subtitle modification: adding gradient color and correcting its alignment.

The final step involved the modification of language texts for i18n implementation, ensuring the display of accurate titles and content on the page.

So, after all these steps, we finally achieve the expected result:

How to use Cursor efficiently

To use Cursor efficiently and get the most out of its prompts, we recommend the following structured approach:

Understand what Cursor is:

• Cursor is a code editor with AI built in, based on VS Code.
• It helps you write, edit, refactor and understand code with AI assistance.
• It uses the actual code and file context, making prompts much more accurate than in a standalone chat.

Write efficient prompts:

• Be direct and specific about the problem: Focus on clear, targeted tasks.
  • Example: “Rewrite this function using async/await without changing logic.”
• Ask for explanations: Useful when working with legacy code.
  • Example: “What exactly does this reducer do?”
• Request alternatives: Compare multiple approaches.
  • Example: “Give me another way to do this without using useEffect”
• Use structured comments: Cursor interprets comments as instructions.
  • Example: “Improve performance of this loop”
• Work in chunks: “Break complex code into smaller, manageable sections”
  • Example: Refactor one function at a time.

Extra tips:

• Use the LLM to generate unit tests and help debug your code.
• Use the right click and ask Cursor for context-aware suggestions based on selected code.

MCP – Model Context Protocol

MCP is an open protocol that standardizes how applications provide context and tools to LLM. Think of it as a plugin system for Cursor, it extends the AI’s capabilities by connecting to data sources and tools through standardized interfaces. 

It brings the following features:

• MCP Defines how context is selected and structured when sending prompts to the AI.
• Organizes project files, user actions, code changes and navigation history into a rich but compact context.
• Allows the AI to understand what you’re working on without exceeding token limits.

Example in action:

Let’s say you are editing a component called UserForm.tsx. MCP will do the next steps:

• Include related files like UserSchema.ts or FormStyles.scss
• Add recent edits you have made to Validations.ts
• Structure this into a prompt that LLM can process effectively.

The MCP servers are lightweight programs that each expose specific capabilities through the standardized Model Context Protocol

Most popular MCP servers:

• GitHub Copilot Workspace.
• Jupyter MCP.
• SQLite MCP.
• Docker MCP.

If you’re interested in exploring the full potential of MCPs, take a look at our related blogs: Model Context Protocol: Integrating agents in the AI cloud and Model Context Protocol: Supercharge your agents with MCP.

Cursor rules

As developers, we can define rules to guide the behavior of the AI agent inside Cursor when it interacts with our code, whether refactoring, completing code or generating unit tests. These rules are essential to prevent hallucinations, the creation of nonexistent structures or unwanted changes.

Example:

RULES:

- Do not create new functions, files, or imports that don’t exist.

- Only use libraries already imported in the current file.

- Use ES6+ syntax (const/let, arrow functions, etc.).

- Follow the project's existing naming conventions and folder structure.

- Do not modify unrelated code blocks.

- Keep changes minimal and focused unless specified otherwise.

- Preserve existing function signatures and parameters.

- Prefer async/await over Promises with .then() when dealing with async code.

- Do not introduce TypeScript or typing — stick to plain JavaScript.

- Add comments only if necessary for clarity.

- Only modify the current file unless explicitly told to update others.

We could incorporate these rules into an initial prompt or as a comment (//) within the code. Cursor recognizes and respects them as contextual guidance for editing.

Pros – Cons for each tool

Time saved: Metrics that matter

We measured how long it took to generate and adapt a new page using different tools:

That’s a 75% time reduction with AI-assisted workflows.

What worked best (and why)

Figma-based tools like v0, TempoAI, and Bolt are fantastic for rapid prototyping and fresh builds. But in mature codebases, their output required too much cleanup.

This is where tools like GitHub, Copilot and Cursor stood out.

By combining prompt engineering with code-aware environments, we were able to:

• Generate new page templates with real data and logic.
• Automatically generate and populate translation files.
• Reuse and adjust existing components with minimal effort.

The difference lies in context awareness. When tools like Cursor or GitHub Copilot understand your project’s structure, they become far more than autocomplete, they act like collaborators.

Tasks that once took hours (copying code, adjusting props or linking translations) now take less than 30 minutes with a few targeted prompts and the right setup.

Final thoughts

If you’re launching a brand new web project, Figma-based tools like v0 and Lovable are a great place to start. They help you go from design to code in no time. But if you’re working within a larger, structured codebase, nothing beats the efficiency of Copilot and Cursor with properly scoped prompts.

Vibe coding powered by AI tools like Cursor and GitHub Copilot is reshaping how developers approach software creation. It’s no longer just about writing lines of code, it’s about enhancing the experience of coding through flow, creativity and collaboration with intelligent assistants.

In essence, Vibe coding with AI tools isn’t just a trend, it’s a new development philosophy. It elevates both, productivity and enjoyment, enabling teams to build better software, faster and with more intention.

At Marvik, this combination helped us cut development time dramatically, without sacrificing consistency or quality.