# Design a UI screen or prototype

Layouts, components, copy, and states for a screen or prototype, with design rationale.

- Topic: Product & UX Design
- Framework: RTF
- Level: Standard
- Tags: Design, Fill-in Template
- Source: https://www.thinkwithprompt.com/prompts/design-a-ui-screen-or-prototype

## Prompt

```text
Help me design a UI.

**Product and screen:** [e.g. "onboarding for a budgeting app", "SaaS analytics dashboard"]
**User and their goal on this screen:** [WHO / GOAL]
**Content and data shown:** [LIST]
**Brand/visual direction:** [style, colors, design system if any]
**Output:** [layout description / wireframe in text / HTML+CSS / Figma-ready spec]

Deliver:
1. Information hierarchy — what's most important and where it goes.
2. Layout, section by section, with components.
3. Microcopy — headings, labels, buttons, empty and error states.
4. States — loading, empty, error, success.
5. Accessibility notes.
6. Rationale for key choices and one alternative layout.
```

## What to fill in

- WHO / GOAL
- LIST
- style, colors, design system if any

Free to copy and use. From ThinkWithPrompt (https://www.thinkwithprompt.com/), a library of 2,663 curated AI prompts.