Portfolio Website Design References for Claude Code

Contents

• [Start with a focused reference set](#start-with-a-focused-reference-set)
• [Compare decisions, not screenshots](#compare-decisions-not-screenshots)
• [Choose a direction with a simple scorecard](#choose-a-direction-with-a-simple-scorecard)
• [Turn references into a Claude Code brief](#turn-references-into-a-claude-code-brief)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The best portfolio references for Claude Code are not just attractive homepages. Choose examples that show the structure, typography, project presentation, and interaction style you want, then turn those observations into a short implementation brief.

Start with a focused reference set

Use three to five examples rather than collecting dozens of links. A useful set should cover different decisions:

1. One site with a strong opening section and clear personal positioning.
2. One site with an effective project index or case-study layout.
3. One site with a distinctive visual system, such as unusual type, bold color, or expressive motion.
4. One site that feels close to your target audience and device priorities.

The examples below include COLLINS, Fix Studio, and Daniel Sun. Compare the first screen, navigation, project previews, and overall density before borrowing a pattern. They are useful starting points for visual direction, but you should still check each live page yourself before treating any behavior as a requirement.

Compare decisions, not screenshots

For every reference, record the same details:

• Positioning: What does the visitor understand within the first few seconds?
• Navigation: Is the menu simple, persistent, hidden, or unusually placed?
• Project display: Does the portfolio use a grid, list, index, slideshow, or long case studies?
• Typography: Is the type quiet and editorial, large and expressive, technical, or highly condensed?
• Color: Is the page mostly neutral, built around one accent, or organized into changing project colors?
• Spacing: Does it feel spacious and calm, dense and information-rich, or intentionally uneven?
• Motion: Which movement helps the visitor understand the work, and which movement is only decoration?

This produces a design brief Claude Code can use. "Make it feel creative" is too vague. "Use a restrained two-column project index, oversized sans-serif headings, generous white space, and hover previews that do not move the page layout" gives the agent decisions it can implement and test.

Choose a direction with a simple scorecard

Score each reference from 1 to 5 for clarity, project storytelling, visual distinctiveness, mobile suitability, and closeness to your own work. Then give each category a priority. For example, a freelance designer may weight project storytelling highest, while an art director may weight distinctiveness and presentation more heavily.

Avoid copying the whole strongest-looking site. Instead, combine compatible choices. You might take the direct introduction from one reference, the project index from another, and the restrained color treatment from a third. Keep a list of decisions that must remain yours, including your writing voice, project order, images, and contact path.

Turn references into a Claude Code brief

Give Claude Code a compact brief with five parts:

1. Goal: who the portfolio is for and what action matters.
2. Content: introduction, selected work, project details, biography, and contact information.
3. Layout: page sections, navigation behavior, grid or list rules, and responsive changes.
4. Visual direction: type scale, colors, spacing, image treatment, borders, and motion.
5. Boundaries: accessibility needs, performance priorities, content that must not be altered, and patterns to avoid.

Include links or screenshots only after writing your own observations. Ask Claude Code to explain where each reference influenced the proposal, then review the result against the scorecard. If a choice cannot be traced to a visitor need or a clear reference observation, remove it or test it.

Use this in your AI agent

> Find three to five portfolio website references for a personal portfolio aimed at [audience]. Compare their opening sections, navigation, project presentation, typography, color, spacing, responsive behavior, and motion. Recommend a direction that combines the clearest useful patterns without copying any one site. Then write an implementation brief for Claude Code with page structure, content requirements, responsive rules, accessibility checks, and a short list of design choices to avoid. Use the examples below as inspiration, but label any detail that still needs live verification.

Install Fudge for your AI agent at /mcp to inspect saved website references while you refine the brief.

Choose references that solve your content problem, not references that only look impressive with a large body of work. Start with one site that makes a single project feel substantial, one that handles a small project index clearly, and one that presents personal information without taking attention away from the work.

For a small portfolio, prioritize:

• A strong introduction that explains what you do and who you help.
• A project layout that does not make three projects look unfinished.
• Case-study templates that can expand or contract based on the available material.
• Clear proof of your role, process, and outcome for each project.
• A contact path that remains visible without feeling aggressive.

Ask Claude Code to design for the smallest realistic content set first. A flexible two- or three-item grid may work better than an elaborate archive. You can also use a featured project followed by a compact list of other work. When comparing references, note how much writing and imagery each pattern requires. The most useful reference is one whose content demands match your own.

Ask for a first pass that separates content from presentation and makes responsive behavior explicit. Give the agent your chosen references, your observations, and the decisions you want to keep. Then request a page plan before asking for detailed styling.

A practical sequence is:

1. Create the content model for projects, roles, dates, descriptions, images, and links.
2. Build the page structure with realistic sample content.
3. Add the desktop layout and then define mobile behavior section by section.
4. Add typography, color, borders, and image treatment from your brief.
5. Add motion only where it supports browsing or explains a project.
6. Check keyboard navigation, focus states, readable contrast, reduced motion, image alternatives, and slow loading conditions.

Have Claude Code list which choices came from your references and which were invented to fill a gap. Review that list before polishing. This keeps the result inspired by the references while preserving your own content and priorities.

Related questions

• Portfolio Website Examples: Fonts, Colors, and Spacing
• SaaS landing page design references for Claude Code
• Fintech Website Design References for Claude Code
• SaaS landing page examples with fonts, colors, and spacing