Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A studio administrator needs to edit workspace details and notification preferences without losing unsaved work.
DESIGN AND CONTENT
Create a settings page for Northstar Studio. Use a white main surface, a light grey navigation rail, ink actions, fine separators and generous horizontal spacing. Study the credited Jordan Hughes profile settings reference: a pale periwinkle studio banner, an overlapping real portrait, a workspace identity heading and two-column label / field rows. Draw the banner using original interlocking elliptical shapes; use the bundled Joseph Gonzalez portrait as a fictional owner, never initials. Provide Workspace and Notifications tabs, meaningful section headings and concise descriptions. Workspace includes name, URL and timezone. Notifications includes project updates and a weekly digest checkbox. Make an explicit Save changes control and clear save status visible.
BEHAVIOR AND STATES
All fields are explicitly saved. Disable Save changes until edits exist. Switching tabs with unsaved changes opens an accessible confirmation dialog with Keep editing and Discard changes. Keep editing restores focus. Save shows pending, saved and a recoverable simulated error. Discard restores saved values. A demo reset must restore both tabs and the save status.
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.
Jordan Hughes / Untitled UI: https://dribbble.com/shots/17219796-My-details-settings-page-Untitled-UI
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
