UI/UX designer portfolio website builder
A UX portfolio built around case studies, not screenshots
Hiring managers skim a UX portfolio for how you think. FNJ's AI builder designs case-study pages with a structure that shows it: the problem, your role, research, the decisions you made and why, and what changed. Describe your projects, attach a portfolio you admire, and refine the result on the canvas.
The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.
The sample, section by section
What a UI/UX 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
Positioning hero
The kind of products you design and the problems you like.
- 02
Selected case studies
Three or four, each with a one-line outcome.
- 03
Case-study pages
Problem, role, research, decisions, outcome.
- 04
Process
How you go from question to shipped interface.
- 05
Experience
Roles, teams and products you've worked on.
- 06
Contact and CV
Email, LinkedIn and a CV link.
Made for UI/UX designers, not for everyone
01
Case studies with a spine
Problem, role, constraints, research, decisions, outcome: a structure that reads in two minutes and holds up in an interview.
02
Room for real artefacts
Space for journey maps, wireframes, flows and final screens, each with a caption explaining the decision behind it.
03
Fast to skim
Summary cards at the top of each case study, so a reviewer gets the story before scrolling.
Starter prompt
A prompt written for UI/UX 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
A UX designer's portfolio whose case-study pages you found easy to read.
The builder takes a reference's look (layout, type, palette, spacing), never its words or images.
Build a sophisticated UI/UX designer portfolio for [your name]. Open with a short statement about the kind of products I design. Add a 'Selected case studies' section with three projects (title, product type and a one-line outcome for each) and a case-study page for each with: summary card (role, team, timeline), the problem, research insights, key design decisions with images, the final outcome and what I learned. Add a process section, an experience section and a contact section with links to my email, LinkedIn and CV. Modern editorial layout, excellent typography, restrained colour and plenty of whitespace.
How it works
01
Describe your UI/UX 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
UI/UX designers: questions
- Can the builder structure UX case studies for me?
- Yes. Ask for case-study pages and describe each project; the builder lays out problem, role, research, decisions and outcome sections. The thinking is yours to write, and you can edit every word.
- Can I protect a case study under NDA with a password?
- No. The builder doesn't include password-protected pages. Leave NDA work off the public site, or describe it without confidential screens.
- Can I embed a Figma prototype?
- Embeds aren't supported. Add screenshots or a screen recording as a video file, and a button linking to the prototype.
- How long should a UX case study page be?
- Long enough to show your decisions, short enough to skim: a summary card at the top lets reviewers decide whether to read on. The builder starts there and you adjust.
- Will the portfolio work on a phone?
- Every page is designed at desktop, tablet and phone widths, so case studies read properly when someone opens your link from a message.
Related portfolio builders
Show how you think, not just what you shipped
The builder opens with your UI/UX designer prompt filled in. You edit it, add a reference, and watch the first version take shape.