💡 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:

V0 (v0.dev):
AI-powered UI generator using Next.js and Tailwind; good for dev-ready UIs

Lovable (lovable.so):
Prototyping tool with a Figma-like interface and AI features

Bolt (bolt.new):
Build production-ready SaaS apps with AI and prebuilt templates

Firebase Studio (firebase.studio):
AI-powered Firebase app scaffolder with UI, auth, and DB integration

🧱 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

LabelMeaningContextBackgroundProblemTaskInstructionsConstraintsExamplesDemosOutput FormatDesired 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 ToggleContext:
We want users to toggle between dark/light themes.Instructions:
- Add button in navbar  
- Store preference in local storage  
- Use Tailwind for styling

🧪 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

💡 In-Component Prompting

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

Is super helpful to add a comment with the name of the file you are referring to, in this case for example: index.tsx

This helps the AI to have context and deliver a more accurate response.

// index.tsx

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

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

🔧 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 dataTech Stack  
- Next.js, TypeScript, TailwindCSS  
- APIs: ExchangeRate-API, Faker APIOutput Format  
Component breakdowns, folder structure suggestions

🌐 Useful tools to use in prototpying

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

📸 Image APIs

Unsplash (Also use the API)
unsplash.com

Lorem Picsum (Random images)
picsum.photos

👤 Fake Data APIs

Fake profiles
randomuser.me

Faker API (Names, addresses, etc.)
fakerapi.it

📊 Data APIs

OpenWeatherMap (Weather data)
openweathermap.org

ChartJS (Charts)
chartjs.org