Product designer portfolio website
A product designer portfolio that shows your judgement
Senior product design roles are won on judgement: what you chose not to build, how you worked with engineering, what moved. FNJ's builder designs a portfolio around shipped products, the trade-offs behind them and the outcomes you can share, with a layout that reads like a well-run product review.
The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.
The sample, section by section
What a product 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
Introduction
Your focus, seniority and the products you've shaped.
- 02
Shipped work
Projects with role, team and outcome.
- 03
Project deep dives
Context, options, decision, result.
- 04
Principles
How you make product calls.
- 05
Experience timeline
Companies, roles and years.
- 06
Contact
Email, LinkedIn and CV.
Made for product designers, not for everyone
01
Impact up front
Each project opens with your role, the team, and the outcome you can share, before a single screen.
02
Trade-offs, explained
Sections for options considered and why you chose one, which is what product design interviews probe.
03
Calm, product-grade UI
A clean interface feel that echoes good software, without looking like a SaaS homepage.
Starter prompt
A prompt written for product 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 product designer's portfolio or a well-designed product's marketing site whose clarity you like.
The builder takes a reference's look (layout, type, palette, spacing), never its words or images.
Build a product designer portfolio for [your name], a [senior] product designer who has worked on [B2B SaaS / consumer apps]. Open with a short introduction and the products I've shaped. Add a 'Shipped work' section with four projects (role, team size, outcome), a deep-dive page for each (context, options considered, the decision and why, result, what I'd do next), a 'How I work' principles section, an experience timeline and a contact section. Calm and precise: a refined sans-serif, a neutral palette with one accent, and interface screenshots in soft device frames.
How it works
01
Describe your product 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
Product designers: questions
- How is this different from the UI/UX designer page?
- The structure leans toward product outcomes and trade-offs rather than research artefacts; it's a starting prompt, and you can ask for any structure you prefer.
- Can I show metrics from my projects?
- Yes, as text you write. Share only numbers your employer allows; the builder never invents outcomes for you.
- Can I add device mockups?
- Ask for screenshots in device frames and the builder styles them with borders, radii and shadows. Upload your own screens to fill them.
- Can I keep the portfolio up to date easily?
- Edit by prompt ("add a project about our onboarding redesign") or by hand. Each prompt uses credits; hand edits don't.
Related portfolio builders
Make your judgement visible
The builder opens with your product designer prompt filled in. You edit it, add a reference, and watch the first version take shape.