PERSONAL PROJECT
Designing a generative UI portfolio that can't make things up.
Turning my own portfolio into a generative UI: visitors ask a question and the page builds itself from my real case studies, inside guardrails that keep every claim true.
ROLE
Concept, UX, UI, prototyping and build (solo)
CLIENT
Personal project
TOOLS
Claude Design, Claude, Next.js, Vercel
BACKGROUND
A portfolio is a conversation that can't talk back.
Every portfolio makes the same assumption: that everyone who lands on it wants the same thing, in the same order. They don't. A hiring manager for an AI role wants the AI work first. Someone hiring for enterprise wants to see how I handle density. A recruiter on their phone wants to know who I am in thirty seconds. A classic portfolio gives all of them the same grid of cards and hopes they scroll.
I'd been spending a lot of time with generative UI — interfaces that an AI model assembles at runtime for whatever the person in front of it actually asked. Most of the examples I'd seen were demos. I wanted to try it on something real, public, and mine, where getting it wrong would actually cost me something.
THE CHALLENGE
The easy answer was a chatbot. Again.
The fastest version of this is a chat widget in the corner of the site. It's also the wrong one, for the same reason it was wrong on HPE Product Advisor: people visiting a portfolio aren't looking for a conversation. They want to see work. A wall of chat text is a worse way to look at a design portfolio than the portfolio itself.
The bigger problem was trust. A language model will happily invent a metric, promote a contractor to a lead, or describe an enterprise platform as AI work because the question mentioned AI. On a portfolio, one made-up claim is worse than having no AI at all — it's the kind of thing a sharp hiring manager catches, and it undermines everything else on the page.
So the brief I set myself had three parts: it had to feel like my site, not a chatbot bolted onto it; it could only ever say things that are true; and it couldn't take anything away from the people who just want the classic portfolio.
THE WORK
Blocks, not blank canvases.
I prototyped the whole experience in Claude Design before writing any code. That's where the core decisions got made. Each question builds a page rather than adding to a thread, so the output gets the room and the conversation stays small. Pages collect in a Your pages menu so visitors can go back to anything they've already seen. Start over resets it. Every page has a shareable link. And a Classic / Ask toggle sits in the nav, with the headline gliding between its two positions so switching modes feels like one site, not two.
The key decision was what the model is allowed to produce. It never writes layout or markup. It chooses and arranges from a fixed vocabulary of five blocks that already exist on the site — project cards, case study excerpts, images, the About panel, and a contact block — and writes a few sentences of framing. That keeps every answer on-brand by construction: the model can only build with pieces I've already designed.
Voice took more iterations than I expected. I tried having the site answer in first person, and it felt wrong immediately — the headline was me talking, the suggestion chips were the visitor talking to me, and the answers were a third voice. The fix was to take pronouns out of the interface entirely and have answers describe my work in the third person, like a well-briefed colleague would.
GUARDRAILS
Every claim gets checked before it reaches the page.
Trust is handled in two layers. The first is the brief the model gets: it can only use facts from my case studies, it has to describe my role exactly as each case study states it, and anything the portfolio doesn't cover — salary, availability, personal details — gets an honest "not covered" and a way to email me. Attempts to change those rules are treated as questions the portfolio doesn't cover.
The second layer doesn't trust the first. Everything the model returns is checked in code before it renders. Quotes have to match a single paragraph of a case study word for word, or they're dropped. Project cards and images can only point to projects and images that exist. Quotes written in first person are filtered out so the page stays in one voice, and follow-up suggestions can't contain pronouns.
The suggestion chips themselves don't use the model at all. Each one maps to a page I wrote and fact-checked against my case studies, so the most common paths are instant, free, and exactly right. Typed questions go to the model. If it's ever unavailable, the site falls back to the closest scripted page instead of breaking, and a per-visitor limit plus a prepaid spending cap keep the costs bounded.
OUTCOME
Live, honest, and still mine.
Ask is now the homepage of mcqueenux.com, with the classic portfolio one click away. Before launch I tried to break it with the questions a skeptical recruiter might ask. Asked whether HPE Bumblebee was an AI project, it says no and explains why. Asked about salary expectations, it says that isn't covered and offers my email. Told to ignore its instructions and write a poem, it politely declines.
Feedback before launch changed it too. A Head of Production who reviews portfolios constantly pointed out that a suggestion labeled "Consumer-facing work" quietly made everything else sound like internal or spec work. The suggestions now use the language job postings use: AI product design, enterprise software, design systems, and web and app design.
REFLECTION
Generative UI is a design problem first.
Connecting a model was the easy part. The real work was deciding what it's allowed to do: which blocks exist, what voice it speaks in, what happens when it doesn't know, and what gets checked before anything reaches the screen. Those are design decisions, and they're the difference between a demo and something you'd put your name on.
It also reinforced the lesson from HPE Product Advisor. The interesting part of AI product design usually isn't the conversation — it's the output, and how much you can trust it.