AI Vibe 05 — Frontend & Design with AI

Describe the component precisely: what it looks like, what data it displays, what events it fires, and what framework/styling system to use.

# Good component generation prompt:
"Write a Vue 3 ProductCard component with TypeScript.

Props:
- product: { id: number, name: string, price: number,
              image: string, inStock: boolean }
- selected: boolean (default false)

Emits:
- 'add-to-cart' (product object)
- 'view-details' (product.id)

Design:
- White card with rounded corners and drop shadow
- Product image (aspect ratio 4:3, object-cover)
- Product name (bold, 1-2 lines truncated)
- Price (green, bold, formatted as currency)
- Out of stock badge (red) when inStock is false
- 'Add to Cart' button (disabled when out of stock)
- Ring highlight when selected prop is true

Use Tailwind CSS. No external component libraries."

Design with AI is a conversation. Start with a rough version and refine with follow-up prompts.

# Iteration 1 — get basic structure:
"Write a dashboard stats card showing a metric with a title,
 value, and percentage change badge. Use Tailwind CSS."

# Iteration 2 — visual refinement:
"Make it more modern: add a subtle gradient background,
 round the badge corners more, and add a small icon
 from Heroicons next to the title."

# Iteration 3 — dark mode:
"Add dark mode support using Tailwind's dark: prefix.
 Dark bg should be slate-800, text white."

# Iteration 4 — animation:
"Add a fade-in animation when the component mounts.
 Use Vue's Transition component, not raw CSS classes."

# Iteration 5 — responsive:
"Make it responsive: full width on mobile, half width
 on tablet (md:), one-quarter on desktop (lg:)."

Claude (and GPT-4V) can see screenshots. Describe what you see and ask AI to recreate it in code.

# When you have a design reference or see a UI you like:
"I'm looking at a dashboard sidebar navigation with:
 - Dark purple background (#1e1b4b)
 - Logo at the top left
 - Navigation items with icon + label (vertical list)
 - Active item has a purple highlight pill
 - User avatar and name at the bottom
 - Collapses to icon-only on mobile

Recreate this as a Vue 3 component with Tailwind CSS.
Use Heroicons (npm package @heroicons/vue) for the icons."

# With an actual screenshot (Claude claude.ai or API):
[attach screenshot]
"Recreate this UI section as a Vue 3 + Tailwind component."

# Utility class generation:
"Create a set of Tailwind @apply utility classes for:
 - .btn-primary (purple button with hover state)
 - .btn-secondary (outlined, same border color)
 - .card (white card with border and shadow)
 - .badge (small colored label, several variants)
Put them in a CSS file with @layer components."

# Animation generation:
"Write CSS keyframe animations for:
 - fadeInUp: fade in while moving up 20px
 - pulse-glow: repeating glow effect (purple color)
 - slideInRight: slide in from the right
Make them smooth with appropriate easing."

# Responsive layout:
"Write the Tailwind classes for a product grid that:
 - 1 column on mobile
 - 2 columns on sm: (640px)
 - 3 columns on md: (768px)
 - 4 columns on xl: (1280px)
 With 16px gap between cards."