Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A learner needs to select a mentoring slot, review the timezone and confirm a local demonstration booking.
DESIGN AND CONTENT
Create a fictional mentoring booking screen for a design review with Alex Morgan. Study the credited Ali Hassan mobile booking reference. Build Clarity as a native-width mobile app, with a pale blue desktop presentation surrounding a 410 px app and direct full-width app content on phones. The desktop caption reads Good conversations. / Clear next steps. with three supporting benefits about selection, review and demonstration-only booking. Use Inter, a blue #3c5ad7 mentor card with the real bundled Joseph Gonzalez portrait, a fictional Alex Morgan identity, white date/time controls and a compact session summary. Do not invent ratings, testimonials or availability claims. Include a 30-minute online design-review description and visible timezone. Offer three fixed example dates in November 2026 and three 30-minute slots each. Label the timezone Europe/London with GMT to avoid ambiguity. Do not imply calendar integration.
BEHAVIOR AND STATES
Selecting a date clears the previously chosen time; choosing a time enables Review booking. Review displays mentor, duration, date, time and timezone together. Move focus to the new heading on review, completion and edit transitions. Announce date/time selection changes. Back preserves the selection. Confirm demo booking displays a local confirmation and explains no invitation was sent. Choose another time resets the 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.
Ali Hassan: https://dribbble.com/shots/23551467-Mentor-Appointment-Booking-App
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
