Vibe-design And Vibe-coding Best Practices

Listen to the podcast version of this article:

AI-Prompting for Design Best Practices

Using v0

Use AMBOSS Design System v0 Starter

1. v0 <> AMBOSS Design System starter https://amboss-registry.vercel.app/starters

2. Select a starter and click “Open in v0”

Prompting Fundamentals

High-Level Prompting Structure (Starting point)

TL;DR Prompting Checklist

• Context: Set the scene

• Task: Say what you want

• Instructions: Add constraints, tools, logic

• Examples: Optional, but improves results

• Output Format: Say how you want it back

1. Context

Why does this matter? What is the background or goal?

Give the AI enough info to understand the bigger picture. This helps tailor the tone, complexity, or domain-specific terms.

Example:

"I'm building a budgeting app focused on Gen Z users who love TikTok-like UI."

---

2. Task / Objective

What do you want the AI to do, specifically?

Be precise. Is it generating code? Naming ideas? Reviewing UX? Answering a legal question?

Example:

"Generate a component in React to display upcoming subscription renewals."

---

3. Instructions / Constraints

What are the rules, preferences, or specific features to include or avoid?

Add details here:

• Required fields, logic, UX behavior

• Tech stack

• APIs or services

• Libraries to use or avoid

Example:

"Use TailwindCSS. Pull brand icons via Clearbit. Include a dark mode toggle."

---

4. Examples (Optional but Powerful)

Show a sample input/output if possible on what’s the expected answer and which one not.

This anchors the AI’s response style and format.

Example:

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

❌ "Spotify $9.99"

---

5. Output Format

How should the response be structured?

This ensures clean results for the prompter. Specify formats like:

• Markdown

• Code block only

• JSON

• Bullet points

• CSV

Example:

"Output a CSV file with the user data only."

---

Bonus: Naming Conventions Used in Prompting

You might see these labeled differently depending on the tool or framework, but they map to the same principles:

---

Prompt Refinement

Iterate your prompt:

• Add follow up questions or rephrase the task. The more context the better.

• As Albert Einstein once said:

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

If you are not getting the results you want, try different things, here are some ideas:

• Ask questions from a different angles, try to explain the problem, don’t give the solution unless you want something to be solved exactly as you want using a specific method, tool or approach.

• Clarify vague language. Instead of saying “please update the image on the thing that switches on and off” say “Please replace the dark mode icon in the <ToggleTheme /> component to a moon <svg> icon from https://feathericons.com/”

• Start a new chat, copy and paste where you left of in the previous prompt.

• Change to another AI model, ChatGPT, Claude, Gemini

• Provide more detailed context or examples.

• Add screenshots, files, copy and paste context information.

Expert Prompting Tips & Tricks

Speak the Language of the AI Prototyping tools:

• Use the exact component and file names used in your project (e.g., home-page.tsx) to limit the context

• Wrap your text in single backticks () to refer to short code snippets or file names: (e.g., header.tsx`)

• Wrap your text in triple backticks (```) to include multi-line code.

• Use consistent naming conventions and follow the generated code convention to refer to these (camelCase, PascalCase, kebab-case, etc.)

  • camelCase: subscriptionCard.tsx

  • PascalCase: CardWrapper.tsx

  • kebab-case: home-page.tsx

• Use quotes and markdown headers to emphasize hierarchy or sections.

  • Markdown cheat sheet

Use Visual and Structural Context

• Upload screenshots of your UI for feedback.

  • ⇧ + ⌘ + ⌃ + 4 in Mac will create a virtual screenshot and automatically copy it to the clipboard and then you can paste it into the prompt

• Include sketches, drafts, folder structures, or diagrams.

• Screenshot your component tree and including the file extensions in your prompt to help AI understand your architecture.

Prompt Formatting Best Practices

# Feature: Dark Mode Toggle

## Context
We want to offer users the ability to toggle dark/light themes.

## Instructions
- Add a button in the navbar
- Store the preference in local storage
- Use Tailwind for styling

💡 Pro Tips

• Always refer to existing components or files by their exact name.

• Use markdown to show hierarchy and structure.

  • For example # Heading gets rendered as an <h1> and what this means for the AI prompt is that # Heading is an important title of a section and helps AI understand the emphasis, hierarchy and context sections

• Separate content blocks with dividers or headers.

  • Use “—-” 3 dashes or more to let AI know when you are starting a new line or a different context, for example when you paste information, and then you want to add your instructions, separate them. (in markdown this renders as an <hr /> horizontal rule (divider)

• Provide file paths to refer to your project structure helps AI understand more context and this will get you better results.

    <!-- File structure written in markdown -->
  
    /Projects/design-system/
    ├── main.js
    ├── utils/
    │   └── helpers.js
    └── assets/
        └── icon.png
  

Expert prototyping Tips

• Upload a wireframe screenshot or high-definitions prototype screenshots (for example from Dribbble or your own designs).

• Add screenshots and images to your prompt describing what you want from those images and reference them.

  For example:

  👉

  The first image called “460x0w (1).png” is the home page UI of my app, and the second image is the user profile.

• Paste the existing folder/file structure to reference locations of files and folders for AI reference.

  For example:

• Refer to specific section IDs or file names. Use back ticks to write single line code, and triple back tick to write code blocks (multi-line code).

  For example:

  👉

  can you separate the main page.tsx into different components? otherwise the page has too many lines of code

  For example:

  👉

  In the tab component <TabsComponent /> add a new tab called “insights”

  👉

  In the <div /> with the id of id="test" add another <Card /> component to display the user information.

  When referencing code is good practice to write the name of the file as a comment in this case index.tsx so AI knows exactly where this piece of code belongs, and the answer will be more accurate in the future too.

👉 Please replace margin with padding in this code:

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

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

Packages and Libraries

When we refer to “packages” and/or “libraries” these are pieces of code that were created to tackle specific but commonly encountered problems or challenges.

https://www.npmjs.com/

NPM JS is “Node Package Manager” and “JS” for Javascript

Best Practices for V0 or other prototyping tools

Prompt Template

## Task
Build a Subscription Tracker Web App using Next.js. The app helps users manage their recurring payments efficiently.

## Context
Focus on delivering a fast, lightweight, and visually appealing UI that allows users to easily track subscriptions at a glance.

## Features & Instructions

### Add a Subscription
- Fields:
  - Subscription name
  - Price
  - Currency (selectable)
  - Renewal date (date picker)
  - Brand icon (auto-fetch from public API)
  - Website URL (display with button)

### Calendar View
- Show upcoming renewal dates in a monthly and/or weekly layout.
- Suggested libraries: `react-calendar`, `fullcalendar.js`, or a lightweight alternative.

### Orbit Visualization
- A dynamic visual orbit UI where each subscription is positioned based on its renewal date.
- Subscriptions closer to the current date appear closer to the center.

### Additional Requirements
- Multi-currency support using an API like `ExchangeRate-API`
- Brand logo fetching from services like `Clearbit`, `Logo API`, or `SimpleIcons`
- Dark mode toggle
- Store data using Firebase, Supabase, or Planetscale (depending on available support in V0)

## Tech Stack
- Frontend: Next.js, TypeScript, TailwindCSS
- APIs: ExchangeRate-API, Clearbit or similar

## Output Format
Provide component breakdowns and suggestions for folder structure in a Next.js app.

## Extras
Use any open source popular packages or libraries to help you achieve the best user experience based on commonly used best practices

Commonly Used Open Source APIs for Prototyping

Images & Assets

Fake User Data

Charts, Data & Misc