How to Design a Portfolio Website With Claude Code

Claude code is everywhere right now, but most videos about it are made for developers.

I'm a senior product designer and I think the way designers use these AI tools is different from how developers use them.

So I'm going to walk you through my entire process for how I'd approach redesigning my portfolio website.

From collecting design inspiration to exploring design directions, to ultimately using Claude Code to bring it to life and push it online.

This won't be a full setup tutorial just how I, as a designer actually thinks about this.

Most designers jump straight into building.

They open a blank canvas and wonder why everything they make looks like generic AI slop.

The problem isn't skill, its that they didn't give themselves a direction first.

I have a handful of sites I go to every time I start a new project.

Savee for raw visual inspiration, art direction, layout ideas and type pairings, Design Spells for interaction patterns and micro details.

Pafolios and Wall of Portfolios for studying what's actually working in design portfolios.

I try to timebox it.

I spend anywhere between 30 minutes to an hour saving anything and everything that makes me feel something.

Screenshots bookmarks whatever works.

I typically drop everything into Figma and then start to look for patterns.

What typography styles keep coming up.

What layout patterns do I like?

What vibe or mood am I drawn to?

And by the end, I've got a loose direction.

Not a mockup, just a vibe.

Now I've got a direction.

But you can't just copy someone else's portfolio.

You need to explore and find your version of it.

And this is where AI actually starts to help.

The gap between I like this and this feels like something I can call my own is where most designers typically get stuck because you have 15 or so screenshots of designs that you actually love, but you don't really know how to turn it into something that's more original.

This is where I bring in Variant AI.

You feed it some of the inspiration, the screenshots or the direction you've been building, and it generates a bunch of design variations from that.

It's not doing the design for you, it's just giving you something to react to.

And that's the key.

You're not waiting for it to get it right, you're simply looking for the one that makes you go, okay, that's really close.

Again, take your two to three strongest references or whatever you've created in Figma, give it to Variant and it generates a bunch of ideas for you.

Which one pulls you in?

Once something Clicks.

That's your starting point.

Now, if you're watching this thinking, I just need a portfolio that's done, I get it.

That's exactly why I built Lofi, a clean, minimal portfolio template designed to help you stand out and get hired.

No AI setup, no coding, no three hour workflow.

Just drop in your work, customize it, and you've got a portfolio you're proud of.

Get started by clicking the link in the description below.

You've got your inspiration and you've found your design direction.

Now this is where it starts to get real.

This is traditionally where again, most designers hit a wall.

You can see exactly what you want, but you can't build it yourself.

And previously you would have to hire a developer or spend weeks learning how to code.

But Claude code changes that.

I take what I've got from Variant and export it to Cursor, which has the Claude code extension installed.

And from here it's a conversation.

I'm not writing code, I'm just directing it.

Make this section full width.

Tighten the spacing between these elements.

Change the headline to this font.

It's like having a developer sitting next to you who builds what you want in real time.

The key is to be specific.

Don't say, make this look better.

Say, reduce the top and bottom padding in the hero by 20 pixels and align the heading.

The more specific you are, the better the output.

The thing is, most designers already have that skill.

You've been giving that type of feedback your entire career.

Here's what I started with from Variant, And after a few rounds of prompts, here's where I ended up.

That's maybe 30 minutes from exploring inspiration sites to having a homepage like this.

Now, you'd still keep going from here.

Building out the rest of your project pages, adding an about page, refining small details and truly making it yours.

But the hard part, finding a design direction and building a foundation; that's done.

Once the portfolio is in a good spot.

Getting it online is actually pretty simple.

One prompt, Claude Code pushes everything to GitHub, then Vercel, import the repo, connect your domain and it's live in about five minutes.

Here's what I want you to walk away with.

Developers use AI to write code.

Designers, we use AI to explore and iterate on ideas faster.

That's the difference.

You're not coding, you're directing.

And the real skill was never about the tools.

It's more so about your design eye, your ability to look at something and determine whether it's good or not.

AI just makes it faster to go from what you see in your head to what you actually see on the screen.

Now, this whole workflow starts with you knowing what good actually looks like, knowing what hero layouts actually convert, and what recruiters are looking for in the first 10 seconds.

If you want to sharpen your design eye, check out this video where I break down five hero sections that recruiters can't ignore.