DEV Community

Cover image for Vibe-design And Vibe-coding Best Practices
Keno Reloaded Ⓥ
Keno Reloaded Ⓥ

Posted on

4

Vibe-design And Vibe-coding Best Practices

💡 This article is a knowledge base for Product Designers using AI tools.

It covers best prompting practices, real use cases and expert tips


🎯 Scope of Product Design Prompting

AI can enhance our workflows in:

  • Design critique
  • Rapid prototyping
  • Content generation
  • Accessibility checks
  • Storyboarding & user flows

This article will be focused on vibe-coding and vibe-design using tools like:

Tool Description Link
V0 AI-powered UI generator using Next.js and Tailwind; good for dev-ready UIs v0.dev
Lovable Prototyping tool with a Figma-like interface and AI features lovable.so
Bolt Build production-ready SaaS apps with AI and prebuilt templates bolt.new
Firebase Studio AI-powered Firebase app scaffolder with UI, auth, and DB integration firebase.studio

🧱 Prompting Fundamentals

✳️ High-Level Prompting Structure (Start Here)


🚀 TL;DR Prompting Checklist

  • Role: Useful for general-purpose AI, less needed with specialized models
  • Context: Set the scene
  • Task: Define what you want
  • Instructions: Include constraints, logic, tools
  • Examples: Optional but powerful
  • Output Format: Specify how you want it back

1️⃣ Context

Why does this matter? What’s the background or goal?

Give AI the big picture—tone, domain, complexity.

Example:

“I'm building a budgeting app for Gen Z users who love TikTok-style UIs.”


2️⃣ Task / Objective

What should the AI do specifically?

Be clear—code generation, naming ideas, UX review?

Example:

“Generate a React component to display upcoming subscription renewals.”


3️⃣ Instructions / Constraints

What rules or preferences should it follow?

Specify:

  • Fields, logic, behavior
  • Tech stack
  • Services or libraries to use/avoid

Example:

“Use TailwindCSS, include dark mode toggle, and pull brand icons via Clearbit.”


4️⃣ Examples (Optional but Powerful)

Sample input/output for guidance.

Example:

"Spotify — $9.99 / month — Renews May 1"

"Spotify $9.99"


5️⃣ Output Format

Define the structure of the response.

Markdown, code-only, bullet points, etc.

Example:

“Output a TypeScript file with a SubscriptionCard component only.”


🧠 Mapping Prompt Labels

Label Meaning
Context Background
Problem Task
Instructions Constraints
Examples Demos
Output Format Desired result

💡 Pro tip:

If unsure how to start, ask ChatGPT to create the prompt for you based on your tool. Still provide some context.

You can also copy the TL;DR checklist above and ask the AI to fill it in.


🔁 Prompt Refinement

Iterate!

  • Add follow-ups
  • Rephrase tasks
  • Provide more context or examples
  • Try different models or reset the chat

Einstein said it best:

“Insanity is doing the same thing over and over and expecting different results.”


📌 Improve Clarity with Examples

❌ "Update the image on the thing that switches the dark mode"

✅ "Replace the dark mode icon in the <ToggleTheme /> component with a moon SVG from Feather Icons"


🧠 Expert Prompting Tips

💬 Speak the AI’s Language

  • Refer to components/files by exact names (home-page.tsx)
  • Use single backticks for inline code
  • Use triple backticks for code blocks

🖼️ Use Visual + Structural Context

  • Upload UI screenshots
  • Include folder structure, diagrams
  • Screenshot component trees

🧩 Example Prompt Format

Feature: Dark Mode Toggle

Context  
We want users to toggle between dark/light themes.

Instructions  
- Add button in navbar  
- Store preference in local storage  
- Use Tailwind for styling  
Enter fullscreen mode Exit fullscreen mode

🧪 Prototyping & Visual Prompts

Upload wireframes, hi-fi prototypes, and UI screenshots. Reference them clearly.

Example:

👉 “The first image is the homepage UI. The second is the user profile.”


🧾 Folder Structure Prompting

Include structure when relevant.

Example:

src/
  components/
    SubscriptionCard.tsx
  pages/
    index.tsx
Enter fullscreen mode Exit fullscreen mode

💡 In-Component Prompting

In the <TabsComponent />, add a new tab called “Insights”

// index.tsx
import { Global, css } from "@emotion/react";

const GlobalStyles = () => (
  <Global
    styles={css`
      .docblock-source {
        margin: 0;
      }
    `}
  />
);
Enter fullscreen mode Exit fullscreen mode

🔧 Prototyping Tools (e.g. V0) Prompt Template

Task  
Build a [Descriptive Name] Web App using Next.js.

Context  
Create a fast, appealing UI to [briefly describe purpose].

Features & Instructions  
- Feature 1: [List feature details]  
- Feature 2: [Details]

Additional Requirements  
- Multi-currency support  
- React Lucide icons  
- Supabase for data

Tech Stack  
- Next.js, TypeScript, TailwindCSS  
- APIs: ExchangeRate-API, Faker API

Output Format  
Component breakdowns, folder structure suggestions
Enter fullscreen mode Exit fullscreen mode

🌐 Useful tools to use in prototpying

Look for thousands of public APIs here: https://publicapis.io/

📸 Image APIs

API Purpose URL
Unsplash UI placeholders unsplash.com
Lorem Picsum Random images picsum.photos

👤 Fake Data APIs

API Purpose URL
Random User Generator Fake profiles randomuser.me
Faker API Names, addresses, etc. fakerapi.it

📊 Data APIs

API Purpose URL
OpenWeatherMap Weather data openweathermap.org
ChartJS Charting chartjs.org

Postmark Image

"Please fix this..."

Focus on creating stellar experiences without email headaches. Postmark's reliable API and detailed analytics make your transactional emails as polished as your product.

Start free

Top comments (0)