PPVI — 让 Claude Code 做出有审美的网页

评论区一直有人问，为什么用 Claude Code 做出来的网页那么规整、那么美观？

其实 Claude Code 自带的设计能力本身就已经很强，做出这样的网页一点都不难。拼拼做的事情，是在官方定义的基础上，加了一层自己的美学设计的理念，做了一套 skill。

内容先于视觉

在做一张网页之前，最主要的因素其实还是内容 — 先规划好它的内容，然后再去做视觉的呈现。每期分享的东西本身就是项目的记忆、项目的经验，内容这块是现成的。

让 Claude Code 用 PPVI 讲 PPVI 自己

打开 Claude Code，让它用 PPVI 这套视觉体系，做一张网页来描述这套视觉体系背后的逻辑思考，包括深色系和浅色系两套。

加速等它做完之后，效果是：暗色系底，有比较高级的渐变，第一句话是 — 「设计的本质不是加法，而是一种选择」。

PPVI 五条核心原则

第一，克制。里面用到的配色是少的，是以灰阶为基础的。

第二，严格的层级限制。通常的设计可能会有六级甚至更多字号，PPVI 只设定了五级。每级的字号严格做到级内一致。字号与字号之间保持一个 1.4 倍的放大比例，能够清晰地知道谁是最重要的内容、谁是辅助说明。通常做视觉呈现四级就足够了，除非有特别详细的内容需要呈现。

第三，克制的玻璃拟态。圆角的玻璃拟态 — 轻微半透明 + 模糊效果，会隐约看到背景的一些内容。不是堆砌霓虹效果或层级崩溃。

第四，密度有呼吸感。有间距的控制和设计，紧的地方紧，松的地方松。

第五，渐变也要克制。亮度或灰差非常克制，大概 2% 到 4% 的灰差，而不是一个明显的渐变。这样的微妙渐变更能显出一种优雅、一种高级的设计感。

五级字号系统

字号背后是典型的设计原则 — 既有反差，又有它的亲密性和相似性。1.4 倍的字号比例让层级清晰，配上字重的变化，不需要靠字号叠加来强调。

双模式：深色 + 浅色

每套模式里面，背景层、主导的构图方式以及色彩的处理，全部都是有定义的。日常分享当中浅色的模式比较多，因为个人偏好浅色配色。但在商务的场合，或者大屏投屏分享的时候，深色的模式会更好一些。

响应自适应

我的屏幕录制是只录制屏幕一半，所以网页在不同屏幕宽度的自适应也是这个设计风格独有的一个特点 — 全屏、半屏、手机浏览三种情况都能优雅过渡，不硬切。

已开源

这一套 PPVI 拼拼品牌视觉标准化美学的 skill，免费放到了个人博客上，大家都可以去下载。装到 ~/.claude/skills/ppvi，Claude Code 自动加载。

跟 Claude Code 官方的 frontend-design 互补：PPVI 管”怎么想”（审美决策），frontend-design 管”怎么写”（技术执行）。

今天的分享比较简短，我们下期再见，拜拜。

来源:EP0022_audio.mp3 · ASR 模型 gemini-2.5-pro(切段并发) · 4:48 原片完整文字版

[00:00] 嗨朋友们今天我们来分享一下 我是怎么样做出这些漂亮的 网页的呈现 那评论区一直有朋友在问我说 为什么我用 AI 做出来的网页 就是那么的美观那么的规整 但其实如果你是用的 Claude Code 的官方定义 那做出这样的 网页一点都不难 但是在官方定义的基础上呢 我又加入了我自己的一些 美学的设计的理念 做了一套 skill 那今天就给大家来分享这套 skill 那在做一张网页之前呢

