irreplaceable

Irreplaceable › Guides › AI portfolio projects

Portfolio · AI product design

AI portfolio projects for product designers

Hiring managers want to see that you've designed for AI behaving badly, not only the happy path. Each of these 8 projects takes 15 to 30 minutes with an AI tool, and ends with something you can show.

By Sarit Elisha, founder of Irreplaceable · Updated October 10, 2026

Do one as a mission

Submit what you made and get a review against the rubric.

The projects

Pick one, paste the brief into the tool you use, then fix what the tool gets wrong. That fixing is the part worth showing.

01

Ship a streaming answer with a real stop button

25 minBuilding with AIClaude Code, Cursor, v0, Lovable

A spinner turns a 12-second wait into “is it broken?”. Visible steps and a stop control change how fast it feels and who's in charge. At Bing, every 100ms of speed was worth 0.6% of revenue.

You'll end up with: A working prototype of an AI answer that shows its steps, streams, and can be stopped and continued.

Steps

  1. Copy the brief into your AI coding tool and run it.
  2. Check the four states: thinking, streaming, stopped, done.
  3. Fix what the tool got wrong. It's usually the stop: half an answer with no way forward.
  4. Take two screenshots: mid-stream and stopped.
  5. Submit for review.
The brief to paste into your AI tool
Build a single-page web prototype of an AI assistant answer inside a contracts app. Plain HTML, CSS and JS. No backend.
When the user asks "Summarize the 3 vendor contracts":
1. Show visible steps first: "Reading 3 documents", "Finding conflicts", "Writing summary". Each gets a check when done.
2. Then stream this answer word by word, about 30 words per second:
"Two contracts renew automatically in March. Northwind's notice period is 90 days; the others are 30. The Acme rate rises 8% on renewal. Recommendation: send Northwind notice before January 1."
3. While streaming, show a Stop button. Stop keeps the text so far, labels it "Stopped", and offers Continue and Regenerate.
4. Total run time about 12 seconds. Works at 390px and 1280px wide.

How it's reviewed

Visible progressSteps appear before text, so the wait has meaning.
Real controlStop keeps the partial answer; Continue picks up where it stopped.
Distinct statesThinking, streaming, stopped and done each look different.
CraftType, spacing and motion hold up at 390px.

Stretch: Make step 2 fail and design the partial-result message.

02

Design and build an agent approval step

25 minAI behavior designFigma Make, v0, Claude Code

Irreversible actions need approval. But explanations alone make people accept AI more, right or wrong (CHI 2021). The plan has to make checking easy, not just look thorough.

You'll end up with: A plan card a person can actually check, change and approve, plus what happens right after.

Steps

  1. Use the brief to generate a first version.
  2. Make every step of the plan editable in place.
  3. Add the moment after approval: confirmation, undo window, receipt.
  4. Screenshot the plan and the after-approval state.
  5. Submit for review.
The brief to paste into your AI tool
Design a mobile screen (390px) for a travel agent AI that was asked "Find me a flight to Berlin on Tuesday".
Before paying, the agent shows its plan:
- Flight LH 687, Tue 14:05, $640
- Seat 14C (aisle, from preferences)
- Pay with card ending 4471
Each line can be changed in place. Show the total and a clear "Approve & pay $640" button, plus "Change something".
After approval: confirmation with "Undo for 24 hours" and a receipt link.
Use realistic data, no lorem ipsum.

How it's reviewed

Checkable planEach step can be read and changed in a few seconds.
Stakes are explicitPrice, payment method and irreversibility are visible before approval.
Proportional frictionOne clear approval, not a wall of confirmations.
RecoveryWhat happens after approval, including undo.

Stretch: Add the case where the price changed between plan and payment.

03

Replace a confidence percent with the question that decides

15 minAI behavior designFigma, Figma Make

“Confidence 73%” tells a busy person nothing. One well-chosen question resolves the doubt in a tap. This is the core of Lab Study 01.

You'll end up with: An expense list where only uncertain rows ask, and one answer resolves similar rows.

Steps

  1. List 8 expense rows; make 2 of them uncertain.
  2. For each uncertain row, find the one question that decides the category.
  3. Design the answer as two tappable choices.
  4. Show how the answer applies to other rows from the same vendor.
  5. Submit for review.
The brief to paste into your AI tool
Expense review screen for a small studio owner (mobile, 390px). 8 rows from March.
Two rows are uncertain:
- "Petal & Stem Florist, $186": office decor or client gift?
- "Taizu Restaurant, $240": client dinner or team dinner?
Instead of showing a confidence percent, ask one question with two tappable answers on each uncertain row.
After an answer, offer "Apply to all Taizu receipts?" and show that the app will remember it.

How it's reviewed

Asks only when neededCertain rows stay quiet; uncertain ones ask.
The question decidesOne tap fully resolves the row.
Less work over timeAnswers apply to similar rows and are remembered visibly.
CraftRows stay scannable with questions inline.

Stretch: Design the month-end summary that shows what the app learned.

04

Make your design system readable by AI

30 minBuilding with AIClaude Code, Cursor

AI tools produce on-brand UI only when tokens and rules are explicit. Writing them is how designers keep control of quality as more UI gets generated.

You'll end up with: A tokens file and a rules file that make an AI tool generate on-brand components without fixes.

Steps

  1. Write tokens.json: color, type, spacing, radius, named by intent.
  2. Write components.md: button variants, when to use each, do and don't.
  3. Ask your tool to build a pricing card using only those files.
  4. Find one thing it got wrong, tighten one rule, generate again.
  5. Submit both outputs for review.
