Web Design prompt
Portfolio Website Art Direction Prompt
Plan a personal portfolio site that shows your best work first, with layout, case-study structure, type and colour chosen for your discipline.
The prompt
Act as an art director who reviews hundreds of design portfolios a year. Plan a portfolio website for {{your_name}}, a {{discipline}}. The site should feel {{mood}} and win over {{target_viewer}}.
Projects to feature: {{best_projects}}.
Deliver:
1. Site map: pages and what each must achieve in under 10 seconds of viewing.
2. Home page layout, top to bottom, with exact content for the hero (name, one-line positioning, no more than 15 words) and how projects are shown (grid, list or full-bleed). Justify the choice for this discipline.
3. Case study template with sections: context, my role, problem, constraints, process (3 key decisions with before/after), outcome (with placeholders for real metrics), what I would do next. Give a word budget per section.
4. Visual system: background, text, muted and accent colours as hex with contrast ratios (body text at least 4.5:1); heading and body fonts (free); a 1.25 type scale from 16px in px; 8pt spacing; image aspect ratios for thumbnails and case-study images.
5. Interaction and motion: hover state for project thumbnails, page transition, and scroll behaviour, each with duration and easing, plus a reduced-motion version.
6. Ten mistakes reviewers see in portfolios like this, and how this plan avoids each.
Do not invent client names or results; use placeholders such as [metric] where I must add real data. Variables
| Variable | What to put | Example |
|---|---|---|
{{your_name}} | Your name or studio name | Mara Okafor |
{{discipline}} | What you do | Product designer specialising in fintech apps |
{{best_projects}} | Three to five projects to feature | Budgeting app redesign, bank onboarding flow, crypto wallet design system |
{{target_viewer}} | Who you want to impress | Hiring managers at mid-size tech companies |
{{mood}} | The impression you want to give | confident, quiet, detail-obsessed |
Tips
- Order projects by relevance to the job you want, not by date.
- Ask the model to critique your actual case-study text against section 3 once you have a draft.
- Keep the hero line honest and specific; vague lines like "I design experiences" are the most common reviewer complaint.
Related prompts
- Admin Dashboard UI Layout Spec PromptDesign a data-heavy dashboard screen with clear hierarchy: layout grid, KPI cards, charts, tables, filters, empty and error states.
- Brand Identity Starter Kit PromptGet a compact brand identity for a new business: positioning, three logo concepts, palette, type pairing, voice and example applications.
- Design System Tokens from a Brand BriefTurn a short brand description into a full set of design tokens (colour, type, spacing, radius, shadow, motion) as JSON and CSS custom properties.
- SaaS Landing Page Design Spec PromptGet a complete, buildable landing page design for a software product: sections, copy, palette, type scale, spacing and component states in one answer.