Designer portfolio website builder
A designer portfolio that holds up to a designer's eye
Your portfolio is itself a piece of work, so a template that looks like everyone else's costs you. Give FNJ's AI builder a reference with the typography and grid you'd choose, describe your practice, and it designs a portfolio in that language: a work index, case-study pages, your process and an about page. Then you take over on a real canvas with real layout controls, and export clean code.
Independent designer, Lagos and London
Identities, interfaces and objects for people who care how things are made.
Independent designer, Lagos and London
Identities, interfaces and objects for people who care how things are made.
The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.
The sample, section by section
What a 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
Statement hero
What you design and for whom, in your own voice.
- 02
Work index
Selected projects with a cover, a discipline and a year.
- 03
Case-study pages
Brief, process, outcome: one page per project.
- 04
Process
How you work, so clients know what a project feels like.
- 05
About
Background, clients and recognition.
- 06
Contact
Email, availability and links to your profiles.
Sample photography from Unsplash by avtar9w, __humanbean and alex__grig.
Made for designers, not for everyone
01
Designed in your visual language
The builder reads your reference for type pairing, grid, spacing and palette, and designs your site in that language instead of a house style.
02
A canvas, not a form
Flex and grid layouts, per-breakpoint styles, components and presets: adjust the output the way you'd adjust your own file.
03
Clean code at the end
Export Next.js or static HTML with semantic markup and no builder runtime, or push it to your own GitHub.
Starter prompt
A prompt written for 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 designer portfolio or studio site whose grid and typography you'd be proud to call yours.
The builder takes a reference's look (layout, type, palette, spacing), never its words or images.
Build a portfolio for [your name], a [discipline] designer in [city]. Start with a confident one-line statement about what I design, then a work index with six projects (cover image, discipline and year for each) and a case-study page for each with sections for the brief, the process and the outcome. Add a short process section, an about page with my background and selected clients, and a contact section with my email and availability. Expressive but disciplined: a strong grid, a distinctive display typeface paired with a clean sans-serif, and one confident accent colour.
How it works
01
Describe your 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. Every site you build is yours to keep. No FNJ hosting fee: you host the exported site. See plans
Built with FNJ's AI builder
Look at this beautiful site our AI builder built in 10 minutes
One prompt and a screenshot of a site we liked, recorded as it happened. The builder designed a portfolio, built every page on the canvas for desktop, tablet and phone, and handed over the code. The video skips the waiting.
Designers: questions
- Will my portfolio look like a template?
- It starts from the reference you give it, not from a theme, so two designers with different references get two different sites. Everything it makes is editable on the canvas, down to individual spacing values.
- Can I write full case studies?
- Yes. Ask for a case-study page per project and the builder lays out brief, process and outcome sections with room for images; you write or edit the words directly.
- Can I use my own fonts?
- The builder picks Google Fonts that match your reference, and switches to any other Google Font you name in a prompt. Uploading a licensed font file isn't supported yet.
- Can I import my Figma file?
- Not directly. Use a screenshot of your Figma frame as the reference and the builder designs to match it; your actual project images go in by upload.
- Can I see the code it produces?
- Yes. Export a Next.js project or static HTML at any time and read it; there's no proprietary runtime in it.
Portfolio guides
- GuidePortfolio Website Ideas for 12 Professions, Page by PageFor 12 professions, from real estate photographers to translators: what the portfolio home page should lead with, and the three to five pages worth building.Read the guide →
- GuideHow to Write a UX Case Study for Your PortfolioA practical structure for UX case studies: problem, role, key decisions and outcome, plus how long to write, which visuals to use and how to handle NDA work.Read the guide →
- GuideGraphic Design Portfolio: How Many Projects and Which OnesHow many projects a graphic design portfolio needs, how to choose them, when to show range or focus, and how to present brand work, mockups and short write-ups.Read the guide →
Related portfolio builders
Design a portfolio worth the work in it
The builder opens with your designer prompt filled in. You edit it, add a reference, and watch the first version take shape.