Vibe Coding for Designers Part 1: Bringing Your Vision to Life with Cursor

For this article, I’m firmly planting the designer’s hat upon my head. If you are interested, in my head, the designer’s hat is a beret - sometimes you can’t beat a good cliché.

Designers and code have always had a bit of a polite distance - like neighbours who wave from across the street but never quite make it to dinner. OK, OK, not always - sometimes it’s an impolite gulf, but let’s play nice. We sketch, they compile. We think in grids and gradients; they think in functions and frameworks.

But now, the wall between design and development has started to crumble - not through more tutorials or handoff tools, but through something far more natural: conversation.

Cursor, an AI-forward code editor, can act as your bridge. It listens. You talk. It writes. You refine. Suddenly, the barrier between idea and implementation feels more like a permeable membrane than a brick wall.

And that’s where vibe coding comes in.

Vibe coding isn’t about learning to code - it’s about learning to think in code.

It’s a designer’s way in: intuitive, fast, slightly chaotic, but always rooted in visual logic. You already understand structure, flow, contrast, and hierarchy. Code just gives those instincts a new dialect.

Getting Started: Installing Cursor

Before we dive into the fun stuff, you’ll need Cursor on your machine.

Cursor is available for macOS, Windows, and Linux. You can grab it here:
https://cursor.sh

Installation is straightforward:

1. Download the installer for your platform.
2. Open it, follow the usual prompts, and sign in with GitHub or Google.
3. Once inside, Cursor will automatically detect your local code projects.
4. You can start a new folder from scratch — or open an existing design prototype repo and begin vibe coding immediately.
5. You’re there, let’s go.

Cursor looks and feels a lot like VS Code, but with a built-in AI brain that understands context, files, and intent. You don’t need to add extensions or external APIs to get started - the smart stuff is already baked in.

Free tier limitations:
The free plan gives you access to basic AI completions and chat features, but with a daily cap on requests and no access to private MCP servers (you don’t need these for the MCP’s mentioned in this article) or advanced model options.

If you plan to use Cursor heavily for design-to-code work (especially with Figma or Chrome MCP integrations), the Pro plan unlocks unlimited AI actions, faster model access, and shared team rules.

It’s worth it - you’re not just paying for speed, you’re paying for consistency.

The Vibe Coding Mindset

Here’s the trick: code is just a structured description. If you can describe what you want clearly enough — in design terms, human terms, vibe terms - Cursor can translate it into code.

Think of it as a kind of structured daydreaming. You’re not writing syntax; you’re sketching with words. Cursor fills in the details, like an endlessly patient developer who gets your taste.

Let’s say you’re designing a hero section.

You type:

“I need a main container for the hero with a title, a description paragraph, and a call-to-action button.”

Cursor replies with fully formed HTML.

Then you add:

“The hero container should be full-width with a dark background. The title needs to be large and white.”

Cursor translates that into CSS.

And maybe, just for fun:

“When the button is clicked, toggle a hidden class on the description.”

Cursor adds the JavaScript.

That’s vibe coding: describing structure, style, and behaviour in your own design language, and letting the AI do the heavy lifting. You’re not learning to code - you’re learning to speak to code.

The goal isn’t perfection. It is “something”. You’re not building the final thing; you’re sculpting the shape of it. Cursor handles the tedious bits: indentation, braces, and other small acts of pedantry that make up “real code”.

Your Frontend Vibe Toolkit in Cursor

Cursor has three little superpowers that make vibe coding feel magical — like Figma, but for text.

The Chat Bar (Cmd/Ctrl + K)

This is your design assistant disguised as a developer. Open it, describe what you want, and it’ll generate it for you - files, components, layouts, anything.

For example:

“Create a simple responsive navigation bar using HTML and CSS. Logo on the left, three links on the right.”

Cursor will give you a neat little structure, media queries included.
 Or try:

