What this prompt does
This prompt makes the model act as a senior product designer and frontend engineer building a freelancer portfolio that turns visitors into inquiries. It demands real component structure and copy, not mood-board talk, which keeps the output buildable. Four variables shape it: [stack] sets the framework (Next.js with MDX by default), [positioning] is the one-line statement that anchors the hero, [primary_cta] defines the main action like "Book a free 20-minute project call," and [visual_direction] sets the type and layout feel such as editorial with generous whitespace.
The deliverables are ordered around conversion. The hero leads with name, the [positioning] line, and the [primary_cta] above the fold. The services section names outcomes rather than skills, and six featured-work cards are framed as problem, role, and result — the structure that converts far better than screenshots with no story. A testimonials slider plus a live availability status builds urgency, and a short contact form and blog preview round it out with sensible empty states. The whole thing is specified in the [visual_direction] with responsive breakpoints. Because the prompt demands real component structure and copy-ready text rather than mood-board talk, you get something a developer can start building immediately, and the ordering — hero, outcome-led services, then the case studies — keeps the page focused on turning a visitor into an inquiry instead of drifting into a generic showcase of logos and skills.
When to use it
- Designing a freelancer or solo-studio portfolio that should generate inquiries
- Fixing a strong developer's weak positioning with a clear
[positioning]line - Framing case studies as problem-role-result instead of screenshots
- Anchoring the page on a single
[primary_cta] - Setting a consistent look through
[visual_direction]with breakpoints - Generating section structure and example copy for your
[stack]
Example output
You get the section structure, the components, and example copy fenced and copy-ready: a hero with name, positioning, and CTA above the fold; an outcome-focused services section; six problem-role-result case-study cards; a testimonials slider with a live availability status; a contact form and blog preview with empty states; and layout and type specs in your chosen visual direction with responsive breakpoints.
Pro tips
- Push on the case-study cards — problem-role-result framing converts far better than a wall of screenshots with no story.
- Write a sharp
[positioning]line; the hero leans on it, so a vague value muddies the whole page. - Pick one
[primary_cta]and keep it above the fold; competing CTAs dilute inquiries. - Use
[visual_direction]to drive the type and spacing, but ask for outcomes-first copy in the services section explicitly. - Lead services with outcomes, not skills; "ship a SaaS MVP in weeks" beats listing frameworks.
- If you lack testimonials, keep the slider but ask for honest empty states rather than faking social proof.
