What this prompt does
This prompt casts the model as a senior product designer and front-end engineer and asks it to specify a portfolio case study page tightly enough to build today — naming components, props, and content slots rather than vague ideas. Case studies are where credibility is won or lost, so the structure forces a results section with real metrics. Three variables steer it: [project_name] names the project the case study covers, [stack] sets the build framework (Next.js with MDX by default), and [brand_feel] sets the visual tone like "editorial, generous whitespace, subtle mint accent."
The core deliverable is a top-to-bottom section map: hero with client, role, and duration; overview with problem, goal, role, and team; a numbered process with screenshots; solution highlights; results with metrics; lessons learned; and a next-case-study CTA. It then asks for a reusable component list with props, responsive and mobile stacking behaviour, copy scaffolding with one-line guidance per section, accessibility notes on heading hierarchy and alt text, and SEO touches for title pattern, meta description, and image naming. Because the prompt insists on named components, props, and content slots rather than vague ideas, the output is a template you can build once and refill for every project, and putting the results section near the top forces the work to prove itself with metrics instead of relying on a wall of text that reads as filler.
When to use it
- Building a repeatable case study template for a portfolio
- Forcing a metrics-backed results section before you write filler prose
- Defining reusable section components with props for your
[stack] - Setting copy scaffolding so each section is ready to fill
- Applying a consistent
[brand_feel]across multiple case studies - Adding accessibility and SEO touches at design time, not after launch
Example output
You get the section map top to bottom, followed by a component table listing each section's name, props, and content slots. Alongside it you receive responsive stacking order, copy scaffolding with a heading and one-line guidance per section, accessibility notes on heading hierarchy and alt text rules, and SEO touches covering the title pattern, meta description, and image naming convention for [project_name].
Pro tips
- Draft the results block first; if you cannot fill it with real metrics, the case study is not ready to publish.
- Set
[project_name]to the actual project so the copy scaffolding and SEO title pattern fit the work. - Use
[brand_feel]to drive type and spacing, but keep the section order intact — the map is what makes it convert. - Ask for the component props explicitly so the template is reusable across future case studies.
- Treat the SEO touches as part of the build; image naming and meta descriptions are easy to add now and tedious later.
- If a section like "lessons learned" feels thin for a project, ask the model to merge it rather than padding it with filler.
