Design Engineer Portfolio: What to Include in 6 Parts

In 2026, hiring teams look for three things in a design engineer portfolio: taste, proof that you finish what you start, and prototypes in real code. You don't need twenty projects. With this six-part structure you can rebuild your portfolio homepage in an afternoon.

It's for you if you can design and you also write some code. If the term is new to you, start with what a design engineer is.

What Teams Look for Now

Designer Ioana Teleanu went through job posts at companies like Anthropic, Vercel, Cursor, Linear, Stripe and Notion. Her piece in Bootcamp fits in one line: they want someone who has taste and can ship. Prototyping in code is often a core requirement, not a bonus. And companies are moving from "show me your process" to "show me the thing."

Vercel's team, in Design Engineering at Vercel, writes that design engineers blend aesthetic sense with technical skills, so they can design, build and ship a solution on their own. Some ideas, like animations, keyboard controls and touch, are better prototyped in code than in a design file.

Geronimo Ramos, who has interviewed hundreds of designers, adds in How I'd Break Into UX/UI Design Now: teams want judgment, not just output. Your portfolio should show how you think.

So your portfolio needs to prove four things:

• Taste: you can tell good from average, and your own site shows it.
• You ship: your work is live, not only in a design file.
• Code prototypes: motion, states and interactions you actually built.
• Clear thinking: you can explain every choice.

1. One Sentence That Says What You Do

What it is: the top of your homepage. Your name, one or two plain sentences and two or three buttons.

Why it matters: a stranger has a few seconds to understand what you do. If they don't, they don't scroll.

How to do it: write it the way you'd say it to a friend. "I design websites and build them myself" beats any slogan. No tool list, no "passionate creative." On alekdob.com, the first lines say Alek designs and builds complete digital products with AI, starting from design. Below that, just three buttons: contact, projects, CV.

2. Three Things You're Good At

What it is: a section with three cards, one per area.

Why it matters: three is quick to read and forces you to choose.

How to do it: one card for design, one for building, one for what makes you different. Four short lines under each. On Alek's site the section is called "Design first, code right after." and covers design and interfaces, motion and interaction, and whole products with AI.

3. Three to Five Real Projects

What it is: the heart of the portfolio. Each project has a clear name, a label of what you did and, whenever you can, a link to the live thing.

Why it matters: twenty half-finished ideas hide your three best ones.

How to do it: pick your strongest and drop the rest. Julien Pianetti, an independent designer in France who also builds in Webflow, shows big images on julienpianetti.com with only the name and his role underneath, like UX/UI Design or Motion design.

With lots of work, a list works too. Play Grounds Studio shows projects as a clean list: project, tags, year, location and status, including work in progress.

No client work yet? Build something real for a friend, a local shop or yourself, and put it online. A small live project beats a big concept that only exists as pictures.

4. A Playground for Small Experiments

What it is: a page of small pieces in code: an animation, a menu, a hover effect, a loading screen.

Why it matters: most first portfolios forget it, and it's the most direct proof that you prototype in code.

How to do it: five experiments, each with a short clip and a link to try it live. Julien has a Playground page with pieces like Hover list, Jazz menu and Loading. One new piece a month keeps it fresh.

5. Two or Three Notes on How You Think

What it is: short pieces on what you built, what went wrong and what you'd change.

Why it matters: writing is the easiest way to show judgment. It says more than a long "about me."

How to do it: take projects from your portfolio and explain one decision per note. You don't need to write every week. On Alek's site, a "Stream" section lists his latest articles with a topic and a date.

6. An Easy Way to Say Hello

What it is: one clear way to reach you, plus two or three links.

Why it matters: if a hiring manager likes your work, they shouldn't have to hunt for you.

How to do it: an email and, for example, LinkedIn, GitHub and wherever you write. Alek has an email button plus LinkedIn, GitHub and Medium.

Inside Each Project Page

Keep it short, in this order:

1. The problem, in one or two sentences.
2. Your role: what you designed, what you built, who you worked with.
3. Two or three key decisions, each with a picture and one line on why.
4. The real thing: a live link, a video or a prototype people can try.
5. What you'd change next time: Geronimo suggests showing where you got it wrong and changed direction, because it shows judgment.

If you can, show at least one thing moving. A short clip of an interaction says "I built this" faster than any paragraph.

Ready to Copy

Paste this into Claude or ChatGPT, followed by the text of your homepage:

Try It Small

Spend 10 minutes on the top sentence only. Show it for five seconds to someone who doesn't know you, then ask: "What do I do?" If they repeat your idea in their own words, you're done. If they hesitate, rewrite it using the versions from the prompt.

Watch Out For

• It's the frontier, not the whole market: Teleanu says it clearly, many companies still hire the old way.
• Tool lists and year counts: the companies she studied barely care. She quotes Vercel: depth and quality of experience matter more than years.
• Design files with no live version: if you built it, link it. If not, say it's a concept.
• Other people's work without credit: if you rebuilt something you saw, say where it came from.

Today's step: fix the top sentence before you touch anything else. For playground ideas, Alek is building MagpUI, a gallery of motion pieces, components and templates from great designers, each with a prompt your AI agent can use to rebuild it and a link to the author. How to use it is in this pill.

This article is adapted from a piece Alek published on Medium.

In short: A good first portfolio is one clear sentence, a few real projects that are live, some experiments in code and a couple of notes on how you made your choices.