Visual Identity Web & Mobile AI Work Partnership

My Portfolio x Claude
— Creative Process

Learning to master Claude as a tool and integrate it into my daily life as a UX/UI designer — while letting a piece of my personality shine through a meaningful project.

My Role Solo UI/UX Designer
Timeline Ongoing
Tools Figma, Claude, FigJam
My portfolio homepage — hero section with illustration
The Challenge

Building a portfolio that actually feels like me.

As a UX/UI designer with a product management background, I needed a portfolio that would showcase both my design skills and my ability to think strategically. But I also wanted it to feel personal — not just another template.

At the same time, I was curious about AI as a creative tool. Could Claude become a real partner in the design process — not replacing creativity, but amplifying it? This project became the perfect playground to find out.

The goal: design and build a portfolio that reflects who I am, while learning to work with AI as a genuine creative partner.
Portfolio homepage overview
The Approach

AI as a creative partner, not a shortcut.

Working with Claude wasn't about generating a website automatically. It was a conversation — back and forth, refining ideas, challenging choices, and iterating together until every detail felt right.

Design direction

I led the creative vision — colours, layout, illustration style, visual identity. Claude helped translate ideas into code and suggested improvements along the way.

Iterative dialogue

Every section went through multiple rounds. I'd give feedback, ask questions, and we'd refine together — just like working with a real collaborator.

Learning by doing

This project taught me how to brief an AI effectively, ask the right questions, and keep creative control while leveraging technical speed.

Design Process

From blank page to live site.

01

Visual Identity

Defined the colour palette, typography, illustration style, and overall mood. Warm, playful, and professional — with hand-drawn touches that make it personal.

02

Content & Structure

Planned the page structure, wrote the copy, and organised the content hierarchy. Every section tells a part of the story.

03

Design & Build

Designed the UI in Figma and built it with Astro — using Claude as a coding partner to bring the design to life with clean, accessible HTML and CSS.

04

Polish & Ship

Added micro-interactions, animations, and responsive refinements. Deployed on Cloudflare Pages for fast, reliable hosting.

The Result

A portfolio that grows with me.

The final site is fast, fully responsive, and — most importantly — it feels like me. Soft colours, playful illustrations, and thoughtful details at every scroll. A living project that evolves as I learn and grow.

What I learned

Working with AI is a skill in itself. The quality of the output depends entirely on the quality of the input — just like a design brief. The more precise and thoughtful my requests, the better the results.

This project proved that AI can be a powerful creative accelerator when guided by a clear vision and strong design instincts. The designer stays in the driver's seat — AI just makes the ride smoother.

Portfolio homepage on desktop

Next project

Daily UI Challenge

Exploring a variety of designs through quick, focused briefs.

View case study →