Hallmark study 的 image 模式 vs URL 模式为什么 URL 读不到 rhythm【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark是一个反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 结构从可见区域推断直接读真实 DOMnav、section、语义标签Motion 动效静态截图通常看不见按默认揭示假设处理可观察从script src识别 gsap / framer-motion / lenis 等库Rhythm 节奏直接可见密度、留白、不对称都是视觉整体印象不可观察——HTML 无法告诉你密度/不对称/节奏感只能标注为盲区一句话总结URL 模式用节奏这一项换来了其余四项的精确化。为什么 rhythm 偏偏读不到Rhythm 是五步里最难的一步。它要看的是密度与节奏感具体包括四个判断轴详见 skills/hallmark/references/study.md § Step 5 — RhythmSection 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页面是登录墙后的、客户端渲染的 SPAURL 模式会检测到只拿到 JS 空壳主动回退请你贴图你想让诊断报告一次性覆盖全部五个维度。两条实用提醒一次一个来源不要贴五张图或五个 URL 让它混合DNA 主干只从一个来源来。若 URL 模式读完后你发现节奏正是你最想提取的部分可以补发一张截图——这是协议明确支持的补救路径one screenshot, one diagnosis规则下Hallmark 默认一次只处理一个来源但节奏盲区会引导你补图。延伸阅读完整协议skills/hallmark/references/study.md——模式检测、五步协议、schema、URL 安全规则与垃圾/被拦截检测三个完整案例docs/study-examples.md实际测试过程记录site/_tests/verbs/study/含 diagnosis.md 与 notes.md21 种宏观结构定义skills/hallmark/references/macrostructures.md理解了这个盲区你就知道为什么 Hallmark 的study从不假装 URL 模式全知——它宁可把 rhythm 标成unknown并告诉你补图也不会在诊断里编造一个节奏结论。这种诚实恰恰是它区别于普通截图克隆工具的地方。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考