“Write a JavaScript function that fetches posts from a fake API and logs them to the console.”

(Yeah, I know, most of you are never going to ask this, but… you just might when you get more used to this.)

And abracadabra - a clean async function appears, ready to go. It’s like whispering your intentions into the codebase.

Designer tip: Don’t under-describe. Be as specific about the vibe as you would be in a design critique. Use words like airy, tight, friendly, editorial, confident. Cursor understands tone surprisingly well.

Inline “Continue Writing”

Sometimes you start a thing and run out of steam - the digital equivalent of sketching a half-drawn frame before coffee. Like a really good friend, Cursor can finish your thought for you.

You start:

<span class="pre--content"><<span class="hljs-selector-tag">ul</span>><br /> <<span class="hljs-selector-tag">li</span>>Home</<span class="hljs-selector-tag">li</span>><br /> <<span class="hljs-selector-tag">li</span>>About</<span class="hljs-selector-tag">li</span>></span>

Cursor finishes:

<span class="pre--content"> <<span class="hljs-selector-tag">li</span>>Contact</<span class="hljs-selector-tag">li</span>><br /></<span class="hljs-selector-tag">ul</span>></span>

It’s like having someone who knows what you meant to do, not just what you typed.

Code Selection + Edit

When Cursor gives you something close but not quite, highlight it and talk back.

You might select:

<span class="pre--content"><span class="hljs-selector-class">.button</span> {<br /> <span class="hljs-attribute">background-color</span>: blue;<br />}</span>

and say:

“Make this a gradient from light blue to deep sapphire and add a subtle shadow.”

Cursor instantly rewrites it. No syntax searches, no trial and error. Just “the blue you had in mind” - now, in code.

A Designer’s Frontend Workflow

Now that you’ve got your tools, here’s how to actually work in vibe code.

Think of this as the designer’s version of a development workflow: structure, style, and interaction.

Structure (HTML Vibe)

Start with the bones. Use the Chat Bar to describe what the component is.

“A product card with a header, image, price label, and ‘Add to Cart’ button.”

Focus on meaningful names - product-card, price-tag, buy-button. Do this in your Figma practice too, keep it meaningful — semantics matter.

These are your design tokens in text form.

Style (CSS Vibe)

Once the scaffold is there, move to appearance.

“This card should have rounded corners, light padding, and a soft shadow. Max width 300px.”

Cursor writes the CSS for you. You’re still designing — just through words.

Interaction (JS Vibe)

The fun part. Describe behaviour as you’d describe a microinteraction to a developer.

“When you click the menu button, toggle the is-open class on the nav list.”

That’s enough for Cursor to write the function. You describe the behaviour; it writes the logic.

At every stage, you’re focusing on intent. What does this component do? What does it feel like? Cursor will translate that into functional frontend code.

Iterating on the Vibe

Vibe coding isn’t about getting it right the first time. It’s about rough drafts and quick refinement - like sketching thumbnails before a layout. You’re sculpting through iteration, and Cursor makes that beautifully fast.

Refining with “Explain & Edit”

Highlight any section and ask Cursor to transform it. You don’t need to know the syntax; just tell it the direction.

“Make this follow the BEM naming convention.”

“Refactor this loop to use .map() instead of for.”

“Add clear JSDoc comments explaining the parameters.”

“Add appropriate ARIA labels for this button and section.”

It’s not about learning new acronyms - it’s about keeping your code as elegant as your design files.

Instant Code Cleanup
Designers hate messy layers (all other designers’ layers); developers hate messy code (all other developers’ code). Cursor keeps both worlds neat.

• Highlight a chunk and say, “Format this with Prettier.”
• Ask, “Why isn’t this function firing?” and Cursor will check your logic.

You get tidy, functioning code without losing your creative flow - like an assistant quietly cleaning up your Figma layers while you work.

The Importance of Rules

