Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A designer needs to add project assets, see rejected files and recover without starting over.
DESIGN AND CONTENT
Build an asset intake panel for the fictional studio Port. Study the credited Jordan Hughes file-upload reference. Use a cool neutral #f0f1f3 surrounding workspace and an inset white upload surface with a thin outer ring, dashed drop area, original silver folder SVG and a clear Choose files action. Add an original olive-green project cover and the bundled Michael Dam portrait for the fictional collaborator. Use Inter and ink actions. Keep file rows readable with extension badges and explicit rejection text. Clear stale completion messages whenever files change. Show filename, size, type, status and remove control in each row. Accepted formats are PNG, JPG and PDF, maximum 10 MB each.
BEHAVIOR AND STATES
A real multiple-file input and drag-and-drop share the same validation. Keep files in memory only: no bytes leave the browser. Use labelled sample controls to add an accepted PDF and an oversized rejected image without requiring local files. Review selected files changes accepted rows from Ready to Reviewed locally. Rejected rows explain how to fix them; Remove is reversible through adding again. Never show a real upload or cloud-saved claim.
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-michael-dam.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.
Jordan Hughes / Untitled UI: https://dribbble.com/shots/26220449-File-upload-Untitled-UI
Michael Dam / Unsplash: https://unsplash.com/photos/closeup-photography-of-woman-smiling-mEZ3PoFGs_k
Scroll to read. Copy includes the full prompt.Inputs, credit and review
