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 (18)
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.
Absolutely! That balance between AI efficiency and human judgment is what makes the final work stand out. Glad you had a similar experience, and thanks for sharing your perspective!
The part that landed for me was keeping one brief across tools instead of rewriting the prompt for each generator. On client files I force a four-line sticky before any AI pass: (1) one-sentence goal for this visitor, (2) constraints the model must not invent, (3) the one acceptance check (“a stranger can answer what I do in one breath”), (4) what is explicitly out of scope this round.
If I skip that, every tool happily invents a different hero and a different service list at high confidence. If I keep it, the first output is already a draft I can edit instead of a new personality. Curious whether your worst first-pass was a “bad tool” or just a brief that left positioning and out-of-scope blank.
That’s a really solid approach. I’ve noticed the same thing, AI often isn’t the problem; the lack of a clear brief is. The four-line sticky is a great way to keep the tools focused on the actual positioning instead of letting each one invent its own direction. The “out of scope” part especially feels underrated.
The "brief instead of a master prompt" approach is the most transferable takeaway here; keeping a single input across Figma Make, Stitch, v0, and Banani turns the comparison into an actual test of the tools rather than a test of your prompting skill on any single tool. It also mirrors real client work, where you rarely get to hand-tune the brief per deliverable; you write it once, and it has to hold up.
The line that stuck with me was "you don't necessarily need AI to give you the final answer, you need it to give you more good options quickly." That's a much healthier framing than treating any of these tools as a design-decision engine. The manual pass rewriting the hero, adding problem/role/outcome context to projects, and checking mobile separately is normal design work that AI sped the runway to, not replaced.
Absolutely agree. Using the same brief across every tool makes the comparison much more realistic because you are evaluating the tools themselves, not how well you can optimize prompts for each one. And that point about AI generating more good options quickly is exactly the right mindset. AI can speed up exploration, but the final design decisions still need a human eye.
Really useful breakdown of using multiple AI design tools against the same brief instead of hopping between them ad hoc. The framing of "AI gives you a direction, not a finished decision" matches what I've seen too. The repetitive layout and component work is where these tools genuinely save time, but things like hero copy, project framing, and information hierarchy are where a real understanding of the client's problem still has to show up. The mobile-check point is underrated as well; a lot of AI-generated first passes look great on desktop and fall apart on smaller viewports.
Absolutely agree. AI is great at accelerating the repetitive execution, but the real value still comes from understanding why something should be designed a certain way. The mobile check is especially important, what looks polished on desktop can quickly expose weak hierarchy or spacing on smaller screens. AI can speed up the process, but the designer still has to make the right decisions.
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.
What stood out to me is the workflow, not the tools themselves. Using one consistent brief across four different generators instead of tailoring the prompt for each is the part most people skip, and it's exactly why the comparison actually meant something here. You could see how each tool interprets the same input rather than just picking whichever one happened to sound good with a custom-written prompt.
The mobile-check habit is one I've learned the hard way too. A layout can look completely polished on a 1440px screen and then fall apart the moment text wraps differently or a card grid stacks awkwardly on a phone. Treating the first generation as a draft rather than a deliverable seems like the actual skill here, way more than knowing which AI tool to open first.
Absolutely agree. The biggest value comes from keeping the input consistent and judging how each tool handles the same constraints. And yes, treating AI output as a first draft is becoming a core skill. The real work starts when you test, refine, and adapt it across screen sizes.
The four-line sticky idea from another commenter is close to what I do too, but I'd add one more failure mode worth naming: even with a locked brief, the tools disagree on what "professional" means visually, and that disagreement is where a lot of first-pass ugliness comes from. One tool's idea of restrained is another tool's idea of empty.
What stood out most in your breakdown was treating v0 as an implementation tool rather than a design tool. That's the split people miss, they run everything through one generator and get frustrated when the thing that's great at layout exploration is mediocre at component structure, or vice versa. Matching tool to stage instead of expecting one tool to do all of it is probably the actual unlock here, more than any specific prompt.
Absolutely. That difference in what each tool considers “professional” is something I noticed too. A locked brief helps, but it does not guarantee consistent visual output across tools.
And I completely agree on v0. Treating it as an implementation tool rather than forcing it into the design exploration stage makes much more sense. The real unlock is understanding which tool is best for each stage of the workflow instead of expecting one AI tool to handle everything.
This is a great example of where AI-assisted design actually makes sense. I especially like the distinction between generating the first version and making the final product feel intentional. The biggest win isn’t replacing the designer, it’s reducing the time spent getting from a blank canvas to something worth critiquing. The human judgment around positioning, hierarchy, copy, and usability is still what makes the portfolio convincing.
Absolutely agree. AI is most valuable when it helps designers move past the blank canvas faster, while the human still owns the decisions that make the final product feel thoughtful and usable. That balance is where AI-assisted design really shines.
Really solid breakdown, especially the part about treating each tool's output as a starting point rather than a finished product. The distinction between Figma Make for exploration, Stitch for quickly comparing directions, v0 for turning sections into working components, and Banani for generating concepts to pull ideas from is a much more realistic way to use these tools than expecting one platform to do everything.
The mobile check point stood out to me too. It is easy for a layout to look great on a large screen and then fall apart once text wraps differently or spacing gets cramped on a phone, and a lot of first drafts from AI tools do not account for that well.
The biggest thing I am taking from this is the reminder that clients do not care which tool built the site. They care whether the site makes it obvious what you do and whether they can trust you to solve their problem. AI can speed up the layout and component work, but positioning, project framing, and copy still need a human who understands the actual client.