Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A researcher needs to distinguish a new collection from no search matches and a temporary loading failure.
DESIGN AND CONTENT
Design the library area of a fictional research workspace called Archive. Study the credited Helena Mäeorg empty-state reference. Use a cool blue-grey canvas, a white bordered collection surface, blue #285fa8 actions, Inter typography and compact resource search. Draw original SVG illustrations: a person with reference sheets and foliage for first use, a magnifying glass with a document for no matches, and an interrupted cloud for a load error. Do not reuse the source illustration. On desktop place the illustration beside concise copy and one action; stack on phones. Use the bundled Joseph Gonzalez portrait as the fictional owner avatar. The first-use state explains what is saved here and offers Add sample resources. A search field stays available alongside a compact collection count.
BEHAVIOR AND STATES
Label demo controls First use, No matches and Load error. First use has a meaningful add action. Adding samples displays three resource rows and updates the count. No matches preserves the entered query and offers Clear search. Load error offers Try again without clearing resources. Removing all sample resources returns to first use. Keep these states visibly distinct.
DELIVERY
Deliver a working responsive web interface, not a static image. Use local fictional data and in-memory state. No authentication, analytics, remote data requests, payments or persistent storage. Serve any bundled fonts and images locally. Include an obvious return-to-prompt link and clearly identify this as a demonstration. Keep every visible navigation item or action useful; do not add decorative fake controls.
ACCESSIBILITY AND RESPONSIVENESS
Use semantic headings, labelled inputs and real buttons. Touch controls must be at least 44 px high. Provide visible keyboard focus and announce updates with a status region. Do not rely only on color. Dialogs need a visible title, Escape dismissal, focus containment and focus restoration. At 390 px, preserve the reading order and all actions without horizontal page overflow. Respect reduced motion.
ACCEPTANCE
On desktop and a 390 px phone, complete the primary task described above, exercise an invalid or empty state, recover without losing unrelated inputs, and restore its initial state using the reset control where provided, or by refreshing. Verify displayed calculations and selected states against the fictional data. Report exactly what was checked; do not claim usability improvements or reliable independent regeneration.
ASSETS AND OPTIONAL VISUAL REFERENCES
Bundled assets: /images/patterns/assets/portrait-joseph-gonzalez.avif. If building outside this repository, supply those files with the prompt or use suitable licensed replacements. Draw the described product artwork in code. The written requirements define the scope; reference links are optional visual context.
Helena Mäeorg: https://dribbble.com/shots/15440147-Empty-state-design-for-a-list
Joseph Gonzalez / Unsplash: https://unsplash.com/photos/man-wearing-white-v-neck-shirt-iFgRcqHznqg
Scroll to read. Copy includes the full prompt.Inputs, credit and review
