01A grid of equal cards
Twelve projects at identical size tell the reader that you cannot rank your own work. If everything is equally important, nothing is. Pick one, make it the deepest, and let it lead.
Portfolio / Case Study Site
A portfolio is not an archive. It is an argument that you have solved a problem like the reader's before. That argument needs three things per project: what made it hard, what you decided, and what changed. Thumbnails supply none of them.
What this page has to do
The default AI portfolio is a grid of twelve equal cards with no hierarchy, a paragraph beginning with a phrase about being passionate, and a contact form. It looks tidy and says nothing, because every project is presented at the same weight and none of them contains a decision.
The recipe below inverts the ratio: fewer projects, more per project. It also forces a constraint into every project line, because a constraint is the only thing that makes an outcome believable — anyone can claim a redesign increased engagement.
Section order
The order is the argument. Reordering these is not a layout decision, it is a change to the reasoning.
-
01
Masthead
Name, one line of positioning, availability status. A portrait larger than about 120px pushes the work below the fold on a laptop.
-
02
Selected work
Three to six entries, each as a row rather than a card. A row can carry context and outcome; a card can only carry a picture.
-
03
One case study in full
The first entry links to depth. One deep case study outperforms six shallow ones because it shows how you think when the problem resists.
-
04
Approach
Three principles, each with evidence. This replaces the process diagram, which is the same five circles on every portfolio ever built.
-
05
About
120 words, first person, no adjectives about yourself. The work supplies the adjectives.
-
06
Contact
A plain email address plus timezone and reply time. A form adds friction at the exact moment intent is highest.
-
07
Footer
Name, year, one link. A wall of social icons sends people away from the page you just spent a week building.
Build the prompt
6 variables. Change one and the text below rewrites itself — nothing else on this page moves.
Best when the projects are visually weak but the thinking is strong.
Build a personal portfolio site for a working product designer. Positioning should name the kind of product and the stage of company: interfaces for early-stage B2B tools, or design systems for teams past their first hundred screens.. AUDIENCE Hiring managers and potential clients who will give the page about ninety seconds. They are not reading, they are scanning for evidence that this person has shipped something comparable to their own problem. GOAL Within one screen: who this is, what they do, and one piece of proof. The site should read as a body of work, not a personality. STRUCTURE (exactly this order) 1. Masthead: name at display size; one line of positioning that names both the kind of work and the kind of client; a status line such as Available from March 2027 or Not taking new work. Portrait optional, never larger than 120px. 2. Selected work: exactly three entries. Lay each entry out as a horizontal row: name and outcome on the left at two thirds width, a 160px thumbnail on the right. Single column regardless of viewport. Each entry must contain a project name, one sentence of context, one line of outcome, and the constraint that made it hard. 3. Case study, linked from the first entry: the problem in three sentences; two approaches that were rejected and why; what shipped; what changed, expressed as a number. 4. Approach: exactly three principles. Each is a claim of one sentence plus one sentence of evidence from a real project. No process diagram, no tool logos. 5. About: 120 words maximum, first person, no adjectives about yourself. One photograph is acceptable. 6. Contact: your email address set as a mailto link in body text, not a button, with the timezone and a reply time beside it plus your timezone and typical reply time. 7. Footer: name, year, and one link to an RSS feed or email. No social icon wall. STYLE Editorial: serif display type for the name and project titles, sans for everything else; warm off-white background; a single narrow reading column; hairline rules between entries; no cards, no shadows. MOTION Animate once on load: the masthead fades up 16px over 500ms. Project rows do not animate at all. COPY RULES - Banned words: passionate, creative, detail-oriented, storyteller, ninja, rockstar, unique perspective, loves challenges, pixel-perfect. - Every project line needs a constraint (budget, deadline, legacy system, one week, no photography) and an outcome. - No lorem ipsum. Use plausible project names and numbers that sound measured rather than impressive. - Write in sentence case. No exclamation marks. CONSTRAINTS - The first project must be visible at 1440x900 without scrolling, or within one short scroll at 390x844. - Images at 16:10 or 4:3 with explicit width and height, and alt text naming the project, not the file. - Case study reading column between 64 and 72 characters. - One h1 per page: the name on the index, the project title on a case study. - Total JavaScript under 10KB. No animation library, no scroll hijacking. OUTPUT Two page types sharing one stylesheet: the index and one case study.
What to change, and what to leave alone
| Variable | How to edit it |
|---|---|
{{ROLE}} |
This changes the positioning line and the acceptable evidence. An engineer is judged on the artefact; a writer is judged on the sentence. Do not keep the copy and swap the discipline. |
{{WORK_COUNT}} |
Three is stronger than six if the three are deep. The number appears inside the prompt so the model cannot add a seventh entry to fill space. |
{{LAYOUT}} |
Choose by the strength of your images, not by taste. Index rows with hover images fail badly on the phone where most links are opened. |
{{CONTACT}} |
A form is fine if you genuinely cannot publish an address, but then the fallback email is not optional — some readers will not use a form on principle. |
{{STYLE}} |
Swap the whole block. A monochrome brief applied to half a page produces grey headings with a blue button, which reads as broken rather than restrained. |
Feeding it to each builder
| Builder | What to do differently |
|---|---|
| v0 | Ask for the index first, then the case study page as a second generation that reuses the same classes. Ask for both in one message and it will merge them into a single layout. |
| Lovable | It will add a portrait and a contact form unprompted. The explicit status line and the 120px portrait cap are what keep the masthead from becoming a hero. |
| Bolt | State the page count (two pages, shared stylesheet) or you will get a single scrolling page where the case study is a subsection — which defeats the point. |
| Cursor / Claude Code | Create BRIEF.md with this prompt plus a PROJECTS.md listing the real entries, then ask for the index. Supplying real content beats any amount of style instruction. |
Where it usually breaks
02Outcomes without constraints
Increased conversion by 34 percent is a sentence any reader discounts instantly. Increased conversion by 34 percent in six weeks, without a design system, on a checkout that could not be A/B tested is a sentence they believe.
03The about section selling personality
Three paragraphs about curiosity and craft describe every candidate. Two sentences about what you are hired to do, with one example, do more work than any amount of self-description.
04Contact buried under a footer
The reader who is convinced will look for a way to reach you immediately. If that takes a scroll and a form, a fraction of them will close the tab instead.