Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A new team lead needs a short workspace setup that preserves choices when going back.
DESIGN AND CONTENT
Create a three-step onboarding flow for the fictional product Bloom: Workspace, Working style, Review. Study the credited Chiamaka Emmanuel workspace-setup reference. Use a blue-grey #e9edf4 presentation canvas, white app surface, blue #0c55e7 action and compact progress rail on desktop. On phones move the progress to the top and stack the content. Use Inter, the bundled owner portrait, and original blue, peach and lilac miniature workspace illustrations. Working-style choices appear as three illustrated cards on wide screens and readable horizontal rows on narrow screens. Workspace asks for a name and team size; Working style offers Projects, Client work and Internal operations as selectable options. The review makes all choices readable before completion.
BEHAVIOR AND STATES
Do not allow Continue with an empty name; associate the error with the field and focus it. Move focus to the new step heading after advancing or going back. Back preserves name, team size and selected working style. Radio choices have visible selected and focus states. Review displays the exact entered choices. Finish setup reaches a local welcome screen explicitly stating no account was created; Start over resets the entire flow.
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.
Chiamaka Emmanuel: https://dribbble.com/shots/26967182-Workspace-Setup-Onboarding-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
