How to Build a Portfolio Website with AI
A freelance web designer charges $300 to $500 for a basic portfolio site. Building a portfolio website with AI costs nothing and takes about 10 minutes. Here is what the workflow looks like.
Why AI Works for Portfolio Sites
Portfolios are structurally predictable. Almost every one has the same sections: intro, work samples, about, contact. That predictability is exactly what AI is good at.
The hard part is not the structure. It is filling it with your specific work and making it sound like you. That part is still your job. The boilerplate, the HTML, the CSS, the responsive layout, the clean design: AI handles all of that in seconds.
The old way took a weekend. This takes about an hour, mostly because you are deciding which projects to include and writing the descriptions.
What Makes a Portfolio Actually Work
Before you write the prompt, it helps to know what you are building toward. A portfolio that gets responses has:
- A clear headline that says who you are and what you do, specifically
- 3 to 6 work samples with brief descriptions of the problem you solved
- Measurable outcomes where possible ("increased conversion 18%" beats "improved performance")
- A simple contact method, either a mailto link or a working form embed
- A tone that reads like you wrote it, not like a template
Miss any of these and the portfolio exists, but it does not do the job.
The Prompt
Copy and paste this into ChatGPT, Claude, or any AI assistant:
Build me a portfolio website in a single HTML file. I am a [your role] who specializes in [your specialty]. My name is [your name].
Include:
- A header with my name and a one-line description of what I do
- A work section with [number] projects. For each: name, the problem it solved, my role, and one outcome
- An about section with 2-3 sentences about my background and approach
- A contact section with my email: [your email]
Design: clean, minimal, white background, dark text, one accent color. No JavaScript. Inline CSS only. No external fonts or dependencies. Works completely offline.
Projects:
[List your projects here — name, problem, role, outcome]
Replace the bracketed parts with your actual details. The more specific you are, the better the output. Vague inputs produce generic portfolios.
What to Include in Each Project Entry
Most AI-generated portfolio sections fall flat because the project descriptions are too vague. The AI only works with what you give it.
For each project, provide three things:
The problem. What was broken before you got involved? Be specific. "The landing page had a 4% conversion rate and the team wanted 8%" is better than "there was a conversion problem."
Your role. Were you the sole designer? Did you lead a team? Did you handle research, design, and QA, or just one of them? The more precise you are, the more credible the result.
The outcome. What changed after you shipped? Numbers are better than adjectives. "Conversion went from 4% to 9.2% over six weeks" is a real result. "Improved performance" is not.
The AI formats these into a readable project card automatically. Your job is to provide the raw material.
What the AI Generates
The AI returns a complete, single-file HTML document. Your name is in the header, your projects in the work section, your contact info at the bottom. It takes about 60 seconds.
The first version is usually 80% of what you want. The headline will be a bit generic. The design will be functional but plain. The next section covers the fastest fixes.
Making It Live
Once you have the HTML, paste it into HTMLPub and get a live URL in seconds. Free tier, no credit card required. For a comparison of publishing options, see how to host a website for free.
For a full walkthrough of the AI portfolio workflow from prompt to published page, see AI portfolio website builder.
Customizing It
Three changes that make the biggest difference after the first draft:
Rewrite the headline. The AI version is usually generic: "Creative Professional Based in [City]." Replace it with something specific to what you actually do: "I help B2B SaaS teams reduce churn with better onboarding copy."
Add real project thumbnails. The AI creates colored placeholders. Replace them with actual screenshots of your work. This one change makes the portfolio meaningfully more credible.
Fix the contact section. The AI sometimes adds a form that does not actually submit anywhere. Replace it with a mailto: link or embed a working form from Tally or Typeform.
Common Issues
The HTML cuts off mid-page. The AI hit a token limit. Ask it to regenerate just the missing sections and paste them in manually.
Styles look broken in one browser. Add *, *::before, *::after { box-sizing: border-box; } to the top of your CSS. Fixes it most of the time.
The design feels generic. Follow up with: "Update the design to feel more like a modern Notion or Linear page. Clean, spacious, minimal color." AI is good at style iteration.
What to Do Next
Once the portfolio is live, put the URL in your LinkedIn bio and email signature. Update it every few months as your work changes.
If you do client work, AI website builder for freelancers covers how to position the site and what clients actually look at when they visit.