What this prompt does
This prompt assigns the model the role of a senior front-end engineer who builds image-heavy sites and asks it to specify a photographer portfolio tightly enough to build, returning working component code rather than pseudocode. Photographers live or die on load speed, so performance is treated as a requirement, not a nice-to-have. Four variables steer it: [stack] sets the framework (Next.js with react-photo-gallery by default), [categories] defines the gallery filters, [image_source] says where images are served from (Cloudinary with responsive transforms), and [mood] sets the visual tone like "editorial, minimal, full-bleed."
The deliverables cover a category filter that updates the grid without a full reload, a masonry grid with lazy-loaded responsive images and blur-up placeholders, and a lightbox with keyboard navigation, touch swipe, and an EXIF overlay toggle. It adds a booking inquiry form with validation and a success state, a prints-shop preview section, and a performance plan covering image sizing, priority hints, and lazy loading to protect LCP — the part that most determines whether a gorgeous gallery janks on mobile or feels fast. Because the prompt asks for working component code and a sample gallery data shape rather than pseudocode, the filter, grid, and lightbox arrive with real props you can wire up, and treating performance as a named deliverable keeps the imagery from quietly sabotaging the booking the whole site exists to win.
When to use it
- Building a photographer or visual-artist portfolio that is mostly imagery
- Designing a lazy-loaded masonry grid with blur-up placeholders
- Adding a keyboard- and touch-navigable lightbox with EXIF overlay
- Filtering by
[categories]without a full page reload - Tuning delivery from your
[image_source]to protect LCP - Generating component code with a sample gallery data shape
Example output
You get components, props and types, and a sample gallery and image data shape: the category filter, the masonry grid with lazy loading and blur-up placeholders, the lightbox with keyboard and swipe navigation and an EXIF overlay toggle, the booking inquiry form with validation and a success state, the prints-shop preview, and a performance plan covering image sizing, priority hints, and lazy loading.
Pro tips
- Treat the performance plan as a requirement, not a nice-to-have; unoptimized hero images are the number-one reason these sites feel slow.
- Set
[image_source]to a CDN with responsive transforms, like Cloudinary, so the grid serves correctly sized images. - Use blur-up placeholders to keep the grid calm while images load on mobile.
- Keep
[categories]short and meaningful so the filter stays scannable. - Use
[mood]to drive the layout feel, but ask for the lightbox keyboard and swipe handling as explicit code. - If the gallery janks, ask the model to add priority hints to above-the-fold images to protect LCP.
