Tutorial · February 28, 2026 · 5 min read
How to build a portfolio website with AI
What designers, developers and photographers should show in a portfolio, a sample prompt, the steps to build and publish it with AI, and the search basics.
Updated October 10, 2026
A portfolio shows people what you do and how you think. If you keep putting yours off because building it feels like a project of its own, an AI website builder can take the building off your plate. Your time then goes into what matters: choosing and describing your work.
This guide covers what to include for designers, developers and photographers, how to build it step by step with frascati, our own builder, and the search basics that help people find you.
Why a portfolio still matters
A CV lists what you did. A portfolio shows it. Clients and employers see the quality of your work, how you explain it and what you care about. With so much AI-generated content around, evidence of real work by a real person carries weight.
It is also a place online that you control. Profiles on platforms change their rules and look like everyone else's. Your own site says what you want it to say.
Choose your portfolio type
Different work needs a different structure:
For designers
- Case studies: 4 to 6 projects, each with the problem, your process and the result
- Large images and little text on the overview, with the detail on each project page
- The tools you work with, such as Figma or Photoshop
- An about section with some personality: people hire designers for their taste
- A contact form with a clear line about the work you are looking for
For developers
- Projects with a short description, the technologies used and links to the live site or the code
- Your skills grouped by area, for example front end, back end and infrastructure
- Your work history with companies and roles
- Talks, open source work or articles, if you have them
For photographers
- Large photos first: let the images do most of the talking
- Work grouped by type, such as portraits, landscapes, commercial work and events
- Clients you are allowed to name, and quotes you have permission to use
- An inquiry form, plus online booking or a link to your booking tool
Step by step: building with frascati
Step 1: start a new project
Start a new project and pick the portfolio template for a head start, or begin with a description. Either way, you change everything in the chat afterwards. If you already have a website, paste its address and frascati uses the text of that page.
Step 2: write a detailed prompt
Here is an example for a developer portfolio:
“A portfolio for Alex Chen, a full-stack developer in Zurich with five years of experience. Pages: home with my name, my role and a one-line summary; projects with four case studies, each with the problem, what I built, the technologies and a link to the live site; about me with a short personal story; contact with a form and my email address. Skills: React, TypeScript, Node.js, PostgreSQL, AWS and Docker. Light design with a deep blue accent, calm and precise.”
Step 3: refine the design
After the first version, adjust it with short requests:
- “Use the portrait I uploaded on the about page.”
- “Keep each project description to two sentences.”
- “Give every project its own page with the full case study.”
- “Put my email address in the footer of every page.”
- “Switch to a dark design.”
Step 4: replace the placeholders
frascati does not invent facts about you. Where it does not know something, such as a client name, a figure or a quote, it leaves a visible [placeholder]. Fill them in through the chat (“The first project is TaskFlow, a team planner built with React and Node.js”) or edit the text directly in the Code view.
Step 5: publish
One click puts your portfolio online at a frascati address such as frascati.app/p/alex-chen. With Pro and Business you can use your own domain instead. Share the link on your profiles, in your email signature and on your CV.
Start from the portfolio template
frascati has 13 built-in templates, including a photographer's portfolio, plus templates shared by the community. A template is a starting point: you change the layout, colours, sections and text in the chat, just like a site you started from a description.
Every plan starts with a free 3-day trial with 20 credits. A new website uses about 3 of them, which leaves room for plenty of changes.
SEO tips for your portfolio
A portfolio only helps if people find it. The basics:
- Use your real name in the page title and the main heading. People search for you by name.
- Make the title descriptive: “Alex Chen, full-stack developer in Zurich” says more than “Portfolio”. frascati writes a title and description for every page; with Pro and Business you can set the title and description of the site yourself.
- Mention your city if you want local clients.
- Describe your images. frascati adds alt texts to photos; check that they describe your actual work.
- Link to your portfolio from LinkedIn, GitHub and your other profiles, so people can find it from there.
- Keep it current. Add new work when you finish it and remove what no longer represents you.
Common portfolio mistakes
- Too many projects: show your best 4 to 6, not everything you have ever made.
- No context: a screenshot alone says little. Explain what the project is, your role and the outcome.
- Old work: a portfolio that stopped years ago sends the wrong signal. Update it when you finish something good.
- Hard to reach: make the contact form and your email address easy to find on every page.
- Style over content: if the design gets in the way of the work, simplify it. Your work is the point.
Next steps
A portfolio is never finished. Publish a good first version now and improve it over time. The hardest part is putting the first version online.
For more, read our step-by-step guide to building a website with AI, or our landing page guide if you want a page for a single offer.