[00:25] 就它最主要的一个因素还是 它的这个内容 就是先要规划好它的内容 然后再去做视觉的呈现 那我在做网页的时候呢 这些网页的 内容其实本身就是有的 它是什么呢 我每期分享的东西其实都是 我项目的记忆 项目的经验 所以那我现在就打开 Claude Code 来做一个最真实的一个演示 那我们就跟它说 我平时在做网页的时候 会使用到的 PPVI

[00:50] 的这样的一套视觉体系 那请帮我用一张网页 来去描述这套视觉体系 背后的逻辑思考 我知道它是 包括一个深色系和浅色系的 所以请把这套视觉逻辑 用一个网页进行视觉化的呈现 好那我们开始等它去进行 我们加速

[01:16] 好了已经做完了 我们来看一下这个效果 首先它是用了这个暗色系 有比较高级的这种的渐变 它说设计的本质不是 加法而是一种选择 那刚才我提到了就是如果你是 Claude Code 的官方定义的话它本身的 设计能力已经很强了 那这个只是在这个官方的 基础上去 加了一些我个人的一些偏好首先 会给这个 PPVI

[01:42] 叫这样的一套 这个视觉标准定了五个原则 第一个是, 它是比较克制的 它里面的用到的这些配色是少的 是以灰阶为基础的 非常严格的层级的一个限制 就是每一级 通常的设计里面可能会有六级 或者是更多的这种字号 那我只给它设定了五级的字号 那每级的字号 都是严格的级内一致的

[02:07] 然后会用到一个比较克制的 玻璃拟态 圆角的玻璃拟态 然后它的这个密度 是有呼吸感的 它是有间距的控制和设计的 那除了这个深色的模式之外 还会有一个浅色的模式 就是在我的日常的分享当中 大家可能看到浅色的 模式比较多 因为我个人是比较偏好 这个浅色的配色的 但在一些这个商务的场合

[02:32] 或者是说在一些大屏上 投屏分享的时候 可能深色的模式是会更好一些的 就它的每一套模式里面 它的背景层 它的主导的这样的一个 构图的这个方式 以及它的一些色彩的处理 全部都是有这种定义的 但整体的这个风格就是 克制的这种严谨的美学 有呼吸感的美学 那五级的字号系统 大家可以看到是说 就是典型的设计原则里面的

[02:57] 这种的既有反差 然后又有它的这个 亲密性和相似性 它的字号与字号之间 是保持了一个 1.4 倍的 一个放大的这样的比例 然后能够清晰地知道 谁是最重要的内容 那谁是这个辅助的一个说明 那通常我们在做 这种视觉呈现的时候 可能四级就足够了除非是 有特别这个详细的 内容需要呈现

[03:24] 然后在做渐变的时候 它的这个亮度或者是它的灰差 是非常的克制的一个细节的变化 就是它是大概 2% 到 4% 的一个灰差 而不是一个明显的渐变 那这样的一个微妙的渐变呢 就更能显出它的一种优雅 或者是一种高级的设计感 那在这个玻璃拟态方面 刚才我也提到它是 一个克制的玻璃拟态啊

[03:49] 就是会有轻微的半透明 然后会有模糊的效果 会隐约的看到背景的 一些内容啊 包括严谨它说就是 有哪些不去做 就比如说这种堆砌的这种的 霓虹的效果 或者是层级的崩溃 或者是大面积区域的 这种的留白 然后包括大家可以看到是说 我的经常分享的 时候我会把这个屏幕

[04:15] 把这个网页的 宽度拉到屏幕的一半 因为我的这个屏幕的录制 是只录制屏幕一半 所以在不同屏幕宽度的自适应 也是这个设计风格独有的 一个特点 就是它在全屏的时候 它在半屏的时候 它在手机上浏览的时候 都能够自适应的这样的 一个方式去做 那这样的一套 PPVI 的一套 拼拼的品牌视觉标准化美学的 这个 skill 呢

[04:40] 我就给大家免费的放到了 我的个人博客上大家都 可以去下载 我们今天的分享就是 比较的简短 我们下期再见拜拜