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 orderly, so good-looking.

The truth is Claude Code’s own design ability is already strong — 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 make a page, the thing that matters most is still the content — plan the content first, then figure out how it looks. What I share each episode is already the project’s memory, 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. Within a level, sizes stay rigorously consistent. 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 controlled and designed. 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. That kind of subtle shift is what reads as elegant, as 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

In each mode, the background layer, the dominant compositional approach, and the color handling are all specified. My day-to-day sharing leans light, because I personally prefer a light palette. But in a business setting, or when sharing on a big screen or projector, dark works better.

Responsive by default

My screen recording only captures half the screen, so adapting to different screen widths is a distinctive part of this design style — 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 single biggest factor is still the content. You plan the content first, then you do the visual presentation. And when I make these pages, the content already exists. What is it? Everything I share each episode is really 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 — please describe the thinking behind this visual system in a single web page. I know it includes a dark theme and a light theme, so please present this visual logic visually as a web page. Okay, now we wait for it to work. Let’s speed this up.

[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, its design ability is already strong. This is just adding 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 that it’s restrained. The palette it uses is small, built on grayscale, with very strict limits on hierarchy. Each level — a typical design might have six type sizes or more. I only gave it five type sizes, and every level is strictly consistent within itself.

[02:07] Then it uses a restrained glassmorphism, rounded-corner glassmorphism. And the density has room to breathe — spacing is controlled and designed. Beyond the dark mode there’s also a light mode. In my day-to-day sharing you probably see the light mode more often, because personally I lean toward the light 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 dominant composition approach, and the color handling are all defined. 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, and at the same time having proximity and similarity. Between one type size and the next there’s a 1.4x scaling ratio, so you can tell at a glance who’s the most important content and who’s the supporting note. Usually when you’re doing this kind of visual presentation, four levels is enough, unless you’ve got especially detailed content to present.

[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. Rigor also means saying what not to do — for example, piling on neon effects, or letting the hierarchy collapse, or huge swaths of empty space. And you can also see that when I share, I pull the screen —

[04:15] I pull the page width down to half the screen, because my screen recording only records half the screen. So adapting to different screen widths is another feature specific to this design style. Full screen, half screen, browsing on a phone — it adapts in 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, and anyone can download it. Today’s share is on the short side. See you next episode, bye-bye.