Portfolio website prompts

Start with how the work is seen

Most generated portfolios are a three-column grid with a hover zoom, because nobody told the model to do anything else. Decide the idea in one sentence: photos float on a sphere you can dive into; a ribbon of projects loops past the camera; a book on a desk whose pages are the case studies. Then say what a click does: opens the piece full screen, turns the page, plays the film.

Describe the work, not the person

Give the count, the format and the aspect ratios: "30 portrait photographs, 4:5" or "8 projects, each a cover, a 60-word summary and five images". Say where the files are if you have them, so the agent places the real ones. A portfolio built on grey placeholders gets redesigned the moment real images arrive.

Keep everything else small

Ask for small type, one weight, black or white ground, and no decoration. Name what the site must still say: a name, one line about the practice, contact, and where the person is based. Three lines of text are enough for most portfolios, and saying so stops the model from padding the page with skill bars and testimonials.

What a portfolio prompt should contain

• The browsing idea in one sentence, and what a click or drag does.
• The work: how many pieces, what kind, which aspect ratios, where the files are.
• Ground and type: black or white, one typeface, one or two sizes.
• The words: name, one line, contact. Nothing else unless you want it.
• The piece view: what opens, how it closes, how you reach the next one.
• Phone behaviour: touch replaces hover; say what a tap and a swipe do.

A prompt to start from

Build a portfolio site for [name], a [photographer / studio / designer] based in [city].

The work: [number] [photographs / projects], [aspect ratio], in ./work as [files]. Use the real files.

The idea: [how the work is browsed, in one sentence — e.g. "the photographs hang in a slow horizontal row that I drag; the one nearest the centre is sharp and the rest fall out of focus"]. Clicking a piece opens it full screen with its title and year; Escape or a click outside closes it; the arrow keys move to the next.

Stack: Vite + React + TypeScript, plain CSS. [three.js only if the idea needs 3D.]

Look: ground [#000 or #fff], text [#hex], no accent colour. One typeface, [typeface], at 14px, uppercase labels at 11px with wide tracking. No borders, no shadows, no cards.

Text on the site, all of it: the name top left; "[one line about the practice]"; [email] and [Instagram] top right.

Motion: slow and continuous, eased; nothing bounces. The opening piece view grows from the piece's own position over 0.7s.

On phones: drag becomes swipe, hover states become nothing, a tap opens the piece. Preload the first six images and lazy-load the rest. Run it and check that every image loads.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to make a template's prompt yoursKeep a template's design and replace its subject: what to change in the prompt, what to leave alone, and the order to do it in.
• Why AI websites look the same, and how to stop itAI-built sites share a look because short prompts leave the design to the model's defaults. Four changes to a prompt that break the pattern.

• Landing pages
• Product pages
• Hero sections
• Shops
• Small business