
Hallmark Manifesto 宏观结构详解用「宣言式大字号」打造观点先行的落地页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文详解 hallmark 技能库中的07 · Manifesto 宏观结构macrostructure——一种以「宣言能量」与「论战式大字排版」为核心、先输出观点再谈产品的落地页形态。你将掌握它的六条结构轴标题、正文、分隔、按钮、图像、入场动效、适用与避雷场景、可复制的 HTML 骨架与 OKLCH 令牌体系并看到它在 Meridian 工作室宣言页实战中的完整落地路径。读完即可在品牌重塑公告、使命驱动的独立产品、设计工作室信念页中直接复用这套结构。一、什么是 Manifesto 宏观结构Manifesto宣言是 hallmark 的 21 种命名宏观结构之一索引见 skills/hallmark/references/macrostructures.md。它的核心定义只有一句话Polemical large type. Declaration energy. The page tells the reader what to believe before it tells them what to buy.即论战式大字号 宣言能量。页面在告诉读者买什么之前先告诉读者该相信什么。它的视觉气质通常接近政治海报political-poster aesthetic大字排印、旗帜鲜明的立场、几乎没有装饰性修饰。这在设计语言上是一种典型的观点优先belief-first页面。它不推销产品功能它推销共识——先把读者拉进你的立场再让产品成为立场的自然结果。二、六条结构轴Manifesto 的完整指纹与 hallmark 其他宏观结构一样Manifesto 不是一个零散的口味清单而是六条结构轴打包成的一个完整指纹见 skills/hallmark/references/macrostructures.md 对宏观结构complete fingerprint的定义。以下是 skills/hallmark/references/macrostructures/07-manifesto.md 给出的六条规范结构轴规范关键点标题 Heading全大写展示体轻微倾斜-2°到-4°或在动词上用堆叠的色块高亮倾斜营造宣言在喊话的动势色块高亮落在动词上而非名词强调主张正文 Body短段落每段只承载一个断言字号大到隔着房间都能读清一段一断言拒绝堆砌分隔 Divider区块之间用出血色块bleed-colour blocks过渡不使用发丝线分隔本身就是观点不是装饰按钮 Button超大实心色块强调色放在远低于首屏的位置先让人认同再让人行动图像 Image无图或单张高对比度黑白照片用作某区块的出血背景图片是最低优先级入场动效 Reveal区块进入时做水平扫入horizontal sweep唯一被允许的动效语言2.1 为什么按钮必须远低于首屏这是 Manifesto 与普通营销页最反直觉的一点。常规 SaaS 页会把 CTA 放在首屏争夺点击Manifesto 恰恰相反——超大实心按钮被刻意压到页面深处。因为宣言页的工作不是转化而是说服。读者只有在读完你的立场、产生认同之后按钮才有意义。Manifesto 卖的是认同不是行动——这正是它与交易型页面transactional pages的本质区别。2.2 图像克制无图是默认态六个轴里图像的权重最低none, or a single high-contrast BW photograph used as a section bleed。这与 hallmark 的 hero 增强决策完全一致——SKILL.md 明确写着 a manifesto wants nothing宣言页不需要任何视觉增强。宣言页的声音本身就是设计任何附加视觉都会稀释论点。三、适用场景与避雷边界原文档给出的判断标准非常清晰Reach for it适用品牌重塑公告brand repositioning announcements、使命驱动的独立产品mission-led indie products、设计工作室信念页design-studio beliefs pages。Avoid for避雷交易型页面transactional pages。Manifesto sellsagreement, not action——如果页面的核心目标是让用户完成注册、下单等即时动作Manifesto 是错误选择。在 hallmark 的参考体系中这一判断还被写进了宏观结构挑选逻辑当 brief 真正模糊无主题、无调性时模型应从前 10 个宏观结构中挑选而非随意落入某一种Manifesto 作为海报主导型poster-led结构通常与网格主导型Bento、文档主导型Long Document一起作为分类上截然不同的三个候选提供给用户见 SKILL.md。四、开篇句的写作纪律具体而不含糊Manifesto 的文案质量由**具体性specificity**决定。原文档提供了三条示范开篇并附带了明确的仿写纪律——manifestos commit, they dont hedge宣言做出承诺不做保留WE ARE A STUDIO. WE ARE NOT A PLATFORM.—— 通过否定来定义全大写只保留一个强调词We design products that last twelve years. We do not design products that need replacing every two.—— 具体数字 成对宣言Lightness above weightiness, elevate everyone you encounter.—— 一行原则无需解释这三条示范的共同点是没有模糊修饰语。第一句用是……不是……的结构直接划界第二句把耐用落成十二年这个具体数字第三句干脆一句话走完不做任何展开。仿写宣言文案时应模仿这种承诺而非摇摆的姿态——含糊的宣言不是宣言是套话。五、可复制的骨架代码原文档给出了 Manifesto 的最小 HTML 骨架核心是两个衔接的区块宣言标题区 出血色块正文区。下面是原文代码及其结构拆解section classmanifesto bleed-ink h1 classcaps display-xxlWE BELIEVE em classblock-accentDESIGN/em IS SLOW./h1 /section section classbleed-paper p classclaimIt costs less than the rework youll do without it./p /section要点拆解.bleed-ink/.bleed-paper两个出血语义类。第一个区块用墨色ink满铺第二个区块用纸色paper满铺区块之间没有任何发丝线分隔——色块本身就是分隔对应第 2.2 节的 Divider 轴。em classblock-accent在动词/关键词上用堆叠色块高亮。em承载语义重音block-accent把它渲染为强调色色块。这是标题轴里stacked colour-block highlights on the verb的具体实现。.caps display-xxl全大写 超大展示字号。display-xxl对应主题令牌中的--text-display见下文第六节。.claim正文短断言。每段一个断言字号大到隔着房间可读。这段骨架可以直接套用到任何宣言页标题区负责表态紧接的色块区负责给出断言之后可以用更多色块区串联更多断言。注意骨架里没有按钮、没有图片、没有副标题——这些在宣言页里都是可选项且默认不出现。六、仓库中的 Manifesto 主题令牌级实现在 site/css/tokens.css 中Manifesto 以[data-thememanifesto]的形式成为 hallmark 22 个命名主题之一注释原文是MANIFESTO — BLACK paper · ALL CAPS condensed · red colour-blocks— The opposite pole from Brutal: same red accent, inverted background.这个主题的令牌实现完整支撑了宏观结构的六条轴[data-thememanifesto] { --color-paper: oklch(10% 0.005 60); /* 近黑纸色 */ --color-paper-2: oklch(15% 0.006 60); --color-ink: oklch(98% 0.003 90); /* 近乎白的墨色 */ --color-accent: #E51A1A; /* 纯红强调色块 */ --color-accent-ink: oklch(58% 0.24 28); --font-display: Anton, Bebas Neue, Albert Sans, sans-serif; --font-body: Public Sans, Albert Sans, Hanken Grotesk, ui-sans-serif, sans-serif; --font-label: JetBrains Mono, ui-monospace, monospace; --display-weight: 400; --display-optical: 96; --display-style: normal; --text-display: clamp(4.0rem, 8vw 1.0rem, 9rem); --text-display-s: clamp(2.75rem, 6vw 1rem, 5.5rem); --tracking-display: 0.005em; --lh-tight: 0.86; /* 全大写展示行高低于 1.0 */ --rule-fine: 3px; /* 更粗的规则线 */ --measure: 56ch; }几个值得注意的实现决策黑纸 红块--color-paper是oklch(10%)的近黑强调色是#E51A1A的纯红。这与 Brutal 主题同为红色强调色但浅纸形成极性相反的配对详见 site/css/tokens.css 中brutalist themes get heavier borders (Brutal, Manifesto)的注释。Anton 全大写展示体--font-display以 Anton 为首选配合--lh-tight: 0.86行高 0.86低于 1.0。site/css/tokens.css 专门注释了这一点Manifesto 用全大写 Anton 做展示标题时行高必须 1.0 才能压紧字母间距同时该文件又在第 637 行提醒全大写标题换行时行高需有 1.02 的下限避免文字叠压——这是压紧与可读之间的精确平衡。颜色全部走令牌这是 hallmark 的强制纪律见 SKILL.md Locked tokens — no mid-render improvisation——任何色彩与字体声明必须引用具名令牌禁止内联 OKLCH 值。页面 CSS 引用var(--color-accent)、var(--font-display)不允许绕过令牌块。配合第五节的骨架渲染层可以这样接入主题令牌section classmanifesto>.manifesto { background: var(--color-paper); color: var(--color-ink); } .manifesto h1 { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--tracking-display); } .manifesto h1 em { font-style: normal; background: var(--color-accent); /* 动词上的红块高亮 */ color: var(--color-paper); padding: 0 0.08em; }七、实战案例Meridian 工作室宣言页仓库中的完整实战证据位于 site/_tests/04-meridian-manifesto/brief 原文是Make me a manifesto for my new studio called Meridian. We work on environmental products. No flashy stuff.brief.md。值得说明的是这个测试页的最终版本走的是 Macrostructures 的轮换规则详细说明见下节落到了Quote-Led Brutal主题——一个二十字的引语式首屏加三条支撑原则index.html。但它与 v1 版本构成了宣言类页面的完整对照实验维度v1Manifesto 宏观结构v2Quote-Led 宏观结构仓库现留版本首屏五条编号宣言 一条出血色带一条 20 字引语 三条原则主题ManifestoInter Tight 900BrutalDruk 压缩展示体强调色红 →黄区块数~9 个5 个共同点品牌与调性不变无图像增强深色纸、单一强调色、无渐变、无圆角同左这个案例揭示了一个关键设计事实同一个 brief、同一种宣言能量可以由不同的宏观结构承载。v1 是教科书式的 Manifesto编号宣言 出血色带v2 则证明宣言可以像一句话一样短也可以像五句话一样长。而无论哪个版本都遵守了 Manifesto 的底层纪律无视觉增强Quote-Led Brutal 已经足够响亮加任何视觉都会稀释论点。no flashy stuff 的约束直接映射到这里——声音就是设计。brief.md深色纸 单一强调色 无渐变 无圆角宣言页拒绝一切软性装饰。正文的一个断言纪律四条原则Fewer things, made well / Material is the brief / Repair before replace / Slow is the deliverable每条一个断言、一段正文、一句加粗主张正是原文档short paragraphs each holding one assertion的落地。如果要在仓库中查看宣言结构的直接 HTML 证据Meridian v2 的 index.html 与 style.css 就是完整的可运行样本--font-displayBebas Neue做大字展示、--color-accent做敲击词划线和出血规则、masthead 用 mono 小字做声明头部、colophon 收尾——这些组件完全可以复用到你自己的 Manifesto 页面。八、与宏观结构轮换机制的关系Manifesto 在 hallmark 中不只是一个页面形态还是轮换机制的一个坐标点。三条规则直接约束它的使用时机宏观结构轮换mandatory连续两次 hallmark 输出不能共享同一宏观结构。检测方式是在目标代码库的 CSS 顶部找/* Hallmark · macrostructure: name · ... */印章stamp。Meridian 案例的 v2 正是因此从 Manifesto 轮换到 Quote-Led——rotation rule pushes away from the Manifesto-named-twice patternbrief.md。主题轮换三轴连续两次主题必须在纸色波段paper band、展示风格display style、强调色相accent hue中至少一个维度不同。Manifesto 主题的轴值是darkL 30%· geometric-sansAnton 全大写压缩· warm-red——Meridian 从 Manifestodark · Inter Tight 900 · red轮换到 Brutaldark · Druk-condensed · yellow时恰好满足展示风格与强调色相均不同。项目记忆每次构建都会把宏观结构/主题/增强记录进.hallmark/log.json下次运行时按最近 3–5 条做轮换约束见 SKILL.md。宣言类页面同样受此约束避免同项目反复出现 Manifesto 形态。九、总结什么时候该用 Manifesto用一句话记住这门结构当你的页面首先要说服读者该相信什么而不是该点击什么时选 Manifesto。适合品牌重塑公告、使命驱动的独立产品、设计工作室信念页、一切观点即产品的场景。避开任何以即时转化为核心目标的交易型页面。三条硬纪律一段一断言无图或至多一张高对比黑白出血图按钮远低于首屏。两条文案纪律宣言做出承诺commit不做保留hedge用具体数字和成对结构而非模糊修饰。在 hallmark 的完整体系中Manifesto 只是 21 种宏观结构之一完整索引见 skills/hallmark/references/macrostructures.md。它的价值不在于最炫而在于它是结构多样性棋盘上的一个重要棋子——与 Bento Grid、Long Document 等结构配合轮换才能保证两个不同 brief 产出的是不同的网站而不是同一个模板的不同配色见 SKILL.md 对 structural variety 的强调。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考