FNJ

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.

Sample site with fictional names, made to show the kind of site the builder designs. Yours is designed from your description and the reference you choose.

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.

  1. 01

    Hero with live work

    A strong line and a framed client site.

  2. 02

    Selected sites

    Client projects with links to the live versions.

  3. 03

    Services and packages

    Design, build, care plans.

  4. 04

    Process

    From discovery call to launch.

  5. 05

    Kind words

    Quotes from real clients.

  6. 06

    Start a project

    A button to your inquiry form or calendar.

Sample photography from Unsplash by workperch and junoless.

Made for web designers, not for everyone

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

  1. 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.

  2. 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.

  3. 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.