prompt-engineering-ui

Prompt Engineering for UI Generation

Master the art of communicating design intent to LLMs. This skill covers prompt patterns specifically optimized for generating consistent, high-quality user interfaces.

---

When to Use This Skill

• Writing prompts that generate consistent UI components
• Describing design intent precisely to AI systems
• Building reusable prompt templates for design systems
• Iterating on UI generation with structured feedback
• Creating few-shot examples for UI patterns
• Debugging inconsistent UI generation outputs

---

The UI Prompting Challenge

UI generation is uniquely challenging because it requires:

1. Visual precision - Exact spacing, colors, typography
2. Behavioral specification - Interactions, states, animations
3. Contextual coherence - Fitting within a design system
4. Accessibility compliance - WCAG, ARIA, keyboard navigation
5. Responsive adaptation - Multiple breakpoints, devices
6. Code quality - Clean, maintainable output

Standard prompting techniques often fail because UI is simultaneously visual, behavioral, and technical.

---

Core Prompt Patterns

Pattern 1: The Component Contract

Define components as contracts with explicit input/output specifications.

## Component Contract: DataTable

### Purpose
Display tabular data with sorting, filtering, and pagination.

### Props (Inputs)
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| data | T[] | Yes | - | Array of data objects |
| columns | ColumnDef[] | Yes | - | Column configuration |
| pageSize | number | No | 10 | Rows per page |
| sortable | boolean | No | true | Enable column sorting |
| filterable | boolean | No | false | Show filter inputs |

### Visual Specification
- **Container**: bg-white rounded-lg shadow-sm border border-gray-200
- **Header row**: bg-gray-50 text-gray-600 text-sm font-medium
- **Data rows**: hover:bg-gray-50 border-b border-gray-100
- **Typography**: Font-sans, body text 14px, headers 12px uppercase
- **Spacing**: Cell padding 12px horizontal, 8px vertical

### States
1. **Loading**: Skeleton rows with pulse animation
2. **Empty**: Centered message with icon
3. **Error**: Red border, error message below
4. **Selected**: bg-blue-50, left border accent

### Accessibility Requirements
- role="table" on container
- Sortable columns announce sort direction
- Focus visible on all interactive elements
- Keyboard navigation: Tab through headers, Enter to sort

### Output Format
React TypeScript component using Tailwind CSS.
Include JSDoc comments and prop types.