Rules in Cursor are like your creative direction manual - invisible hands keeping the project consistent. They define the tone, structure, and standards Cursor’s AI follows whenever it writes or edits code. Think of them as your studio’s coding style guide, baked right into the AI.

Rules can tell Cursor to:

• Use Tailwind or BEM naming conventions.
• Keep code formatted with Prettier.
• Write accessible HTML by default.
• Comment every function for readability.
• Use British/International spelling in documentation (you pick your language imperium, no judgement).

By setting Rules, you’re teaching Cursor to think like your team. The AI stops guessing and starts behaving your way.

If you skip the Rules, Cursor is a brilliant but unpredictable intern. With them, it becomes your reliable, on-brand collaborator. Structure doesn’t kill creativity - it protects it.

Building with Components

Once you’ve built a few standalone elements, you’ll start seeing them as a design system - buttons, cards, modals, each with a consistent vibe. Cursor makes that modular mindset effortless.

Tell Cursor:

“Create a new Product Card component. I need three files: ProductCard.html, ProductCard.css, and ProductCard.js. The JS handles the Add to Cart button.”

Cursor generates them, links them, and adds little guiding comments. You’ve just scaffolded a component like a senior developer, but in human language.

Now reuse that vibe - make variations, themes, or states without starting over.

Highlight your ProductCard.css and say:

“Make a new file called FeaturedCard.css, same structure but dark grey background and white text.”

Or take the HTML and say:

“Use this as a base for a User Profile Widget — replace product elements with an image, name, and short bio.”

In seconds, you’ve gone from product card to profile card. Systems thinking, powered by prose.

This can really rock your world when you couple this with Atomic Design principles. Seriously, lean into this.

Integrating the Vibe Back into Design

This is where vibe coding really shines. The line between your design tool and your code editor starts to blur - and that’s a good thing.

Because you wrote the code through intention and description, it already reads like design documentation. Your CSS is tidy, your class names make sense, and your JS behaviours are transparent. Cursor’s output can drop straight into Storybook, CodeSandbox, or Framer.

You can even use the code for interactive prototypes - actual working components that behave like the finished product, not just animated GIFs, or Figma, pretending to be websites.

Your prototypes stop being approximations of your design and start being previews of your product.

This is also very nice to hand over to developers for polishing into production-ready code.

Setting Up MCP in Cursor: The Full AI Loop

Here’s where things get seriously interesting.

You’ve dabbled and had some fun, but you are finding that instructing Cursor just isn’t delivering on your end goal, especially in visual design terms. You’ve done your thinking in Figma, and no matter how much you try to back Cursor into a corner, it refuses to play ball and give you something that matches.

Luckily, there is an answer.

Cursor now supports MCP - the Model Context Protocol, which allows your AI tools to talk directly to other systems like Figma or Chrome DevTools.

It’s the handshake between your design, your code, and your browser.

It means Cursor can now read, not just screenshot, a design, generate the implementation, check it in a real browser, and refine it - all in one continuous AI loop.

Figma MCP

Figma’s MCP integration makes your design files part of the AI’s working memory. It can see frames, components, and text styles - not just the prompts you type.

🔗 https://www.figma.com/mcp-catalog/

Add this configuration to your Cursor settings.json:

<span class="pre--content"><span class="hljs-punctuation">{</span><br /> “mcpServers”<span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"Figma"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"url"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"https://mcp.figma.com/mcp"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"headers"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><br /><span class="hljs-punctuation">}</span></span>

Then visit the Figma MCP Catalog and click Add MCP to Cursor.
 Authorise with your Figma token, choose your workspace or project, and you’re set.

Now you can say things like:

“Read the Hero section from our Figma design. Generate HTML and CSS that match it exactly.”

Cursor knows the colours, typography, and spacing without you lifting a ruler.

Tips

I’ve found better results when I use Figma’s Link To Selection. There’s just less scope for ambiguity.

Copy/Paste as > Copy link to selection
to provide context to Figma. I’ve also found this better for directing other people to what I’m talking about in Figma.

