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 that never expire. No FNJ hosting fee: you host the exported site. See plans
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.
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.