I've been thinking about how to design web pages that don't look like AI slop.
A month ago, I told Harper I wanted to make a personal website. He challenged me to skip the website builders and only use Claude Code.
Since then, I've used Claude Code to build a few landing pages at 2389 and I've developed a workflow that's worked for me. I'm documenting it here in case it's helpful for others.
First, I tried Lovable
I started with Lovable to get a baseline for what AI website creation looks like right now.
It's fine. But when you ask it to build a site without giving it much to go on, the output is pretty generic. Lots of purples. Very "AI made this."
Where Lovable is better is if you ask it to clone an existing website. It does a solid job of that (but Claude can do that too pretty accurately).
You can pull the HTML from Lovable's output and bring it into Claude Code as a starting point, which is actually pretty useful.
Getting to Draft 1
Since I was challenged to build without Lovable, I went back to Claude Code.
I landed on three different approaches for how to get Claude to produce really good designs as starting points. Which approach you start off with depends on how much you already know about what you want.
Approach 1: The /frontend-design skill
The first thing I did post-Lovable was to figure out how to equip Claude with design skills.
I went down a rabbit hole of scraping Figma education sources, browsing design inspiration sites.
As it turns out, Anthropic has a /frontend-design skill for Claude Code, and it's actually pretty good.
I use this skill when I just need to ship (and edit, but more on that later).
You don't need to give it much context. It makes smart choices about color and typography and layout on its own, and I was pleasantly surprised by the motion and interactive elements it threw in.
I tested it on a translation tool we were building at 2389. I started with a basic design I'd pulled from Lovable's HTML, then asked Claude to redesign it using the skill.
Before:
After (iteration 1):
After (iteration 2):
For fun, I even tested it on some bad websites to see how far it could take them.
Before:
After:
Approach 2: Build a Pinterest board
If you already have inspiration for the website you're looking to build, you can collect and share source material for Claude to reference.
This is what I did for my portfolio site.
I basically built a Pinterest board where I screenshotted elements I liked from other sites, like the pill box you see at the top of this website.
Pro tip, if you like a font on a site, you can find the name by inspecting the page.
Then I put all of that in a folder and told Claude to reference it. I explained why I liked each element and gave detailed instructions for how Claude should interpret the material. Should Claude copy the material directly or take inspiration from it?
You can also layer Anthropic's /frontend-design skill on top of this. I used the Pinterest board to set the direction, then used the skill to tweak small details.
This takes a lot of time. It's a whole design process. But the result is something that feels more like yours.
Approach 3: The 2389 landing page skill
Sometimes I don't know exactly the aesthetic I'm going for, and I also don't have time for a full Pinterest board.
And I'm still interested in honing my perspective with Claude before building (this is one thing that the frontend-design skill skips).
Harper built a skill that interviews you first. About what you're hoping to achieve, the emotions you want to invoke, the aesthetic influences -- and most importantly, what you specifically don't want.
Editing
Getting to Draft 1 is the fun part. Making it actually good is where I've spent most of my time.
The padding problem
Padding and spacing is where I've fought Claude the most.
On my portfolio site I went back and forth on the mobile nav pill padding, the about page photo layout, the contact page header.
I've started to wonder if the problem is that I don't have the design language. Like, Claude probably responds better to "increase the padding-inline-start to 2rem" than "increase the padding to the left of the hero section."
Here are some quick tips / tricks that I've found to be really helpful for getting a site done.
- Have AI personas review your site. My colleague Dylan built a deliberation skill that creates different perspectives and has them review whatever you're working on. I simulated review from a UX expert, an AI researcher, and a PM to give me feedback.
- Screenshot your site and paste it back. I recommend uploading screenshots to Claude alongside a description of what you hope to see. Way easier than trying to describe a visual problem in words.
- Dictate your feedback. I really enjoy giving detailed design feedback, which I find too much to type out. I use Handy to ramble at Claude. I use voice for two things. Spraying out rapid-fire directions before I forget them — "do x y z" — and talking through design decisions I'm still figuring out. Like, "make the background more ombré, have it start at the top right… actually the left to the right." Claude is pretty good at ignoring the previous direction. It's like a design partner who listens through your indecision.
- Omakase it. Sometimes I just want to see options. We built an omakase skill that has Claude build a few different versions from the same prompt. I've used it when I want to see different options of how features could look.
Where I've landed
I'm still figuring a lot of this out.
My design vocabulary is limited and I don't always know the right way to tell Claude what I'm seeing in my head. But the whole process has gotten faster the more I've done it, and I'm having fun with it.
My recommendation would be to play around with these tools and find your own workflow.
This was written as of Nov 2025. Excited for things to change.