Not casting aspersions, but… the tidier and better-named your Figma layers, the better Cursor and developers will get on with your designs. Hygiene matters!

The Auto layout feature in Figma should be used wherever possible and sensible, as it just translates really well into code when Cursor and developers implement it. The Grid beta may be a little tricky, but I’m sure it will improve, and your mileage may vary on this.

Chrome DevTools MCP

This MCP lets Cursor launch a browser, inspect your live page, and analyse what it’s made.
 🔗 https://developer.chrome.com/blog/chrome-devtools-mcp

Add this configuration:

<span class="pre--content"><span class="hljs-punctuation">{</span><br /> “mcpServers”<span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"chrome-devtools"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"command"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"npx"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"args"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br /> <span class="hljs-string">"chrome-devtools-mcp@latest"</span><br /> <span class="hljs-punctuation">]</span><br /> <span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><br /><span class="hljs-punctuation">}</span></span>

Now, Cursor can open your project in Chrome, check layout, performance, and accessibility, then feed that data back into the AI. It can see if your button’s off-centre, if your text overflows, or if your LCP needs improving - and adjust the code to fix it.

Note that together these look like this:

<span class="pre--content"><br /><span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"mcpServers"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"chrome-devtools"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"command"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"npx"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"args"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br /> <span class="hljs-string">"chrome-devtools-mcp@latest"</span><br /> <span class="hljs-punctuation">]</span><br /> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"Figma"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"url"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"https://mcp.figma.com/mcp"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"headers"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><br /><span class="hljs-punctuation">}</span></span>

Also, be sure to check the official documentation, as the configuration may change over time.

The Full Loop

Together, these two MCPs complete the creative feedback cycle:

1. Cursor reads your Figma design via MCP.
2. It generates matching HTML, CSS, and JS.
3. Chrome DevTools MCP tests the code in a live browser.
4. Cursor analyses and refines until design and implementation align.

That’s design, build, test, and iterate - all inside one editor.

No more “handoff” - just a creative conversation between design, code, and browser.

Note

This isn’t perfect by any means; it can produce results with pretty fantastic fidelity, but it can also really miss the mark. The more practice you have with this and the better you evolve your prompting skills and Cursor rules, the more likely you’ll have better results. That word “likely” is important — we always need to remember that this stuff is non-deterministic, doing exactly the same thing does not guarantee the same result. Bear that in mind when you think you are going insane - we often misattribute this to Einstein, but the sentiment holds:

“Doing the same thing over and over and expecting different results is the definition of insanity”

In this case… You might well be right.

Closing Thoughts: The Future Has Better Tools

We used to hand over pixel-perfect mockups with seventeen export files and a silent prayer that development would “match the design.” That era is ending. Cursor and tools like it are quietly dissolving the walls between making and building.

Vibe coding isn’t a gimmick - it’s a shift in perspective. It’s what happens when you treat code as a creative medium rather than a technical barrier.

You already know how to balance a layout, guide an eye, or evoke a feeling. Vibe coding just gives you a new brush. Cursor hands you the palette and says, “Go on then - paint with text.”

So open Cursor. Start with a sentence. Something small.

“Make a hero section with a bold title and an optimistic button.”

And watch what happens.

Because once you start designing in code, you’ll realise: you weren’t avoiding it - you were just waiting for it to speak your language.

Feel free to ask questions in the comments; I’ll do my best to respond.

If you enjoyed this piece

Follow me for more articles about design-driven coding, usability, and the messy, wonderful middle ground between aesthetics and logic - and hopefully “Vibe Coding for Designers Part 2”

Author's note:

I am currently deeply interested in using AI to generate both visual and text-based content. I am actively collaborating with AI on multiple platforms to explore my thoughts on what creativity is and is not.

My current approach is to collaborate with AI by using the output as a foundation upon which to build and modify.