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.

```markdown
## 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
-