Vibe coding with AI tools: A marketer’s guide

Coding websites was my personal Everest in college, when I first started to learn WordPress to help my dad build his domain portfolio. 

He had registered thousands of domains while flipping through the dictionary in the early ‘90s, and if I had AI capabilities back then, I’d be retired by now. 

Alas, we’re finally living the future. 

Last week, I individually built 12 landing pages in two days using Cursor, an AI-powered code editor that allows you to generate and edit landing pages using simple prompts, no hand-coding required. 

What used to take me a marketing manager, copywriter, designer, developer, and weeks of production, was suddenly handled in a fraction of the time by a single expert within one platform.

Wielding this “AI developer” felt like unlocking a coding superpower overnight, but I certainly had a few moments of rage while learning alongside my Fractl co-founder and AI mentor, Kristin Tynski. 

My biggest learning curve? 

Understanding that Cursor is like managing an extremely talented but overly enthusiastic junior developer, prone to scope creep and mistakes if you’re not managing it closely.

After 18 years in this industry and several weeks of Cursor lessons, I have no doubt that vibe coding is the future of web development. 

What is vibe coding?

Vibe coding is an AI-driven approach where users give high-level instructions, and the AI generates the code. 

Instead of writing every line of code manually, users guide the AI through prompts and feedback, allowing for faster and more accessible web development.

To give you a leg up, I’ve distilled my most essential learnings into our top tips for setting up an effective AI development workflow. 

1. Invest in a robust training library 

The first step in building my landing pages was developing a solid resource library that Cursor could learn from and draw on to assemble my content. 

To start, I created a desktop folder with the following resources: 

• An HTML file of the landing page template I wanted it to replicate (including style.css).
• Image files of Fractl Agents in action that I wanted to feature on each page.
• A CSV that included the name of each agent and a summary of its core functionality.
• Our brand style guide with HEX colors.
• An expert persona I wanted it to emulate when writing.

Always consider the resources that would make the foundation for any marketing manager to complete a similar project with your developer. 

Remember, the file nomenclature you use and your project/folder/file organization are paramount to your success. 

This is because the models don’t only understand context from the files themselves, but from the naming system and overall hierarchy of your project/folders/files. 

For example, anytime I took a screenshot of our internal tool, I followed a similar nomenclature so that Cursor could match the images to the associated landing page later:

It’s also important to have the proper file hierarchy, since Cursor will rely on a “Cursor Training” folder for certain tasks, but other files need to have top-level nesting for it to reference when coding: 

Make sure you organize this well from the start.

Have the AI continue organizing things with regular refinements to avoid clutter, confusing or conflicting filenames, or other inconsistencies that might make the AI assume something is wrong.

2. Choose your AI ‘developer’ wisely 

Cursor lets you choose from a library of AI models.

Each has its own strengths and weaknesses, and can dramatically affect your outcomes. 

In general, the latest Gemini and GPT models are among the most creative and powerful LLMs on the market.

However, they’re also prone to: 

• Scope creep.
• Taking creative liberties.
• Adding unrequested features that can derail your progress if you aren’t careful.

The key is to pick your AI developer based on the task at hand.

Don’t be afraid to switch models at various points in your project based on the type of creative problem solving or strict adherence you’re looking for. 

When it comes to vibe coding in Cursor, these are a few of our favorite models to rely on: 

• o4-mini: Best at planning and developing the project framework.
• GPT-4.1: Best at writing new code.
• Claude 3.5 Sonnet: Best at editing complex code within Cursor.
• Gemini 2.5 Pro: Best all-around model, and it’s free.

(Note: This is very subject to change as new models are released every few weeks.)

If you’re unsure which model to use, Cursor offers a handy auto-select feature. 

It selects the best model for the task, given the context: 

One of Cursor’s standout advantages is its ability to work with very large context windows, if you’re using the right model. 

In plain English, a “context window” is the amount of information the AI can hold in its “mind” at once. 

And with certain models, Cursor can handle a lot. 

For instance, the Gemini 2.5 Pro Max model boasts a staggering 2.5 million tokens of context capacity, roughly 25 times more than even the most generous mainstream models available elsewhere (at the moment). 

Why does this matter for a marketer building a site? 

It means you could feed huge amounts of information into Cursor, and it can consider all of it when generating output. 

You can load your entire 30-page website’s content and code structure into the prompt and ask for a consistent update across all pages in one go. 

You might also include extensive style guides, competitor pages, or a massive spreadsheet of product data, and the model can take it all into account. 

Not every model has this super memory, so you’ll need to understand the context windows right out of the gate: 

Depending on your budget, you’ll also want to understand the cost of each model in Cursor.

Some are free and others are paid, though generally these costs are minimal: 

Just because you start with one model doesn’t mean you need to finish with it. 

A pro move is to collaborate between different models throughout your project to get the best of each. 

For example, you might use Claude to outline the initial project framework because it is disciplined and adheres to your instructions. 

Once the basic page is laid out, switch to GPT-4.5 or Gemini to refine the creative details, improve the copy, or optimize the code for performance. 

Conversely, you might have a super smart model draft a complex page structure and then run a cleanup pass with a more literal model to ensure it didn’t hallucinate any extras. 

Think of this multi-model strategy as your secret sauce for building an AI team with diverse skills, that collaborates and cross-checks to deliver the highest quality output.

3. Turn your project into a step-by-step checklist of goals 

Even AI can get overwhelmed by a big project.

Breaking your workflow into a checklist of bite-sized tasks can help you ensure that Cursor:

• Understands the project and stays on track.
• Follows a structured framework to review and validate its work.

When you’re ready to get started, ask Cursor to help outline the project:  

