What this prompt does
This prompt asks Claude or ChatGPT to design a video production portfolio website. You set [studio_name] and [studio_type], then describe the [work_types], the [target_clients], the [portfolio_size], the [brand_aesthetic], and the [framework]. The model designs the showreel hero home page, the filterable work page, the project case study page, a custom cinematic video player, an about-and-team section, and the framework implementation.
It works because a video studio's site is a cinematic experience where the showreel and hover-preview thumbnails carry the pitch. By naming the [brand_aesthetic] (for example a moody, editorial dark theme with warm accents), the model grounds the visual direction. The [work_types] variable drives the portfolio filters and category badges, and the [framework] section covers video hosting, animation, and performance — the parts that make hover previews and a 4K player feel smooth.
When to use it
- You're building a portfolio for a video, film, or motion studio.
- You want a full-viewport showreel hero with a theater-mode play experience designed.
- You need a filterable work grid with hover-to-preview video thumbnails.
- You're designing project case study pages with brief, process, and behind-the-scenes sections.
- You want a custom cinematic player with quality selection, chapters, and theater mode.
- You need the video-hosting and animation framework notes to plan a smooth, heavy-media site.
Example output
The model returns a page-by-page design document. The home page is specified with an auto-playing muted showreel background, a theater-mode play CTA, a client-logo marquee, and hover-preview featured projects. The work page covers a filterable cinematic grid with category badges. The case study page details the brief, the production process narrative, a behind-the-scenes gallery, and results. The custom player section covers minimal hover-revealed controls, quality selection, chapters, and theater mode. The closing [framework] section adds video hosting, animation, and image optimization. Expect a detailed spec, not finished code.
Pro tips
- Describe
[brand_aesthetic]vividly; "cinematic, moody, editorial, dark with warm accents" steers the entire visual direction. - List
[work_types]so the portfolio filters and category badges match the studio's actual range. - Use
[portfolio_size]to calibrate grid pagination — 30-50 projects needs different handling than hundreds. - Pin
[framework]to your real video host (Mux or similar) and animation library so the smoothness notes apply. - Keep hover-preview video thumbnails explicit; they're the signature interaction and easy to underspecify.
- Ask the model to expand the case study template if the brief-to-results narrative is your main selling tool.
