企业官网建设流程全解析

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 给出的六条规范：

2.1 为什么按钮必须"远低于首屏"

这是 Manifesto 与普通营销页最反直觉的一点。常规 SaaS 页会把 CTA 放在首屏争夺点击；Manifesto 恰恰相反——超大实心按钮被刻意压到页面深处。因为宣言页的工作不是"转化"，而是"说服"。读者只有在读完你的立场、产生认同之后，按钮才有意义。Manifesto 卖的是"认同"，不是"行动"——这正是它与交易型页面（transactional pages）的本质区别。

2.2 图像克制：无图是默认态

六个轴里图像的权重最低："none, or a single high-contrast B&W 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 don't 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 class="manifesto bleed-ink"> <h1 class="caps display-xxl">WE BELIEVE <em class="block-accent">DESIGN</em> IS SLOW.</h1> </section> <section class="bleed-paper"> <p class="claim">It costs less than the rework you'll do without it.</p> </section>

要点拆解：

• .bleed-ink/.bleed-paper：两个"出血"语义类。第一个区块用墨色（ink）满铺，第二个区块用纸色（paper）满铺，区块之间没有任何发丝线分隔——色块本身就是分隔（对应第 2.2 节的 Divider 轴）。
• <em class="block-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-theme="manifesto"]的形式成为 hallmark 22 个命名主题之一，注释原文是：

MANIFESTO — BLACK paper · ALL CAPS condensed · red colour-blocks— The opposite pole from Brutal: same red accent, inverted background.

这个主题的令牌实现完整支撑了宏观结构的六条轴：

[data-theme="manifesto"] { --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; }

几个值得注意的实现决策：

1. 黑纸 + 红块：--color-paper是oklch(10%)的近黑，强调色是#E51A1A的纯红。这与 Brutal 主题（同为红色强调色但浅纸）形成"极性相反"的配对，详见 site/css/tokens.css 中"brutalist themes get heavier borders (Brutal, Manifesto)"的注释。
2. Anton 全大写展示体：--font-display以 Anton 为首选，配合--lh-tight: 0.86（行高 0.86，低于 1.0）。site/css/tokens.css 专门注释了这一点：Manifesto 用全大写 Anton 做展示标题时行高必须 < 1.0 才能压紧字母间距；同时该文件又在第 637 行提醒，全大写标题换行时行高需有 1.02 的下限，避免文字叠压——这是"压紧"与"可读"之间的精确平衡。
3. 颜色全部走令牌：这是 hallmark 的强制纪律（见 SKILL.md "Locked tokens — no mid-render improvisation"）——任何色彩与字体声明必须引用具名令牌，禁止内联 OKLCH 值。页面 CSS 引用var(--color-accent)、var(--font-display)，不允许绕过令牌块。

配合第五节的骨架，渲染层可以这样接入主题令牌：

<section class="manifesto">.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 版本构成了宣言类页面的完整对照实验：

这个案例揭示了一个关键设计事实：同一个 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-display（Bebas Neue）做大字展示、--color-accent做敲击词划线和出血规则、masthead 用 mono 小字做声明头部、colophon 收尾——这些组件完全可以复用到你自己的 Manifesto 页面。

八、与宏观结构轮换机制的关系

Manifesto 在 hallmark 中不只是"一个页面形态"，还是轮换机制的一个坐标点。三条规则直接约束它的使用时机：

1. 宏观结构轮换（mandatory）：连续两次 hallmark 输出不能共享同一宏观结构。检测方式是在目标代码库的 CSS 顶部找/* Hallmark · macrostructure: <name> · ... */印章（stamp）。Meridian 案例的 v2 正是因此从 Manifesto 轮换到 Quote-Led——"rotation rule pushes away from the Manifesto-named-twice pattern"（brief.md）。
2. 主题轮换三轴：连续两次主题必须在纸色波段（paper band）、展示风格（display style）、强调色相（accent hue）中至少一个维度不同。Manifesto 主题的轴值是dark（L < 30%）· geometric-sans（Anton 全大写压缩）· warm-red——Meridian 从 Manifesto（dark · Inter Tight 900 · red）轮换到 Brutal（dark · Druk-condensed · yellow）时，恰好满足"展示风格与强调色相均不同"。
3. 项目记忆：每次构建都会把宏观结构/主题/增强记录进.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