Consistency, Not Talent
First you decide exactly what goes on which page and where every page sends the visitor. Then the look: a clean, confident face from a few choices made once and repeated. The one rule that is special to a portfolio: the design frames the work, it never steals the show.
- The design is the frame, not the painting. Your work is the painting.
- A calm, simple frame makes the painting look more valuable. A loud, busy frame steals attention from the thing you actually want people to look at.
- Almost everything that looks amateur is randomness: three fonts, colors that clash, spacing that is different everywhere. Almost everything that looks professional is the opposite: a few choices, made once, repeated.
- AI can generate a hundred images in minutes. The skill is not making them. It is judging which one serves the work, and knowing when a real screenshot beats anything generated.
Why it matters
A good case in the wrong place still fails: before you build, you need the one-line claim that greets a visitor and a map of what goes where. And a consistent look is what separates a portfolio that feels intentional from one that feels thrown together; it comes from a handful of decisions, not from talent. The same goes for images: AI lets you make any image in seconds, which is exactly why judgment matters more than generation. Choose what serves your proof, reject the rest, and know when a real screenshot beats anything generated.
Brief
- Write your one-line claim: the single sentence a visitor should remember. Use AI for ten options, then pick and sharpen one; the choosing is yours.
- Build a content map: for each page, the sections in order, which case sits where (lead with your strongest), and the named call to action, all laddering up to the one action from Week 1. Note any proof you still need to gather (screenshots, a demo link, the repo, numbers, a testimonial).
- Choose your type: one or two free fonts (a heading font and a body font; they can be the same).
- Choose your palette: a main color, near-black text, near-white background, and at most one accent, calm enough that your work is the loudest thing on the page.
- Make a simple logo or favicon, and write a two-line style note (fonts, hex codes, one sentence on the mood). Add it to your Claude Project so the build stays consistent.
- List the images your portfolio actually needs, matching the content map. For your work, use real captures: clean, cropped, legible. For the connective tissue, generate options in one consistent style; for anything that is you, use a real photo. Curate ruthlessly and write one or two lines on a generated image you rejected and why.
Deliverable
The one-line claim, the content map (pages, sections, cases, calls to action) with the "still need to gather" list, the identity kit on one page (fonts named, palette with hex codes, the logo or favicon, the style note), and the final image set with your rejection note. Post it all in your track thread.
Evaluation criteria (pass/revise)
- The claim is single and memorable, not a paragraph.
- Every page has ordered sections and a named call to action, laddering up to the one action, and the gather-list is honest so the build week is not blocked.
- One or two fonts and a tight palette (about 3 to 4 colors) with actual hex codes.
- A simple logo or favicon exists, and the style note describes one coherent mood that frames the work rather than competing with it.
- The work is shown with real captures, not AI stand-ins, and any AI-generated images share one consistent style.
- The rejection note shows genuine judgment, not just "I liked this one."
Decide once, then judge ruthlessly
Use AI to give you options and to check your choices, not to decide for you. Generate a few image options, then reject most of them on purpose. That rejection is the actual skill.
Copy a prompt, fill in the {highlighted} parts, and remember: it gives options, you make the call.
Iris keeps it quiet on purpose
Iris wants her work to read as careful and clear, so she resists the urge to make the site itself flashy.
Iris rejected nine ideas to keep one. Her site ends up calm, and her museum map is the most colorful, memorable thing on it. Exactly right.
Dorian, on the marketing track, made the same call for a different reason: he wanted his before-and-after numbers to be the brightest thing on the page, so he picked one near-black, one warm white, and a single green accent for the "after" figures. The restraint is the point on every track.
Amateur, then intentional
| Reads as amateur | Reads as intentional |
|---|---|
| Three fonts, two of them decorative. | One font, two weights. |
| Five bright colors competing. | Near-black, near-white, one accent. |
| A generated "AI slop" hero image. | A clean title over whitespace, your real screenshots below. |
| Everything crammed together. | Generous space around each thing. |
Watch out for
- Upstaging your work. The flashy background that buries the case studies. Quiet wins.
- AI slop. If a generated image has the melted, fake-glass look, bin it. Saying so out loud is allowed.
- Too many fonts and colors. When something looks off, the fix is almost always fewer, plus more space.
What good looks like
- Every page feels like the same site, made by the same person.
- Your work is the most colorful, memorable thing on the page.
- You could hand your style note to a stranger and they could keep it consistent.
- One-line claim (value proposition). The single sentence a visitor should remember about you.
- Content map. What goes on which page, in what order, and where each page sends the visitor.
- Visual identity. The small set of consistent choices that make your site feel intentional.
- Palette. Your handful of colors: a main, a near-black, a near-white, maybe one accent.
- Hex code. A color written as a code like #54E399, so it stays exactly the same everywhere.
- Favicon. The tiny icon in the browser tab. A small touch that makes a site feel finished.
- Contrast. How easily text stands out from its background. Strong contrast is kindness.
- AI slop. Generic generated images with the fake, melted look. Your real screenshots beat them.
Linked resources
Refactoring UI ↗
Design tactics for people who are not designers: spacing, hierarchy, color, type. The fastest way to make a site look intentional.
Matthew ButterickPractical Typography ↗
A free web book that quietly fixes most beginner type mistakes: line length, size, spacing, and which fonts to actually use.
ToolGoogle Fonts ↗
Free, fast-loading fonts with ready-made pairings. Where the whole site picks its type.
ToolCoolors ↗
Generate and lock a small palette in seconds, then copy the hex codes straight into your build.
WebAIMContrast Checker ↗
Paste two colors and confirm your text is actually readable before you commit. One check that prevents a common review note.