Photography Gallery Interface Creator

What this prompt does

This prompt produces a complete photography portfolio UI specification built around one core principle the template states explicitly: invisible UI. Every design decision — neutral backgrounds, thin lowercase typography, no colored elements near photos — exists to eliminate color cast and visual competition so the photographs dominate. That constraint is not aesthetic preference, it is industry standard for serious photographers.

The template generates eight distinct functional layers: a lazy-loaded gallery grid with non-destructive category filtering, a full-screen lightbox with EXIF data toggle and swipe gestures, password-protected client proofing with select/favorite/comment/download, and an optional print store flow from image selection through size, medium, and price to cart. The framework-specific code block in section 8 means you get working implementation alongside the design spec, not just wireframe descriptions.

What makes it structurally sound is the anti-pattern list baked into the template. Prohibiting autoplay, music, watermarks that ruin viewing, and visible compression is not cosmetic — these are the exact mistakes that destroy portfolio credibility with art directors and editorial clients.

When to use it

• You're a wedding or event photographer needing to deliver client proofing galleries without subscribing to Pixieset or ShootProof.
• You're a fine art or landscape photographer launching a print store alongside your portfolio.
• You're building a portfolio site for a photographer client who needs custom branding that off-the-shelf builders won't allow.
• You want a gallery with EXIF overlays so viewers can see your gear and settings — common for photography educators.
• You're rebuilding an existing portfolio that scores badly on mobile because of heavy slideshows or autoplay.
• You need category filtering (travel / portrait / commercial) that doesn't reload the page or destroy the browsing flow.

Example output

For [photography_type]: editorial portrait, [portfolio_size]: 200 images, [features]: client proofing + print store, [framework]: Alpine.js + Tailwind, the AI returns a structured spec covering:

Gallery grid
  Layout: masonry, 3-col desktop / 2-col tablet / 1-col mobile
  Lazy loading with browser-native or JS observer approach
  Category filter: no page reload, active state on selected genre

Lightbox
  Full-viewport with prev/next arrow navigation and swipe gesture
  EXIF toggle panel — camera, lens, focal length, ISO, shutter, aperture
  Download gated to authenticated client session

Client proofing
  Password-protected gallery route
  Select/favorite per image, comment thread per image
  Download access for selected images

Print store
  Size picker (e.g. 8×10, 11×14, 16×20)
  Medium selector (matte, metallic, canvas)
  Dynamic price based on size/medium combination
  Add to cart and checkout flow

Section 8: [framework] component
  Masonry grid with category filter and lightbox wired together
  Exact implementation varies by framework specified in [framework]

Note: the AI's specific implementation choices for lazy loading, auth, and checkout will vary between runs. Treat section 8 output as a starting scaffold, not production-ready code.

Pro tips

• Set [layout_type] to masonry for mixed portrait/landscape work, but switch to a uniform grid for product or architectural photography — the choice visually defines the brand even before a single image loads.
• The EXIF toggle in the lightbox is only useful if your images actually carry EXIF metadata. Strip EXIF for client confidentiality work; keep it for educational or editorial portfolios where gear transparency builds credibility.
• For client proofing, explicitly include password-protected galleries in your [features] variable — the template gates the download functionality behind the client flag, and omitting it produces a public gallery without the auth wrapper.
• Pair the generated code with a dedicated image CDN (Cloudinary, Imgix, or Bunny) for on-the-fly resizing and format conversion. The template specifies no visible compression but does not handle image transformation — that is your infrastructure layer and the AI will not build it for you.
• The print store section is marked optional in the template. If you don't need it, drop it from [features] to keep output focused — requesting all eight sections at once can produce surface-level implementations of each rather than deep, working code for the ones you actually need.