10 Prompting Rules I Learned After Vibe Coding 113 Interactive Demos

I've been vibe coding for months now. Not writing code line by line, but describing what I want and letting AI build it. It started as an experiment. Now it's how I build everything on this site.

Here's what I've learned: the quality of what you build is directly tied to how you prompt. Not how much you know about React or CSS. How you communicate intent.

These are 10 prompting rules I use every day. They come from building 146 interactive demos, dozens of components, and making plenty of mistakes along the way.

1. Context before task. Always.

The biggest mistake I see: jumping straight to what you want built. "Make me a card component." That's how you get something generic.

Instead, front-load the context:

• Who you are - "I'm a product designer building a pattern library"
• What exists - "I'm using React, Tailwind, dark mode, Inter font"
• What you want - "Add a product card to the instant buy demo"
• How it should feel - "Minimal, zinc palette, subtle borders, no shadows"

The order matters. Context before task changes everything about what the AI generates.

2. Give AI your design language first

This is the single highest-leverage thing you can do. Before building anything, hand the AI your design system: colors, fonts, spacing, border radius, component conventions.

I wrote a Design System to AI Prompt template for exactly this. You run it once, get a formatted system prompt, and paste it into your AI tool's custom instructions. From that point on, every component the AI generates matches your system.

Without it, you'll spend half your time saying "no, use zinc-800 not gray-700" and "round the corners more." With it, the AI just gets it right.

Even better: use Agent Skills to bake your design language into the AI permanently. Skills like Frontend Design and Brand Guidelines give the AI your conventions once , then it applies them automatically, every time.

3. One change per prompt

This is the rule I break most often, and I regret it every time.

Bad: "Build me an e-commerce checkout with cart, payment, shipping, order confirmation, and a receipt."

Good: "Add a product card with image, title, price, and a Buy Now button."

Then: "Now add a checkout step when Buy Now is clicked."

Then: "Add a receipt view after checkout."

This is exactly how I built the Instant Buy demo on this site. Each prompt was one clear change. I reviewed, adjusted, moved forward. The conversation became the version history.

4. Point at examples, don't describe from scratch

Instead of writing a paragraph about what you want, reference what already exists:

• "Make the card look like the ones on the landing page"
• "Match the button style from the TopBar component"
• "Use the same animation pattern as the streaming demo"

AI is excellent at pattern-matching existing code. Pointing at examples beats writing specs every time. And as a designer, you already think in references. Use that.

5. Describe the interaction, not the implementation

You don't need to know React to vibe code. You need to know what the user should experience.

Bad: "Add an onClick handler that sets state to 'confirm' and conditionally renders a different div."

Good: "When the user clicks Buy Now, show a confirmation step with payment and shipping address."

Let the AI figure out the implementation. You own the experience. This is the designer's edge in vibe coding. You think in user flows, not function calls. The UI/UX Pro Max skill is built around exactly this , it teaches the AI to think in user interactions, not code abstractions.

6. Use constraints like a design brief

Designers think in constraints. Use them in prompts:

• "Keep it under 100 lines"
• "No external dependencies"
• "Must work on mobile"
• "Use only existing components, don't create new files"
• "Match the exact padding and font sizes from this file"

Open-ended prompts produce generic output. Constraints produce focused, opinionated output. Just like a good design brief. Skills like Accessibility Expert and Web Interface Guidelines work the same way , they're persistent constraints that ensure the AI never forgets focus states, ARIA labels, or semantic HTML.

7. Refine, don't regenerate

When something's off, resist the urge to start over. Small surgical edits are faster and more predictable than wholesale regeneration.

• "Make the font bigger" (not "rebuild with larger fonts")
• "Remove the icon from the button" (not "redesign the button")
• "Change the vendor from Amazon to a generic name" (not "update the product card")
• "Use gray background, the green is not readable" (not "fix the receipt card")

Each of these is a real prompt I used building this site. Specific, surgical, one thing at a time. The AI keeps everything else intact.

8. Use screenshots as prompts

This is the designer's secret weapon. Instead of describing what you want, show it:

• "Rebuild this in React + Tailwind" (attach a screenshot)
• "The spacing feels off compared to this reference" (attach both)
• "Make mine look more like this" (attach inspiration)

You've spent years developing a visual eye. Screenshots let you use that skill directly in your prompts. A picture is literally worth a thousand words of description.

9. Build ugly first, then polish

Separate structure from style from interaction:

1. "Build the layout and data structure"
2. "Now style it with dark background, subtle borders, Inter font"
3. "Add hover states and transitions"
4. "Add the loading and empty states"

When you ask for everything at once, the AI makes trade-offs you didn't ask for. It might skip the hover state to fit within the complexity budget, or simplify the layout to accommodate the animation. Separating passes means you control the priority.

10. Tell AI what NOT to do

Negative prompts are surprisingly effective at avoiding the "AI look":

• "Don't use blue. Use the zinc palette"
• "No emojis in the UI"
• "Don't add comments to the code"
• "Don't create new files, edit the existing one"
• "Remove the AI generated dashes"

Every AI has default tendencies. ChatGPT loves blue buttons. Claude loves em dashes. Cursor loves creating new files. Knowing the defaults and explicitly saying "not that" gives you output that feels like yours, not theirs. The UX Writing skill does this for copy , it enforces your voice and tone so the AI stops defaulting to generic, overly enthusiastic text.

The Anti-Patterns

While we're at it, here's what to avoid:

The Real Skill

Vibe coding isn't about knowing how to code. It's about knowing how to communicate design intent clearly enough that AI can execute it. And as designers, that's literally what we've been training for. We write design specs, create handoff docs, annotate Figma files, and explain interactions to engineers every day.

Prompting is just design communication with a different audience.

The designers who get good at this aren't learning to code. They're learning to direct. And that's a skill worth investing in.