Back to the library
An interface with a clear purpose

Illustrated cover · a visual reference, not a generated result

Make it your own

Replace the words in [brackets] with your subject and details, then paste the prompt into a compatible AI tool. Adjust and iterate to suit your project.

An interface with a clear purpose

Turn a product brief into components and usable states.

The prompt

Prompt in English
Build a responsive [interface type] using [framework and styling approach]. User goal: [goal]. Required content and actions: [requirements]. First identify the smallest component structure and data shape, then implement it. Include useful loading, empty, success, and error states only where applicable. Use semantic HTML, keyboard-operable controls, visible focus, accessible labels, and a layout that works at 360px. Keep state management proportional to the task. Do not add fake working controls, dependencies, or backend services. Explain how to run and verify the result.