• “Let’s map this out. My goal is to [brief project description]. Can you create a detailed, succinct checklist of tasks to help guide you through this project from start to finish? Prioritize which tasks you’ll tackle first, and highlight any dependencies you need from me.”

Through this process, Cursor often suggests additional steps (e.g., adding JavaScript for XYZ), which is a supportive type of scope creep that you can approve or adjust from the get-go. 

But once your checklist is complete and you’re ready to get started, require strict adherence from then on: 

• “Please proceed systematically with the first task on our checklist. Check your own work and prove you did it correctly and completely with a checklist. Update our checklist as you go.” 

By following a checklist workflow, Cursor treats each item in the checklist as an individual task that needs to be accomplished before proceeding. 

This will:

• Give you easy review checkpoints to assess the work quality before moving forward. 
• Keep everyone organized on what’s done and what comes next.

Cursor might list out the sub-tasks, which lets you see whether something was missed. 

By reviewing these checklists, you’ll immediately catch any errors while treating the AI like its own project manager, who can help address the issues as they crop up:

This stepwise method ensures that the AI focuses on your mission, versus using YOLO mode and letting the AI go wild, which isn’t recommended for beginners. 

---

4. Use prompts that reinforce boundaries and prevent scope creep  

Once you have your training folder set up, your model selected, and your checklist prepared, you’re ready to get started. 

Ensure you’re importing your entire “context window” (project folder) within every single prompt, so Cursor has all of the relevant information it needs to learn and stay on task: 

Remember, when working with an enthusiastic AI, it’s critical you set frequent boundaries to limit the guesswork and its “creative freedom.” 

These types of prompts give your AI assistant guardrails and should be used every single time you give it a new task: 

• “Please proceed carefully and dilligently, stay in scope and on task.” 
• “Please continue systematically. Do not go outside the scope of what I’m asking for.” 
• “Do not make sweeping changes beyond what I’ve directed.” 

Phrases like “proceed systematically” are more than just fluff.

They’re directives that shape the AI’s behavior to be more methodical, leading to better outcomes. 

Ultimately, using these types of prompts prevents the model from refactoring your entire site’s code when you only requested a new CTA button. 

The key takeaway: clearly outline the scope at the start of your project and reiterate your boundaries in every prompt to keep Cursor laser-focused on the task at hand. 

This will save you countless hours reverting surprise edits. 

5. Review changes before you commit 

Even though you may not be coding by hand, you should still keep a developer’s eye on the changes Cursor is proposing, especially deletions. 

Cursor’s interface will highlight new code in green and removed code in red if you’re editing existing files. 

As a rule of thumb, if you notice a large red number (code deletions) alongside a much smaller green number (code additions), it’s worth pausing to investigate.

This could be a sign that the AI decided to rip out a huge chunk of your existing code or content. 

Maybe it’s justified removing duplicate CSS, for example, but it could also be a mistake like deleting an entire section that it “thought” wasn’t needed. 

Don’t blindly hit accept on a massive overhaul. Ask Cursor why it’s deleting so much:

• “Explain why these deletions are necessary.” 

This puts the AI on the spot to justify its choices. 

Often, this step will either reassure you that the deletions were harmless cleanup, or reveal a misunderstanding. 

Remember, you’re the editor-in-chief here. It’s easier to catch a potential disaster before hitting the “accept” button. 

Fortunately, worst case scenario, you can always go back and easily “Restore Checkpoint” to revert your project to the last working file if all hell breaks loose from any specific change: 

6. Make a .MDC file of rules to avoid common pitfalls 

By integrating a solid .mdc file (“Memory Data Configuration”), you can build a smarter, more consistent Cursor assistant that:

• Remembers your preferences.
• Follows your rules.
• Saves you from repetitive course correcting. 

Fortunately, the Cline Memory Bank provides a preformatted collection of markdown files to get you started, comprised of several key files: 

• projectbrief.md: Outlines the project’s goals and scope.
• productContext.md: Details the business and user perspectives.
• systemPatterns.md: Describes the system architecture and design decisions.
• techContext.md: Lists the development environment and technical stack.
• activeContext.md: Captures the current state of development.
• progress.md: Tracks project status and changes over time.

As you master Cursor and complete projects, you can use your own experience and niche projects to identify the common blind spots in your specific use cases: 

Then, task Cursor with helping you create or refine a new .mdc file to help you avoid similar mistakes on future projects: 

While anecdotal, we’ve found that getting frustrated with these recurring issues results in the model matching your vibe and performing more poorly, so setting up these files helps to keep everyone more organized, happy, and motivated. 

7. The future of web development 

Success with Cursor, or any AI coding assistant, depends on structure, boundaries, and curiosity. 

• Structure, in the form of well-organized files, thoughtful prompts, and methodical workflows. 
• Boundaries, to keep the AI on track and prevent it from “helping” too much.
• And curiosity, because the more you explore its capabilities, the more you’ll realize what’s possible.

While Cursor feels like a magical, all-powerful AI coding tool, like any AI interface, it requires skill, patience, and a growth mindset to use effectively. 

Mastering Cursor means mastering collaboration: 

• Between you and the AI.
• Between different models with different strengths.
• Between the systems you build today and the smarter ones you’ll need to learn when they’re released tomorrow. 

We’re standing at the edge of a massive shift in how websites, and most digital products, will be built. 

Vibe coding isn’t a gimmick, it’s the new development workflow standard that will subsume all other workflows, at least digital ones. 

Those who lean in, experiment, and adapt will find themselves not just more productive but creatively unleashed. 

Whether you’re a non-technical marketer or a seasoned dev, AI-assisted coding is here to stay, and those who embrace it will outpace those who don’t.

View the full article