Hallmark study 的 image 模式 vs URL 模式：为什么 URL 读不到 rhythm-港品优选

Hallmark study 的 image 模式 vs URL 模式：为什么 URL 读不到 rhythm

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

Hallmark是一个反"AI 味"的设计技能（design skill），它的study命令能从一张设计截图或一个网址中提取"设计 DNA"——宏观结构、组件原型、字体搭配、色彩锚点与节奏（rhythm），并给出一份诊断报告。study支持两种输入模式：贴一张截图走image 模式，贴一个网址走URL 模式（自动检测：输入以http://或https://开头即为 URL 模式）。两种模式共享同一套诊断输出，但能"看清"的东西并不相同——最典型的一个差异就是：URL 模式读不到 rhythm。

先看一张 study 的实际工作成果

下面这张图来自 Hallmark 的官方示例：一个典型的 SaaS 落地页（左侧大字标语 + 右侧产品截图 + 底部 Logo 墙）。如果你把这张截图喂给hallmark study，它会告诉你这是哪种宏观结构（macrostructure）、Hero 用了哪种原型（H 编号）、字体角色搭配、以及色彩锚点的占比——而这些判断里，就有对"密度"和"节奏"的评估：

完整的工作流程记录见 docs/study-examples.md。

两种模式的能力对照表

study的协议把"读图/读页"拆成了五步：Surface（色彩）、Type（字体角色）、Structure（结构）、Motion（动效）、Rhythm（节奏）。两种模式在这五步上的表现差异如下（摘自 skills/hallmark/references/study.md 的 § Source mode）：

步骤	📸 Image 模式	🔗 URL 模式
Surface 色彩	凭视觉估算色带与占比	直接从 CSS 变量读取精确OKLCH / hex 值
Type 字体	只判断角色（如"斜体编辑感衬线"），不报具体字体名	角色+ 精确字体名（来自`@font-face`、Google Fonts 链接等声明）
Structure 结构	从可见区域推断	直接读真实 DOM（`<nav>`、`<section>`、语义标签）
Motion 动效	静态截图通常"看不见"，按默认揭示假设处理	可观察：从`<script src>`识别 gsap / framer-motion / lenis 等库
Rhythm 节奏	直接可见（密度、留白、不对称都是视觉整体印象）	不可观察——HTML 无法告诉你密度/不对称/节奏感，只能标注为盲区

一句话总结：URL 模式用"节奏"这一项，换来了其余四项的精确化。

为什么 rhythm 偏偏读不到？

Rhythm 是五步里最难的一步。它要看的是密度与节奏感，具体包括四个判断轴（详见 skills/hallmark/references/study.md § Step 5 — Rhythm）：

Section padding 节奏：各区块间距是均一的（模板感）还是有意变化的？
标题与正文的比例：短标题长正文（编辑感）还是长标题短正文（宣言感）？
留白纪律：奢侈感的大留白、中等留白，还是报纸式的高密度？
不对称性：居中对称、左偏、还是非对称网格？

关键在于：HTML 能告诉你某个区块声明了padding: 8rem 0，但它不能告诉你这个 8rem 放在旁边区块旁边时，视觉上是"呼吸感"还是"模板感"——这是一种整体感知（gestalt）判断，只有"眼睛"才能完成。

所以 URL 模式的协议明确规定：把 CSS 里字面声明的 padding、gap、grid 比例作为原始事实记录，但四个节奏轴一律在 schema 中标记为unknown (URL mode)，并在诊断报告里主动声明这个盲区：

"我是从页面的 HTML 读的，不是从截图读的——我能说出宏观结构、字体、色彩和动效，但判断不了节奏是'大气的'还是'模板化的'。如果这对你重要，请再发一张截图。"

一张"能看清节奏"的参考页

下面这张 Hallmark 示例页面（Tally）正好展示了 rhythm 判断的落点：左侧超大标语、右侧浮动的小卡片、页面下方一行缓慢滚动的 marquee 文字，以及刻意留出的大片"空白呼吸区"。这种疏密对比与不对称布局，就是 image 模式下 vision pass 能直接读出、而 URL 模式只能看到 padding 数值的部分：

新手选型指南：什么时候用哪种模式

用 URL 模式，当……

你想要精确值：页面到底用的什么字体、背景色精确到什么 hex / OKLCH；
页面是服务端渲染的普通网页，你想省掉截图这一步；
你想顺带识别动效库（gsap、framer-motion 等）和 CSS 反模式（transition: all、hover 放大）。

用 image 模式，当……

rhythm 对你很重要（这是协议里的原话建议："If rhythm is what the user wants extracted, they should attach a screenshot"）；
页面是登录墙后的、客户端渲染的 SPA（URL 模式会检测到只拿到 JS 空壳，主动回退请你贴图）；
你想让诊断报告一次性覆盖全部五个维度。

两条实用提醒📌

一次一个来源：不要贴五张图或五个 URL 让它"混合"，DNA 主干只从一个来源来。
若 URL 模式读完后你发现节奏正是你最想提取的部分，可以补发一张截图——这是协议明确支持的补救路径（"one screenshot, one diagnosis"规则下，Hallmark 默认一次只处理一个来源，但节奏盲区会引导你补图）。

企业官网建设流程全解析