Web designer portfolio website builder
A web designer portfolio that proves you can build
Clients hire a web designer whose own site is good, so yours has to be. FNJ's AI builder designs a portfolio that shows client sites properly (in browser frames at real widths), explains what you offer and how a project runs, and then hands you code you can host anywhere, which is a fair thing to tell clients you can do for them too.
The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.
The sample, section by section
What a web designer website needs
The sections the builder can design for you, and the job each one does. The starter prompt asks for these; add or drop any of them in your own words.
- 01
Hero with live work
A strong line and a framed client site.
- 02
Selected sites
Client projects with links to the live versions.
- 03
Services and packages
Design, build, care plans.
- 04
Process
From discovery call to launch.
- 05
Kind words
Quotes from real clients.
- 06
Start a project
A button to your inquiry form or calendar.
Made for web designers, not for everyone
01
Client sites shown properly
Projects in browser and phone frames, with the brief, your role and a link to the live site.
02
Packages that sell
What a project includes, how long it takes and where it starts, so leads arrive ready.
03
Clean code you own
Export Next.js or static HTML, push to your GitHub, and host it wherever you host client work.
Starter prompt
A prompt written for web designers
It opens in the builder ready to edit. Replace the words in brackets with your own details, change anything else you like, then add a reference.
Reference to add
The site of a web designer or studio whose own website made you want to hire them.
The builder takes a reference's look (layout, type, palette, spacing), never its words or images.
Build a web designer portfolio for [studio name], a web designer working with [small businesses / startups]. Open with a confident line about the sites I make and a client site shown in a browser frame. Add a 'Selected sites' section with six client projects shown in browser and phone frames (client, brief, link to the live site), a services section with three packages, a process section from discovery call to launch, a section for client quotes and a 'Start a project' section with a button to my booking calendar. Modern and crisp: a distinctive sans-serif, bold headlines and a confident accent colour.
How it works
01
Describe your web designer site
Open the builder with the starter prompt, fill in your details and add a screenshot or link of a site you'd like yours to look like. A reference is required: it's what makes the design yours rather than a template.
02
Watch it design every page
The builder plans the pages, palette and type, then builds each page section by section on a canvas at desktop, tablet and phone widths while you watch.
03
Refine it, then take the code
Ask for changes in plain words or edit by hand, upload your own work, then download a Next.js project or static HTML, or push it to your GitHub, and host it where you like.
What it costs: From $25/month, or $29 once for 50 credits that never expire. No FNJ hosting fee: you host the exported site. See plans
Web designers: questions
- Can I use FNJ to build sites for my clients too?
- Yes. The Agency plan is for that: monthly credits for building client sites, each exported as code you hand over or host yourself.
- Can I show client sites in browser frames?
- Ask for browser and phone frames and the builder styles them; upload screenshots of each client site to fill them.
- Can visitors fill in a contact form?
- The builder doesn't include forms. Use a button to your booking calendar or an email link, or add a form service to the exported code.
- Is the exported code something I'd be happy to show a developer?
- It's semantic HTML and CSS (or a Next.js project) with no builder runtime; export it and review it yourself before you decide.
Related portfolio builders
Make your own site your best case study
The builder opens with your web designer prompt filled in. You edit it, add a reference, and watch the first version take shape.



