A portfolio website should make it easy for a potential client to answer three questions: What do you do, who do you work with, and can you actually deliver? The problem is that building a portfolio that communicates all three can take far longer than expected. I wanted to see if AI design tools could handle the first version without making the site look like another generic AI-generated template.
So I used the same core brief with Figma Make, Google Stitch, v0 by Vercel, and Banani, and then reviewed the outputs as I would for a real client project. The result was useful: AI handled the repetitive design work surprisingly well, but the parts that made the portfolio feel credible still needed human decisions.
The Prompt I Used
I didn't create a massive prompt for each tool. I wanted something realistic that I could actually reuse across different AI design tools.
The Prompt:
Create a modern, professional portfolio website for a digital designer and web developer who helps businesses build high-quality websites and digital experiences.
Include a strong hero section with a clear headline, short introduction, and CTA, followed by selected projects, services, about me, skills, work process, client testimonials, and a contact section.
Make the portfolio project-focused, with space to show screenshots, project goals, my role, services provided, and results. Highlight website design, UI/UX, responsive design, and real estate website development services.
Use a clean layout, strong typography, generous whitespace, subtle interactions, and a professional color palette. Keep the navigation simple and make the site fully responsive across desktop and mobile.
The overall design should feel polished, trustworthy, and human, not like a generic AI-generated template. Keep the copy concise and client-focused, explaining what I do, who I help, and why clients should work with me.
I used this as the starting point rather than changing the entire brief for each tool. That made the comparison much more useful because I could see how differently each platform interpreted essentially the same requirements.
What I Wanted From the AI Tools
I wasn't trying to prove that AI could completely replace a designer.
That wasn't the point.
I wanted to answer a much more practical question:
Can AI get me from a blank canvas to a portfolio worth showing clients without spending days on the initial design?
For me, the important requirements were simple:
- Clear positioning
- Strong project presentation
- Professional visual hierarchy
- Responsive layouts
- Simple navigation
- Useful service sections
- Clear contact CTA
- Enough flexibility to make manual changes
I also wanted to avoid the typical AI-generated website problems: oversized headlines, excessive gradients, meaningless animations, generic stock imagery, and copy that sounds like it was written for every business on the internet.
AI Design Tools I Used to Build My Portfolio Site
1. Figma Make
🔗 Live output: puzzle-igloo-74654147.figma.site
Figma was the first place I wanted to test the prompt because I already think of portfolios primarily as interface and information architecture problems.
The first output gave me something much more valuable than a finished website:
a direction.
Instead of starting with an empty design file, I had a homepage structure to inspect and question.
The basic flow was:
Hero → Work → Services → About → Process → Testimonials → Contact
That structure made sense, but I didn't accept every decision it generated.
I immediately looked at the hierarchy.
Was the most important project getting enough attention?
Was the service offering clear?
Could someone understand my specialization without reading the entire page?
Were the CTAs competing with each other?
Those questions were more important than whether the interface looked impressive.
What I kept
- Overall page structure
- Project-card approach
- Clear section hierarchy
- Simple navigation
- Responsive thinking
What I changed
- Reworked the hero copy
- Reduced unnecessary decorative elements
- Adjusted spacing
- Improved project descriptions
- Made the CTA more specific
- Removed generic visual treatments
This was the first point where I realized something important:
AI gave me a good starting point, but I still had to design the experience.
2. Google Stitch
🔗 Live output: stitch.withgoogle.com/projects/7200596362741624643
Google Stitch was useful for a different reason.
Instead of becoming attached to the first layout, I used it to explore another interpretation of the same portfolio brief.
That is where AI design tools become genuinely useful.
Normally, exploring three or four different directions means creating multiple versions manually. With AI, I could get alternative concepts much faster.
I paid particular attention to how it handled:
- Hero layouts
- Project grids
- Typography
- Section spacing
- Service presentation
- Mobile layouts
- CTA placement
One version looked visually strong but pushed the portfolio projects too far down the page.
Another had a better hierarchy but felt too much like a template.
I wouldn't have wanted either version exactly as generated.
But together, they gave me enough ideas to make a better final direction.
That's the part of AI-assisted design that I find most useful:
You don't necessarily need AI to give you the final answer. You need it to give you more good options quickly.
3. v0 by Vercel
🔗 Live output: portfoliosite-portfolio.vercel.app
Vercel's v0 made more sense once I moved beyond visual exploration.
At this stage, I wanted to see how the portfolio sections could translate into functional web components.
For example, instead of simply designing a project card, I could generate a working project section with:
- Project image
- Category
- Description
- Technology tags
- CTA
- Responsive behavior
That's a different kind of productivity from that of a pure design tool.
I found this particularly useful for the repetitive parts of a website.
Navigation, cards, buttons, forms, grids, and responsive sections don't necessarily need to be built from scratch every time.
But I still reviewed the generated implementation.
I checked the structure, responsiveness, spacing, accessibility, and whether the components actually made sense for the portfolio.
The biggest mistake would be treating generated code as automatically production-ready.
Fast generation is useful. Blind acceptance isn't.
4. Banani
🔗 Live output: app.banani.co/preview/oo_s2sFFvkv9
Banani was another interesting part of the experiment because I wanted to see how another AI-powered design workflow would interpret the same portfolio requirements.
I kept the brief consistent rather than creating a special prompt designed to make Banani look good.
That gave me a more realistic comparison.
The generated concepts helped me evaluate different approaches to:
- Portfolio layouts
- Case-study presentation
- Hero sections
- Service blocks
- Visual hierarchy
- Responsive structure
The most useful part wasn't any single generated screen.
It was being able to compare ideas.
For example, one layout might have had a stronger hero while another handled project presentation better. Instead of choosing one output and accepting everything, I could take the strongest ideas from the different concepts and refine the structure myself.
That's closer to how I would actually use AI on a professional project.
The Biggest Changes I Made Manually
This is where the portfolio stopped looking like an AI experiment and started looking like my actual work.
1. I rewrote the hero section
AI-generated headlines often try to sound impressive.
I wanted mine to be immediately understandable.
The visitor shouldn't have to decode what I do.
A portfolio headline should quickly communicate the service and its audience.
2. I made the projects more specific
A screenshot alone doesn't explain why a project matters.
I added context around:
The problem → My role → What I built → The outcome
That makes a portfolio much more useful to someone considering hiring you.
3. I removed unnecessary design effects
AI tools like giving interfaces visual personality.
Sometimes that's useful.
Sometimes it means adding effects simply because they can.
I removed anything that didn't improve usability or communication.
4. I simplified the navigation
A portfolio doesn't need a complicated menu.
I wanted visitors to find the work and contact information quickly on the homepage.
5. I checked mobile layouts manually
This is one area where I don't trust the first generated result.
A desktop design can look excellent while the mobile version has awkward spacing, oversized text, or poorly cropped images.
I checked each major section separately.
What Clients Actually Noticed
The biggest change wasn't that someone recognized the website as AI-generated.
They didn't.
People noticed that the portfolio was easier to understand.
The projects were clearer.
The services were easier to find.
The website looked more consistent.
Most importantly, visitors could understand what type of work I actually do without having to dig through the entire site.
That's an important distinction.
Clients aren't hiring you because you used Figma Make, Stitch, v0, or Banani.
They care about whether your website gives them confidence that you understand their problem.
If someone is looking for real estate website development services, for example, they don't necessarily care which AI tool created the initial layout. They want to see whether you understand property listings, lead generation, responsive interfaces, conversion paths, and their business requirements.
The tool is behind the scenes.
The result is what gets noticed.
What I Would Use Each Tool For
After testing the four approaches, I wouldn't treat them as direct replacements for one another.
I'd use them differently.
| Tool | Where I’d Use It |
|---|---|
| Figma Make | Interface exploration and refinement |
| Google Stitch | Quickly exploring different visual directions |
| v0 by Vercel | Functional UI and web components |
| Banani | Generating and comparing UI concepts |
That workflow is more realistic than asking one tool to do everything.
My AI-Assisted Portfolio Workflow
If I were building another portfolio from scratch, I'd keep the process straightforward.
1. Define the audience
Know exactly who you want the portfolio to attract.
2. Write one useful brief
Describe your services, audience, sections, and visual direction.
3. Generate multiple concepts
Use AI to explore possibilities instead of immediately choosing the first result.
4. Select the strongest structure
Look at hierarchy and usability, not just visual appeal.
5. Build the interface
Use the tool that makes the most sense for the implementation stage.
6. Rewrite the important copy
Your positioning and project descriptions shouldn't sound generic.
7. Review everything manually
Check desktop, tablet, and mobile layouts.
8. Test the message
Show the site to someone unfamiliar with your work and ask:
“What do you think I do?”
If they can't answer quickly, the portfolio still needs work.
The Real Lesson From Building It With AI
AI didn't magically create a portfolio that clients noticed.
It helped me get to a strong starting point much faster.
That's the real advantage.
The tools handled a lot of the repetitive work involved in creating layouts, exploring variations, and producing interface components. That gave me more time to focus on the things that actually determine whether a portfolio works: positioning, project selection, content, hierarchy, and usability.
I also wouldn't recommend publishing the first design an AI tool generates.
The first output should be treated as a draft.
The second pass is where the real design work begins.
Conclusion
Using Figma Make, Google Stitch, v0 by Vercel, and Banani to build my portfolio showed me that AI design tools are most useful when they accelerate decisions rather than replace them. I could move from a blank canvas to multiple workable directions much faster.
Still, the final improvements came from reviewing the layouts, rewriting the copy, simplifying the interface, and making the project work easier to understand. That's ultimately what clients noticed, not that AI helped build the site, but that the finished portfolio clearly communicated what I do, what I've built, and how I can help them.
Top comments (4)
The biggest takeaway for me is that AI works better as a design accelerator than a replacement. Getting multiple directions quickly is useful, but the decisions around hierarchy, copy, positioning, and usability are what actually make a portfolio feel credible.
Exactly! That was my experience too. AI saved a lot of time getting from a blank canvas to workable concepts, but the final quality came from deciding what to keep, what to remove, and how to make the portfolio communicate clearly to a real client.
I really liked the point about not publishing the first AI-generated version. The “first output is a draft, the second pass is where the real design work begins” mindset feels especially important when using AI for client-facing work.
Absolutely. The first generation gives you something to react to, not something you should automatically ship. The manual refinement is what helped turn the AI output into something that actually represented my work and made the projects easier for clients to understand.