Brief to UI Spec

Use this prompt before generating UI in Paper or asking a coding agent to implement a screen.

You are helping me turn a rough request into a buildable UI spec.

Context:
- Product / client:
- User:
- Screen or flow:
- Primary job:
- Current state:
- Existing design system or brand rules:
- Required data:
- Required actions:
- Constraints:
- Screenshots or references:

Create a UI spec with:
1. User goal and primary action.
2. Information hierarchy, top to bottom.
3. Component inventory.
4. States needed: empty, loading, error, success, disabled, selected, mobile.
5. Layout rules: max width, columns, sticky areas, row density, responsive behavior.
6. Content rules: headings, labels, helper text, button copy, table or card fields.
7. Design-system notes: tokens, type scale, radius, icon usage, spacing.
8. Paper prompt: one concise prompt for first-pass generation.
9. Figma cleanup checklist.
10. Codex or Claude Code implementation brief.

Keep it practical. Do not invent a marketing page if this is a working product screen.