摘要：本文介绍「网页灵感风格模板库」这一工具，它把「收藏网页」升级为「提炼视觉 DNA」：通过解析 HTML/CSS 得到数值化的配色、字体、排版节奏与效果信号，产出可搜索、可 diff、可复现的 JSON 档案。文章从收藏痛点切入，说明工具如何将风格与骨架解耦，提供极简、杂志、科技赛博、复古四套风格模板，并内置基于 Refactoring UI、WCAG 等标准的设计体检。同时给出三步使用流程、适用人群、优点与局限，并展望骨架扩展、Playwright 接入等未来方向。核心观点是：收藏是本能，把「好看」翻译成可理解、可检索、可复用的参数，才是把审美变成资产的能力。
你收藏夹里的 200 个「好看」网页，真正回看过的不到 5%
我们都做过同一件事：刷到一个配色舒服、排版舒服、整体「很高级」的网页，顺手点了收藏，心里想「以后参考」。然后它就在书签里吃灰。
问题不在你懒。问题在于——「收藏一个网页」和「拥有它的设计能力」之间，差着一条无法跨越的鸿沟。你存下来的只是一串链接，而真正想要的是它为什么好看的那套规律。
你不是没有审美，你只是缺一个把审美变成资产的工具。
一张图看懂：从「收藏=囤积」到「拆出视觉 DNA、重组进模板体系」。
一、先说痛点：我们到底卡在哪
痛点 1 · 收藏 = 囤积 书签越攒越多，真正再打开的不到 5%。收藏变成了「数字仓鼠」行为，不是知识管理。
痛点 2 · 想模仿却无从下手 你截图存了一张图，但截不走它的参数：主色到底是 #667eea 还是 #7c6cf0？正文字号是 16 还是 17？行高 1.6 还是 1.75？留白节奏是多少 px？这些才是能复用的东西，截图给不了。
痛点 3 · 风格说不清 跟设计师 / 同事说「就那种很舒服的感觉」，对方做出来的跟你脑子里想的完全是两回事。无法量化就无法复用，无法复用就只能每次从零开始。
痛点 4 · 资产散落、不可检索 收藏夹、截图文件夹、微信转存、备忘录里零散写的「某站配色不错」——风格资产散在四个地方，想用的时候一个都翻不出来。
本质上：我们缺的不是「存」的能力，而是把「好看」翻译成「可理解、可检索、可复用」参数的能力。这正是「网页灵感风格模板库」想解决的事。
二、它是什么：一句话定位
网页收藏的终局不是存链接，是拆出风格和内容、重组进自己的模板体系。 这和「财报先拆出结构、再套进披露模板」是同一件事——先结构化理解，再标准化复用。它不是截图工具、不是离线快照，而是在 SingleFile / Readability / ArchiveBox 这些「保存层」之上，专门做「风格提炼与重组」的那一层。
三、它到底做了什么：把网页拆成「视觉 DNA」
核心立场只有一条：是结构化理解，不是截图。全流程解析 HTML/CSS，得到数值化的设计参数，产出可搜索、可 diff、可复现的 JSON。不截图、不 OCR。
一张网页被拆成这几层「DNA」：
①配色
不是简单取色，而是按「属性权重 × 角色权重 × 频次」打分，区分主色 / 强调色 / 文本色 / 背景色，并标记语义角色。
②字体栈
记录标题与正文的真实字体族系、字号阶梯、字重档位。品牌自定义字体诚实标注「族系未知」，绝不从兜底链硬猜。
③排版节奏
基准间距、最大圆角、正文栏宽（按字符数估），把「留白感」量化成可复制的数字。
④效果信号
渐变 / 阴影 / 发光 / 模糊的有无与方向，加上正文结构、金句、关键数字、卡片原子，构成完整视觉档案。
更进一步，它做了一件很多人没做的事：风格与骨架解耦。
| 风格 | 视觉 token + 该风格独有的排版手法 | 极简 / 杂志 / 科技赛博 / 复古 Vintage |
| 骨架 | 信息结构 | 灵感卡 / 月度一页纸 / 项目展示页 |
| 组合 | 两者正交，N×M 自由搭配 | 同一套科技风，既能套灵感卡也能套复盘页 |
这意味着：加一个骨架不用动风格模板，加一套风格也不会破坏已有骨架。可扩展性从架构层面就设计好了。
四套风格模板，各有「风格身份证」
关键认知：风格区隔不能只靠换色。换色谁都会，难的是排版手法。所以四套模板靠的是各自独有的「排版动作」：
| 极简风 | 发丝线 / 大留白 / 三档字重 / 强调色极省 | 科技爱好者周刊 |
| 杂志风 | 双宽度版心 / 66ch 正文栏 / 首字下沉 / 卡片矩阵 | RAND、Steph Ango |
| 科技赛博风 | 细网格底纹 / 霓虹发光线（零偏移带色阴影） / 等宽终端标签 | Tailwind、Stripe |
| 复古 Vintage 风 | 纸感底 / 双线分隔 / 菱形装饰（纯 CSS）/ 旧式数字 | Space Jam 1996 |
诚实取舍 赛博风天然想用暗底，但交付物要求「浅底深字」的可读性红线。所以模板的解法是：赛博感不靠暗底，靠纹理 + 单色霓虹 + 终端排版。这是刻意的默认值，不是没做。真要暗色版，改三行 CSS 即可。
还顺手做了「设计体检」
它把《Refactoring UI》《The Elements of Typographic Style》与 WCAG 的判据，转成可计算的检查项：行宽（45–75 字符，66 为理想）、行高（按角色取值）、字号 / 间距阶梯相邻差（≥25%）、字重档位、对比度、灰阶色温、品牌色有效性、阴影方向、边框用量。
每张卡都带 A–D 等级与逐条结论。更重要的是三条守住的诚实边界：判据读的是 CSS 声明而非页面实际使用；宁可说不知道，也不给假数字；异常值先查来源再改判据。这套「方法论有据、结论可溯源」的做法，是这个技能核心价值所在。
四、使用场景：谁会真用到它
设计师
攒了一批好看网页，不再是截图堆，而是提炼成可检索的「配色 / 字体 / 节奏」灵感库，按风格分区，一键复看。
内容创作者
给文章 / 周报做统一风格归档。收藏的参考站不再是散落书签，而是拆成参数后重组进自己的排版体系。
产品经理
做竞品视觉拆解：把对标产品的网页丢进去，输出结构化视觉档案，比写「对方设计不错」有说服力得多。
知识管理者
把「好看」变成「可检索的风格资产」，按风格名检索，告别翻截图。
它甚至能延伸到你的主业场景：月度复盘一页纸、项目展示页、数据看板——这些「骨架」已在新版规划里预留了接口，配合任意一套风格模板即可生成。
五、使用说明：三步跑通
推荐的标准流程，从一份 SingleFile 存档（或任意 URL）开始：
整套依赖只有 Python 的 requests / beautifulsoup4 / lxml / jinja2，不需要无头浏览器。字段按 computed style 语义命名，将来接 Playwright 只需替换数据源，下游模板零改动。
六、优点在哪：为什么值得用
| 结构化 | 可读、可搜索、可 diff、可复现——JSON 是机器与人都能消费的资产，不是一张图。 |
| 诚实 | 不粉饰、不假数字、风格边界模糊时宁标「未定风」也不硬贴标签。 |
| 方法论扎实 | 设计判据全部标注出处（Refactoring UI / Bringhurst / WCAG），不是拍脑袋的审美。 |
| 离线可看 | 汇总库是单文件、零外部请求，丢进任何浏览器都能长期打开。 |
| 风格身份证 | 区隔靠排版手法而非换色，四套模板互不串味（8 站分类回归零串味）。 |
| 可扩展 | 风格 × 骨架正交解耦，加风格不动骨架，加骨架不动风格。 |
七、局限性：有哪些它现在做不到
诚实比完美重要，所以照实说
- CSS 变量 ≠ 实际用色：整站色板定义了 40 色，页面可能只用了 5 个。已按「是否被 var() 真实引用」过滤，但复杂站点仍可能残留噪声色，色板规模应视为量级参考。
- 远程字体只记录字体栈，不内嵌字体文件：卡片上的字体样例走系统回退。真正的字体保真请用 SingleFile 留档（字体已内联为 data:font）。
- 风格边界模糊的站点得接近分值：奶油底极简站 vs 复古站可能得分接近。卡片会同时列出 4 项分值，分值分布才是信息，不要只看冠军标签。
- JS 渲染的关键样式暂拿不到：computed style 暂时依赖静态 CSS，这是未来接入 Playwright 的核心动机。
- 图片 / 封面暂不作为卡片视觉主体：目前用配色块表达，需要图文主体时要等 –download-images。
八、未来展望：它还会长成什么样
- 骨架扩展：月度复盘一页纸、项目展示页、数据看板——各风格模板已预留 paired_skeletons 字段，下一步直接落地。
- Playwright 接入：补齐 computed style 的最后一块拼图，JS 渲染页也能拿到真实样式。
- 图片主体化：–download-images 让封面 / 截图成为卡片视觉主体，信息密度再上一个台阶。
- 开放平台发布：把三级目录拍平为单文件即可上架，让更多人能直接用上这套方法论。
结语：收藏是本能，提炼是能力
每个人都天然会收藏。但把「好看」翻译成「可理解、可检索、可复用」的参数，是一种可以被工具放大、被方法固化的能力。这个技能不替你审美，它替你把审美变成资产——下一次你想复用一个喜欢的风格，不必再翻书签、再凭感觉、再从头做一遍。
拆得出 DNA，才存得下灵感。
