PPVI—Getting Claude Code to Build Web Pages with Real Taste

People keep asking in the comments why the web pages I build with Claude Code come out so clean and so good-looking.

Claude Code’s own design sense is good enough that pages like these aren’t hard at all. What I did was start from the official baseline and add a layer of my own design philosophy on top, packaged as a skill.

Content before visuals

Before you build a page, content still matters most. Plan what it says, then design how it looks. What I share each episode is already the project’s memory and the project’s experience, so the content is sitting right there.

Letting Claude Code explain PPVI in PPVI

I opened Claude Code and asked it to use the PPVI visual system to build a page describing the reasoning behind that very visual system—in both dark and light versions.

Fast-forward past the build, and here’s the result: a dark background, a tasteful gradient, and the first line reading—“Design isn’t addition. It’s choice.”

The five core PPVI principles

One, restraint. The palette is small, and it’s built on grayscale.

Two, a strict hierarchy limit. Typical designs might run six type sizes or more; PPVI sets exactly five. Sizes stay strictly consistent within a level. Between levels there’s a 1.4x step, so you can tell at a glance which content matters most and which is supporting detail. Four levels are usually enough for a visual presentation, unless you have unusually detailed material to show.

Three, restrained glassmorphism. Rounded glass panels—slight transparency plus blur, so you faintly see what’s behind. Not a pile of neon effects, not a collapsed hierarchy.

Four, density that breathes. Spacing is deliberate, never accidental. Tight where it should be tight, loose where it should be loose.

Five, restrained gradients too. The shift in brightness or gray value stays minimal—roughly 2% to 4%—instead of an obvious ramp. A shift that subtle is what reads as elegant and considered.

The five-level type scale

Behind the type sizes sits a classic design principle: contrast on one hand, proximity and similarity on the other. The 1.4x ratio makes the hierarchy legible, and paired with weight changes, you never need to stack up sizes to create emphasis.

Two modes: dark + light

Each mode specifies its own background layer, its dominant composition, and how color gets handled. My day-to-day sharing leans light, because I prefer a light palette. But in a business setting, or when sharing on a big screen or projector, dark works better.

Responsive by default

I only record half my screen, so adapting to different screen widths is one of the things that sets this style apart—full screen, half screen, and phone all transition gracefully instead of snapping.

Open-sourced

This PPVI skill—PinPin Visual Identity—is up on my personal blog for free, and anyone can download it. Install it at ~/.claude/skills/ppvi and Claude Code loads it automatically.

It complements Claude Code’s official frontend-design skill: PPVI handles “how to think” (aesthetic decisions), frontend-design handles “how to write” (technical execution).

Short one today. See you next episode, bye.

Source: EP0022_audio.mp3 · ASR model gemini-2.5-pro (chunked parallel) · full text of the 4:48 original recording

[00:00] Hey friends, today let’s talk about how I make these good-looking web pages. People in the comments keep asking me why the pages I build with AI come out so pretty, so tidy. Honestly, if you’re using Claude Code’s own built-in defaults, making a page like this isn’t hard at all. But on top of those defaults I’ve added some of my own design ideas about aesthetics, and packaged them into a skill. So today I’m going to share that skill with you. Now, before you build a page—

[00:25] the biggest thing by far is still the content. You get the content sorted out first, then you worry about how it looks. And when I make these pages, the content is already there. What is it? The stuff I go through every episode is really just my project memory, my project experience. So let me open up Claude Code right now and do a real live demo. We just tell it: the PPVI—

[00:50] the visual system I normally use when I make web pages—build me a single web page that walks through the thinking behind it. I know it has a dark theme and a light theme, so show me that whole visual logic, visually, as a web page. OK, so now we just let it run. Let’s fast-forward.

[01:16] All right, it’s done. Let’s look at the result. First off, it went with the dark theme, with a fairly refined gradient. It says the essence of design isn’t addition, it’s selection. Like I said earlier, if you’re on Claude Code’s own defaults, it’s already really good at design on its own. This just adds a few of my personal preferences on top of that. First, for PPVI—

[01:42] this visual standard—I set five principles. The first one is, it’s restrained. It uses a small palette, built on grayscale, with really strict limits on hierarchy. Each level—a typical design might have six type sizes, maybe more. I only gave it five type sizes, and each size stays strictly consistent at its own level.

[02:07] Then it uses a restrained glassmorphism, rounded-corner glassmorphism. And the density has room to breathe—the spacing is deliberate, it’s actually designed. On top of the dark mode there’s also a light mode. In my everyday videos you probably see the light mode more, because personally I lean toward the lighter palette. But in some business settings,

[02:32] or when you’re casting to a big screen, dark mode might be the better call. Within each mode, the background layer, the way the composition is laid out, how color gets handled—all of that is spelled out. But the overall style is that restrained, rigorous aesthetic, an aesthetic that breathes. As for the five-level type scale, you can see it’s the classic design principle of—

[02:57] having contrast, but also having proximity and similarity. From one type size to the next there’s a 1.4x step up, so you can tell at a glance which is the most important content and which is the supporting note. Usually when you’re putting something like this together, four levels is plenty, unless you’ve got especially detailed content to get across.

[03:24] Then when it does gradients, the brightness or the gray delta is an extremely restrained, subtle shift—roughly a 2% to 4% gray delta, not an obvious gradient. And that kind of subtle gradient is what brings out the elegance, or that high-end design feel. On the glassmorphism side, like I mentioned, it’s a restrained glassmorphism.

[03:49] So slight translucency, plus a blur effect, and you faintly see some of the background through it. Part of being rigorous is also saying what not to do—like piling on neon effects, or letting the hierarchy collapse, or huge swaths of empty space. And you can also see that when I’m recording these, I pull the screen—

[04:15] I pull the page width down to half the screen, because my screen recording only captures half the screen. So adapting to different screen widths is another thing that’s specific to this design style. Full screen, half screen, looking at it on a phone—it adapts to all of them. So this PPVI skill, Pinpin’s standardized brand visual aesthetic—

[04:40] I’ve put it up on my personal blog for free, so anybody can go download it. Today’s one is a short one. See you next episode, bye-bye.