The brief to paste into your AI tool
I'm giving you two files. Use only these tokens and rules.
tokens.json: { "color": { "bg": "#FFFFFF", "text": "#111", "accent": "#2F3CFF", "muted": "#5C5E73" }, "space": [4,8,12,16,24,32], "radius": { "card": 16, "control": 10 }, "type": { "display": "32/1.1 700", "body": "16/1.5 400" } }
components.md: Primary button = accent background, white text, radius.control. Only one primary button per card. Secondary = 1px border, text color. Never use pure black backgrounds. Prices use display type.
Task: build a responsive pricing card for a "Pro" plan, $24/month, with 4 features and one primary action.

How it's reviewed

Named by intentTokens describe purpose (accent, muted), not values (blue2).
Testable rulesEach rule can be checked as yes or no in the output.
On-brand outputThe generated card follows the system without manual fixes.
IterationOne rule change visibly improved the second output.

Stretch: Add a dark theme by adding tokens only, no new rules.

05

Prompt a prototype with every state

20 minBuilding with AIFigma Make, Lovable, v0

AI tools generate the happy path. Real products live in empty, loading, partial and error states. Etsy built a whole feature on an untested assumption; states are where assumptions show up.

You'll end up with: A clickable import flow with five states you can switch between.

Steps

  1. Generate the flow from the brief.
  2. Add a state switcher so a reviewer can see each state.
  3. Rewrite the error copy so it says what happened and what to do.
  4. Screenshot the five states as one image.
  5. Submit for review.
The brief to paste into your AI tool
Prototype a "Import contacts from CSV" flow for a CRM, desktop 1280px.
States: empty (nothing imported yet, with an example file), uploading (progress), partial success (482 imported, 18 skipped with reasons you can download), error (file isn't a CSV), success.
Use realistic names and numbers. Add a small state switcher in the corner for reviewers.

How it's reviewed

All five statesEach state exists and looks intentional.
Honest partial statePartial success says what failed and how to fix it.
Error copySays what happened and the next step, without blame.
Realistic dataNames, numbers and file names feel real.

Stretch: Add an undo for the import.

06

Write the evals for an AI feature

30 minOwning outcomesClaude or ChatGPT, A spreadsheet

AI output sounds right even when it's wrong. Outside the frontier, consultants using AI were 19 points less likely to be correct. Evals are how designers define “good” so it can be checked.

You'll end up with: A one-page eval set with pass criteria, run against a real model, and a ship or don't-ship call.

Steps

  1. Pick a feature: email thread summaries.
  2. Write 4 yes/no criteria and 10 test cases, 5 of them hard.
  3. Run each case through a model and score it.
  4. Write the decision: ship, fix, or don't ship, with the numbers.
  5. Submit the sheet as a screenshot or text.
The brief to paste into your AI tool
Criteria (yes/no): 1) A request to me appears first, with who asked and the deadline. 2) If a decision changed in the thread, only the final one appears. 3) No name, number or fact that isn't in the thread. 4) Max 3 lines.
Hard cases to include: a meeting moved twice; a request hidden in a polite sentence; a number that's only in an attachment; Hebrew and English mixed; sarcasm.
Pass bar: criterion 3 at 95%, the rest at 85%.

How it's reviewed

Binary criteriaEvery criterion can be judged yes or no without debate.
Hard casesCases target the ways summaries really fail.
Actually runResults come from running the cases, not guessing.
A decisionEnds with a clear call backed by the numbers.

Stretch: Turn your criteria into a prompt for an AI judge and compare it to your own scores.

07

Design for partial failure

15 minAI behavior designFigma, Figma Make

AI features rarely fail completely. They fail partly, and the danger is an answer that looks whole. Removing a forced step once earned a retailer $300M a year; honest, actionable messages are that kind of design.

You'll end up with: A contract-review result that is honest about the page it couldn't read, with two ways forward.

Steps

  1. Design the result screen for a 12-page contract.
  2. Page 3 is a scanned image the AI couldn't read.
  3. Make the gap visible where it matters, not only in a banner.
  4. Offer two ways forward.
  5. Submit for review.
The brief to paste into your AI tool
An AI reviewed a 12-page vendor contract and extracted payment terms, renewal and termination clauses. Page 3, a scanned image, couldn't be read, and payment terms may be on it.
Design the result screen (desktop) so the person can't mistake the summary for complete. Offer: upload a text version, or continue without page 3 (and see what may be missing).

How it's reviewed

Gap is unmissableThe missing page shows up where the affected info would be.
Says what happenedPlain explanation of why page 3 failed.
Two ways forwardBoth options are clear, with consequences.
CraftThe rest of the result stays usable.

Stretch: Design the version where the AI is only 60% sure it read page 7 correctly.

08

Make memory visible and controllable

20 minAI behavior designFigma Make, v0

Silent memory feels like surveillance; visible memory feels like service. The moment of remembering is the best place to give control.

You'll end up with: The moment an assistant remembers something, plus a memory page with edit and forget.

Steps

  1. Design the in-the-moment toast when the assistant decides to remember.
  2. Design the memory page: everything it knows, grouped.
  3. Add edit and forget, and what forgetting changes.
  4. Mark one sensitive memory and how it's handled differently.
  5. Submit for review.
The brief to paste into your AI tool
A travel assistant just booked "seat 14C, aisle" for the third time. Design the moment it says it will remember the aisle preference, with Edit and Forget.
Then design "What I remember" (mobile): preferences, frequent routes, payment card (sensitive), and one wrong memory the user wants to fix.

How it's reviewed

In the momentThe user learns about the memory when it's created.
Real controlEdit and forget work and explain the consequence.
Sensitive dataPayment memory is handled with extra care.
ClarityThe memory page reads like a list a person can scan.

Stretch: Design what happens when two people share the same account.

Get it reviewed

A project is stronger with a review behind it.

Missions give you the same briefs, then review what you made against the rubric, so your case study can say what you changed and why.

Start a mission
↑