Mini project - Designing with AI - 2026
This portfolio.
How I went from a website that no longer represented me to a Product Designer portfolio, designed and built by iterating with Claude.
The challenge
My website told a different story from my CV and LinkedIn, and didn't explain how I work.
What I did
Redefine the message, document a design system from the code and redesign the site section by section in a simulator.
Result
A website with a single narrative, explained case studies and its own details, built in Astro from the simulator without redoing the design.
01 - The starting point
A website from another stage
My first website dated back to when I was studying Interactive Communication. It presented me as a generalist communication profile: social media, websites and very different projects.
By then I was already designing product every day. The website didn't say so.
02 - The first version
A technical UX/UI profile
In summer 2026 I rebuilt it from scratch to position myself as a UX/UI designer with technical judgment. I published it in October.
- A block child theme in WordPress, with its own classes and consistent naming across the code.
- Monochrome look: large type, lots of white space and a single dark section.
- Client projects linked to their live websites.
- Working with AI: strategy and copy with Claude, build with Claude Code.
UX/UI Designer - Product Developer
UX/UI design with technical judgment
03 - Why rebuild it
My profile had changed
My role at the company grew and I moved my CV and LinkedIn to Product Designer. The website had to tell the same story.
- Projects were links, not case studies: you couldn't see what I had decided.
- The page was a flat scroll, with every section at the same pace.
- Some copy oversold or I couldn't defend it in an interview.
04 - The method
Designing in a simulator
Instead of touching the live site, I redesigned it in an exact replica with my own components, with desktop and mobile views.
- Design systemDocumented from the theme's code, with its tokens and components.
- SimulatorA replica of the site where I iterated section by section with Claude.
- ApprovalNo change goes into the design system unless I accept it.
- HandoverWith the design settled, Claude built the site in Astro from the simulator and the design system.
05 - What changed
Before and now
| First version | Now | |
|---|---|---|
| Positioning | UX/UI Designer and Product Developer | Product Designer |
| Color | Monochrome | Monochrome with an orange accent |
| Projects | Links to client websites | Case studies with challenge, what I did and result |
| Pace | Continuous vertical scroll | Chapters and a horizontal canvas |
| Process | Not shown | Six steps, from problem to build |
| Platform | WordPress with a block child theme | Static site in Astro |
| Details | Entrance animations | Intro, Figma cursor and Pixel |
06 - What I removed
Less, but better
What I dropped along the way mattered as much as what I added, so the site wouldn't feel crowded.
- The waving emoji in the headline: the Figma cursor already says hello.
- The headline underline: it competed with the Figma selection.
- The orange hover lines: too much noise.
- Monospaced type in labels: it felt generic.
- Sentences I couldn't defend in an interview.
07 - What I learned
The website is just another product
I treated it like any product: first the problem and the message, then the design and finally the build. AI let me try lots of ideas quickly, but every decision about what stays and what goes was mine.
I also changed the platform. A website that only I edit, and always with Claude, didn’t need a CMS. In Astro it’s faster, easier to maintain and its code lives on my GitHub.