UX/UI Design · AI · My own site
Designing my portfolio with Claude, as one system from start page to CV
I designed and built this site myself, with Claude as my building partner. I treated it as a product: one visual identity across the site, the cases and the CV, a design system, and written rules for what a good case is. I set the direction and decide what is true. Claude builds, translates and checks, and nothing goes live until I say publish. Readers choose English or Swedish, and a dark or light theme.
- My role
- Designer, product owner and editor of my own site
- Year
- 2026
- Built with
- Claude, HTML and CSS, Git, and Playwright and axe for checks
- Published on
- Netlify
- Languages
- English and Swedish
- Themes
- Dark and light
The short version
The problem
My earlier portfolio showed what I had designed, not how I work: the discovery before the screens, the product decisions and how I lead teams.
What I did
I designed and built the site with Claude, and wrote down the rules it works from: my positioning, my tone of voice and a baseline every case must meet. I review every change in a preview before it goes live.
What it led to
Five main cases that lead with their impact, a CV in the same identity, and every page in two languages and two themes, with accessibility checked against WCAG 2.2 AA.
The brief I gave myself
My earlier portfolio, built in Framer, mostly showed what I had designed. It did not show how I work: the discovery before the screens, the product decisions, and how I lead designers and teams. I also wanted it in two languages, and my CV to feel like part of the same work.
The question
How can a portfolio show how I work, not only what I have designed?
Most portfolios show finished screens. Mine also had to show the discovery before the screens, the product decisions behind them, and how I lead designers and teams.
Four goals
- Show the whole rangeCases in CX/UX discovery, UX/UI design, product leadership and design leadership, each showing my role and my decisions.
- One identity everywhereThe start page, every case, the company pages and the CV share one visual identity.
- The reader choosesEnglish or Swedish, dark or light, and the choice follows the reader through the site.
- True, or not at allReal facts and real figures only. What was delivered is kept apart from what we aimed for.
Designing and building with Claude
I designed the site and built it together with Claude. I set the direction and own every decision. Claude writes and changes the code, translates, renders images and checks the result. Every change is made in a draft, I review a preview, and only when I say “publish” does it go live on Netlify.
- 1BriefI describe what I want in plain words, in English or Swedish, often with a screenshot or a review.
- 2ContextClaude works from my written rules: positioning, tone of voice, the case baseline and the design tokens.
- 3DraftEvery change is made in a draft, in English and Swedish, never straight on the live site.
- 4CheckAutomated checks for accessibility, image sharpness, overflow on small screens and a CV that fits A4.
- 5ReviewI review screenshots on desktop and mobile, in both themes and languages, and ask for changes.
- 6PublishOnly when I say “publish” does the draft go live on Netlify.
Who did what
Using AI where it earns its place meant being clear about what I keep. Claude is fast at building and checking. Deciding what a case should prove, and what is true, stayed with me.
- What each case should prove, and how it is structured
- What is true, and what is left out
- The visual identity, the principles and every final call
- The written rules: positioning, tone of voice and the case baseline
- Reviewing every change, and saying when it is published
- Writing and changing the code for every page
- Translating every text into Swedish
- Rendering images, diagrams and previews from my direction
- Reviewing cases against my baseline, and running the checks
Rules the AI can follow, and a gate it can’t skip
The biggest change in how I work with AI is writing the judgement down. My positioning, my tone of voice and a baseline for every case live in shared project documents that Claude reads every time: lead with the impact, keep the process high-level, and always say what a method bought. Rules like these keep the work consistent, from the first case to the tenth. But they can’t decide what is true or worth showing. So that stays a human gate: facts and figures come only from me, and nothing is published until I have reviewed it.
case studies, across four kinds of work
company pages, each linked from the CV
languages and themes for every page
preview versions published along the way
Cases that show the whole range
I wanted the cases to show four kinds of work, not only UX/UI design. Five main cases sit on the start page, and the rest under More work. Each case says exactly what my role was: Product Manager, line manager for designers, or hands-on product designer.
The anatomy of a case
Every case is checked against the same baseline before it is published, so a reader can scan and compare them.
- The short versionThe problem, what I did and what it led to, at the top.
- A storyFrom the problem to what changed, with my role made clear.
- Method, then what it boughtEvery method is followed by the risk it removed, the decision it enabled or the result it moved.
- Process at a high levelDeep detail, like KPI tables, sits in closed “More detail” sections.
- Honest outcomesOnly true results. Targets are labelled as targets.
- Proof at the endA short quote from someone I worked with, in a quiet style.
How the site is organised
Four paths lead out from the start page. Work and the CV meet at the company pages, so a recruiter can go from a line in the CV to the cases behind it, and back.
Every page: English or Swedish, dark or light, and a sitemap in the footer.
One identity, from site to CV
The CV is designed in the same system as the site: the same colours, the same two typefaces, the same rose labels. It is built from the same source, in English and Swedish, and checked so that every page fits A4.
Each job in the CV links to a company page with the cases from that company, and the company names on the start page lead there too. A recruiter can go straight from a line in the CV to the work behind it.
The design system
The site is built on Material 3: colour roles, a type scale, a shape scale, a 4 dp spacing grid and expressive motion. Everything is set as tokens, so the whole site, and the CV, can be restyled in one place.
Text is never baked into images. Labels and panels on the hero images are real text in the site’s fonts, so they follow the theme and the language, stay sharp, and can be read by screen readers.
Colour
- Primary
--primary - Primary container
--primary-container - Secondary container
--secondary-container - Tertiary
--tertiary - Tertiary container
--tertiary-container - Surface
--surface - Surface container
--surface-container - Outline
--outline
Type
Dark and light, English and Swedish
Readers choose a dark or light theme, and English or Swedish. Both choices are remembered, and every page, case and the CV is translated, including diagrams and image text.
Dark · English
Light · SwedishUI components
Diagram components
Offers got diners to download the app, loyalty brought them back
From the Leeroy case.
- Discovery insightDiners didn’t know when the order was ready.
- Design principleAlways know the status of the order
- Design decisionOrder status, and a notification when it is ready.
- Product direction“I know when my food is ready”
- Measuring successOrders ready on time
- Decision
- Build ordering first, and loyalty next.
- Why
- Without orders there is nothing to reward.
Case components
The parts every case is built from, so a reader always knows where to look: the result at the top, the detail on request, and proof at the end.
The problem
Many users didn’t know they could create a match profile, and those who did struggled with the criteria.
What I did
Research, a clearer five-step flow with personal suggestions, and development-ready design.
What it led to
The share of users with a match profile rose from 30 to 50 percent.
of users have a match profile. From the TRR case.
The service journey
- Hand-inThe consumer leaves the parcel in a locker
- First mileThe driver picks it up
- TerminalIdentified and sorted
More detail: the KPIs we steered by
Deep detail, like KPI tables and dependencies, waits here until the reader asks for it. Try opening it.
“Mikaela made us explore different possibilities quickly, going from an idea to something we can discuss or ship.”
Mattias Björklund · CEO and Co-owner at Bilwebben
Design principles for the site
I gave the site its own design principles, written as questions I could test every change against.
Show the thinking, not only the screens
Every case shows the problem, my role and the decisions, not only the result.
AskCan a reader tell what I decided, and why?
True, or not at all
No invented facts or figures. What was delivered is kept apart from what we aimed for.
AskCould I defend every sentence in an interview?
One identity everywhere
The site, the cases and the CV share colours, type and components.
AskDoes it feel like the same person made all of it?
The reader chooses
Language and theme are the reader’s choice, and the choice is remembered.
AskCan a Swedish reader in a light room read everything comfortably?
Built for every screen
Checked down to 320 px, in both languages and both themes.
AskDoes anything break on the smallest phone?
Respect the people in the work
Names and personal data in screenshots are blurred, and credit goes where it belongs.
AskWould the people in this case be comfortable reading it?
Lead with what it bought
Every method is followed by what it achieved, for readers who don’t speak design.
AskWould a recruiter understand why this mattered?
Nothing ships unseen
Every change is previewed and checked before it goes live.
AskHave I seen this, in both languages, on a phone?
Learnings
Looking back, five things stay with me from designing my own site with Claude.
AI is fast, judgement is mine
Claude could rebuild a whole case in minutes. That moved the hard part to deciding what is true, what matters and what to leave out.
Review before it’s live
Looking at every change as a preview, on desktop and mobile, in both languages and themes, caught more than commenting on documents ever did.
A system makes new things look native
With tokens and shared components in place, new diagrams like the red thread or the KPI matrix fitted in from the first version.
A portfolio is a product
It has users, recruiters and hiring managers, and it needed a brief, versions, quality checks and a backlog, like any product I have led.
Rules scale, judgement doesn’t
Writing down my positioning, my tone of voice and a baseline for every case made the work consistent, whether it was the first case or the tenth. But no rule could tell what was true or worth showing. That is why every change still goes through me.