Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A mobile gym member needs to find a session, understand its duration and save it for later without a crowded home screen.
DESIGN AND CONTENT
Build FORM CLUB, a fictional mobile-first workout library, following the credited Muhammad Arslan Sabir reference. Use near-black #090909, orange #ff602f, dark grey separators and condensed uppercase Impact headings with Inter for details. Include the supplied local gym photograph by Sven Mieke, under a bottom-to-top black gradient, as a large Today card. Show a small date and greeting with the bundled Joseph Gonzalez portrait as a fictional member avatar, ‘SHOW UP. GET STRONGER.’, a labelled category filter, three compact session rows and persistent Today / Training / Saved / Profile navigation. This is a native-width phone interface, not a desktop dashboard shrunk into a handset. Desktop may show the 390 px app beside a bold presentation heading.
BEHAVIOR AND STATES
Category filters All, Strength and Mobility update visible sessions. Bookmark controls save and unsave in memory; Saved shows only bookmarked sessions with a useful empty state. Session detail opens an accessible dialog with duration and level. Start demo session changes the dialog to a local confirmation; no activity is tracked or prescribed. Close and Escape return focus to the source button. Today, Training, Saved and Profile have distinct working content. Keep every touch target at least 44 px.
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/strength-sven-mieke.jpg, /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.
Muhammad Arslan Sabir: https://dribbble.com/shots/27257474-FITNESS-Workout-Gym-Mobile-App-UI-Design
Sven Mieke / Unsplash: https://unsplash.com/photos/woman-in-black-sports-bra-EuwD039Svug
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
