# Real Portfolio Website Design Examples for an AI Coding Agent [Open the live Fudge conversation](https://design.withfudge.com/share/find-real-portfolio-website-design-examples-for-an-ai-coding-agent) Last updated: 2026-08-25 For a portfolio website, give your AI coding agent references that show how work is presented, not just pages with attractive visuals. Start by comparing COLLINS, Fix Studio, and Daniel Sun as three different directions to investigate for studio work, personal identity, and project detail. ## Pick the portfolio direction first Before asking for code, decide what the portfolio must help a visitor do: - **Hire a studio:** Make capabilities, selected work, and credibility easy to scan. - **Hire an individual:** Make the person, role, point of view, and contact path clear. - **Explore case studies:** Make project context, process, and outcomes easy to follow. - **Show experiments:** Make browsing feel open-ended while keeping navigation understandable. Open the examples below and compare the first screen, the project index, and one project detail view when those views are available. The best reference depends on your job. A studio portfolio and an individual creative portfolio may use very different pacing even when both look polished. ## Captured pages [![COLLINS](https://pin.fontofweb.com/4735?format=jpg)](https://design.withfudge.com/share/pin-4735) [COLLINS](https://design.withfudge.com/share/pin-4735) [![Fix Studio](https://pin.fontofweb.com/357?format=jpg)](https://design.withfudge.com/share/pin-357) [Fix Studio](https://design.withfudge.com/share/pin-357) [![Daniel Sun](https://pin.fontofweb.com/7971?format=jpg)](https://design.withfudge.com/share/pin-7971) [Daniel Sun](https://design.withfudge.com/share/pin-7971) ## Use the examples as contrasting references Use **COLLINS**, **Fix Studio**, and **Daniel Sun** as real pages to inspect rather than as fixed labels for a design style. For each one, record what the page actually shows: - How quickly can you identify the person or studio? - How are projects introduced and grouped? - Which details appear before opening a project? - How much visual space does each project receive? - How does the page lead visitors toward contact? - What changes on a narrow screen? Do not assume that a current page, its content, or its interactions will remain unchanged. Mark your notes as either “observed now” or “recommendation for my site.” This keeps an AI coding agent from turning a quick visual impression into an invented product requirement. These references are examples to investigate, not templates to reproduce. Verify current page behavior and details yourself, then keep a record of the patterns that genuinely support your portfolio's audience. ## Build a reference worksheet Have the agent document each site using the same questions: 1. What does the visitor understand about the person or studio immediately? 2. How are projects grouped, sorted, or introduced? 3. What information appears before a visitor opens a project? 4. How much visual space does each project receive? 5. What makes one project feel more important than another? 6. How do type size, weight, and line length support browsing? 7. Which colors, borders, radii, shadows, and spacing choices create the tone? 8. What changes on a narrow screen? 9. How does a visitor reach contact information? Then ask for a synthesis in plain language: “Use the project browsing clarity of reference A, the studio personality of reference B, and the personal voice of reference C. Keep project cards easy to scan, put my role near the top, and make contact available without forcing a visitor through every case study.” ## Keep the portfolio useful, not merely impressive A portfolio often fails when the visual system hides the work. Use a clear project title, short role or service label, year or category where useful, and one reason the project matters. Case studies should answer the visitor's likely questions: what was the problem, what did you contribute, what changed, and what can you do next? Review the design at three widths. On desktop, check whether the grid has a clear reading order. On mobile, check whether project titles remain visible and whether images load in a sensible sequence. For keyboard users, make focus states easy to see and ensure project links have useful names. Keep motion subordinate to browsing. If an animation delays access to project information, it is working against the portfolio. A useful next step is to inspect the captured references for their page sections, typography, and color roles, then turn those observations into a brief your coding agent can apply to your own work without copying another portfolio. ## Use this in your AI agent > Find and compare three real portfolio website references for my goal: [studio, individual portfolio, case-study portfolio, or experimental portfolio]. For each one, document the hero, project index, project labels, case-study path, contact path, typography, colors, spacing, navigation, motion, and mobile behavior. Separate visible observations from recommendations and note anything I should verify manually. Then create an original implementation brief for my stack that defines the page hierarchy, project card rules, responsive layout, accessibility checks, content model, and a shortlist of patterns to borrow without copying the references. > > [Install Fudge for your AI agent](/mcp) --- Choose based on the visitor's first decision. A studio-style layout works when visitors need to understand a team, range of services, and body of work quickly. It usually gives projects strong visual priority while supporting them with concise labels, capabilities, or client context. A personal layout works when the visitor is deciding whether they want to work with you specifically. Put your name, role, point of view, and contact path near the top. Let the work prove your range, but do not make the visitor infer what you contributed. Use a case-study-led layout when the quality of your thinking matters as much as the final images. Each project should make the problem, your role, key decisions, and result easy to find. You can still use a strong visual index, but the project page needs a clear reading path. If you serve both audiences, keep one primary path and make the second path easy to reach. For example, lead with your name and role, then organize work by service or project type. Ask your coding agent to preserve that decision in the navigation, page titles, card labels, and contact section. --- Prepare the content that determines hierarchy before discussing polish. For each project, collect a title, one-sentence description, your role, services or skills involved, year or category if useful, images, a project link when available, and a short explanation of the problem and result. Mark which projects are strongest so the agent can give them more space. Also write a short introduction that says who you are, what you do, and who you help. Add a contact action with the wording you want visitors to see. If you have testimonials, awards, or client names, label what is approved for publication and what is private. Give the agent content limits too: maximum title length, maximum card description length, image aspect-ratio preferences, and whether case studies should be short or detailed. Ask it to design an empty state for projects you have not published yet rather than inventing placeholder work. Finally, provide two or three references and explain the exact pattern you like in each. “I like this” is less useful than “I want this project index to scan quickly, but I want each case study to feel personal and spacious.” ## Related questions - [Real SaaS Landing Page Design Examples for an AI Coding Agent](/share/find-real-saas-landing-page-design-examples-for-an-ai-coding-agent) - [Fintech Website Design References for Claude Code](/share/fintech-website-design-references-for-claude-code) - [Fintech Website Examples: Fonts, Colors, and Spacing](/share/fintech-website-examples-with-fonts-colors-and-spacing) - [Real developer tool homepage design examples for an AI coding agent](/share/find-real-developer-tool-homepage-design-examples-for-an-ai-coding-agent)