Shipping a portfolio with AI as my co‑builder

Personal Project

AI Workflow

0→1

Claude Code

Context

This ongoing case study is the answer to several problems that came up while job searching:

How do I prove my AI skills when none of the projects I worked on for a salary used it?
Sending my portfolio as a Figma link has its limits
Paying for a no-code subscription to host my portfolio wasn't an option
How do I make my portfolio memorable?

From a Figma prototype shared as a link to a live AI-built site. Chatbot and feedback loop still in progress.

Role:Solo product designer and builder

Duration:3 weeks

Tools:Figma, Figma Make, Figma MCP, Claude, Claude Code, Claude Cowork

Proved Skills

End-to-end AI workflow: from scoping to shipped code
Prompt engineering documented across the build
Tool orchestration
Design judgment over AI output

Costs

Build: ~59€ one-time (Figma + Claude Pro, one month each) vs. 200€+/year for Webflow or Framer
Ongoing: 18€/year domain
→ 1st year: ~155€ saved, then: ~180€/year saved

Key Decisions

Tested feasibility, chose the stack, and scoped what to build with Claude
Audited accessibility in Figma before writing code
Overrode Claude Code when its output worked against the design

Scope

Scoping before building

Before building, I used Claude to scope what I could ship solo, which features would prove AI skills, and which stack would fit.

Two go beyond a basic site: the chatbot and a GDPR-compliant feedback loop that turns conversations into data I can act on.

Features and stack diagram divided into two sections: included features (Code with AI, Automations, Chatbot, Multilingual Support) using Figma, Claude, Next.js, and n8n or Make; excluded features (Page Tracking, Recruiter custom view) marked with a red cross

Before coding

Preparing the Figma file for AI handoff

I used Claude Code to build the Variable and token libraries, and to flag and clean up inconsistencies.

At first, each task ran as a script. The "Code to Canvas" integration shipped mid-project and removed that step. I dropped the scripted workflow the same day.

Claude conversation showing a Figma plugin script being debugged — the script calls figma.notify to confirm how many component properties were fixed, followed by a diagnostic snippet to list all components and their types

Back-and-forth with Claude, running scripts in Figma

Accessibility audit with Claude Cowork

The audit flagged 13 issues. Most were build-time fixes (alt text, navigation). One needed design work: buttons and cards had no focus state, which a Figma prototype didn't need.

Accessibility spec showing interactive states for a filter tab (Idle, Hover, Selected, Focus) and a work card grid (Idle, Hover, Focus), each with a visible pink focus ring and blue dashed container outline

Components states including the new "focus" state

Building

Going back to the browser default scroll

I wanted the live site to scroll like my Figma prototype. Claude Code and I iterated on easing and duration.

Figma prototype

Every version had a slight delay at the start of the animation, an unavoidable limit of JavaScript scroll. It made the interaction feel broken, like the click didn't register.

Custom scroll iteration

Trade-off taken: the browser default feels more natural on the live site.

Final version, browser default

Speccing with Figma Make, building with Claude Code

I used Figma Make to ideate on the popup design and capture the behaviour spec, then used it as a checklist when Claude Code built it.

Figma Make spec used as a build checklist

Pushing back on a Claude Code solution

One case study image had a different aspect ratio than the others, which broke the card layout. I suggested re-exporting. Claude kept proposing CSS workarounds, so I pushed the re-export a second time. It fixed the layout in one step.

Claude conversation where Claude proposes a CSS workaround; user pushes back suggesting to re-export the image

My suggestion, ignored

Claude conversation showing the user's re-export suggestion being accepted the second time

Same suggestion, second time. Fixed.

Adapting to a new model mid-project

Claude Opus 4.7 dropped just as I started building this case study page. The first attempt used Opus 4.7, all previous pages used Opus 4.6. Same task, similar prompts, but Opus 4.7 hit the MCP token limit and instead of stopping, improvised: generating its own text content and pulling layout from already coded pages rather than the Figma file.

I switched to Claude Sonnet for the rest of the build. For front-end coding, it's better suited than Opus.

Opus 4.7 first output: improvised layout and generated text content

Two Claude Code exchanges: the first prompt sent to Opus 4.7, then the follow-up asking what went wrong and Claude's own diagnosis of why it deviated from the Figma file

The conflicting instruction ("match existing pages") gave Opus 4.7 a fallback when it hit the MCP token limit.

Outcome

What the live site delivers today

Custom domain
Password-protected case studies
Full code ownership
More professional than a Figma link

Coming soon

Why I built the chatbot and feedback loop

Portfolio feedback only comes if you make it to an interview with a hiring manager. The chatbot gives recruiters a way to get the information they need, and gives me data on what they actually look for, so I can improve the portfolio and walk into interviews better prepared.

Designing for trust, GDPR-compliant

Users will give explicit consent before their first message.
Conversations will be anonymised before logging, personal details stripped automatically, no way to trace back to a person or company.
Data will be deleted after 6 months.

Roadmap

DONE

🥳️ Portfolio live

🧐 Audits