Prompts for Generating UI Components: Patterns That Actually Work

Why Most UI Prompts Fail

Vague prompts produce generic output. "Build me a button component" gets you a basic button. "Build me an accessible button component matching our design system with these specific variants" gets you something you can actually use. The difference is specificity: constraints, context, and examples.

The Anatomy of a Good UI Prompt

Effective UI generation prompts have five parts:

1. Component identity — what it is and what it does
2. Tech stack — React, Tailwind, TypeScript version
3. Design constraints — your color palette, spacing system, border radius
4. Variant/props interface — the API you want
5. Example usage — how it will be used in context

Basic Component Prompt Template

Create a [COMPONENT NAME] React component with these requirements:

Tech stack: React 19, TypeScript, Tailwind CSS

Design tokens:
- Primary color: blue-600
- Border radius: rounded-lg (8px)
- Font: inherit from parent
- Shadows: shadow-sm for resting, shadow-md on hover

Props interface:
[LIST YOUR PROPS WITH TYPES AND DEFAULTS]

Variants needed:
[LIST VISUAL VARIANTS]

Behavior:
[DESCRIBE INTERACTIONS: hover, focus, disabled, loading states]

Accessibility:
- Keyboard navigable
- ARIA labels where needed
- Focus ring visible

Do not use any external libraries. Export as named export.

Example usage:
[PASTE A USAGE EXAMPLE]

Real Example: Data Table Component

Create a DataTable React component for displaying tabular data.

Tech: React 19 + TypeScript + Tailwind CSS

Props:
interface DataTableProps<T> {
  data: T[];
  columns: {
    key: keyof T;
    header: string;
    width?: string;
    render?: (value: T[keyof T], row: T) => React.ReactNode;
  }[];
  onRowClick?: (row: T) => void;
  loading?: boolean;
  emptyMessage?: string;
  sortable?: boolean;
}

Features needed:
- Sticky header with shadow on scroll
- Zebra striping (gray-50 alternating rows)
- Hover state on rows (bg-blue-50)
- Clickable rows with cursor-pointer when onRowClick provided
- Loading skeleton state (3 skeleton rows)
- Empty state with customizable message
- Column sort (click header toggles asc/desc)

Do not use any table libraries. Use native HTML table elements.
Export as generic typed component: DataTable<T>

Prompt Patterns That Improve Output

Give the exact TypeScript interface first. AI generates much better code when the types are pre-defined rather than inferred.

Show what you don't want: "Do NOT use useEffect for this — derive it from existing state instead." Prevents the most common anti-patterns.

Reference your existing code: Paste one of your existing similar components and say "Match this exact pattern and style." AI immediately aligns to your conventions.

Here is an existing component from our codebase for style reference:
[PASTE EXISTING COMPONENT]

Now create a similar [NEW COMPONENT] that:
- Follows the same patterns
- Uses the same naming conventions
- Has similar prop structure
- Only differs in these specific ways: [LIST DIFFERENCES]

Iterating on Generated Components

The first generation is a draft. Follow up with specific corrections rather than regenerating:

• "The focus ring should use ring-2 ring-blue-500 ring-offset-2, not the default outline"
• "Add a loading spinner inside the button when isLoading is true, shifting text to the right"
• "The disabled state needs opacity-50 cursor-not-allowed AND pointer-events-none"

Surgical follow-ups produce better results than starting over.