企业官网建设流程全解析

Hallmark Split Studio 宏结构指南：用交替分屏（Diptych）让每一条主张都有视觉证明

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

Split Studio 是 Hallmark（skills/hallmark/SKILL.md）21 种具名页面宏结构（macrostructure）中的第 15 号：整页由一个个双联屏（diptych）构成，每个主要内容块都把屏幕一分为二——一侧是文字，另一侧是"证明"（截图或引用），并且每一行的文字/图片位置沿页面交替翻转。本文从定义、六个结构轴、适用与回避场景、开场文案配方，到基于仓库源码的可运行实现与输出纪律，完整拆解这一结构，帮助你在构建 SaaS 功能页、开发者工具页时，让"每一条主张都配有视觉证明"，而不是落入 hero → 三特性 → CTA → footer 的 AI 模板节奏。

一句话定义：什么是 Split Studio

原文定义极其凝练，值得逐句拆解：

Diptych. Every major content block divides the screen — text on one side, proof on the other. The pairing alternates direction down the page.

三个关键约束：

1. 双联屏（Diptych）：每一个主要内容块都是一对"文字 + 证明"，而不是三列卡片、也不是居中段落。视觉节奏来自成对的左右分割，而非卡片数量。
2. 证明（proof）：文字的另一侧必须是证据——产品截图、代码示例、客户引用，而不是装饰性配图。这是它与普通"图文左右排版"的本质区别：图片是用来证明主张的，不是用来填充空白的。
3. 交替（alternates direction）：第一行文字在左、图片在右；第二行图片在左、文字在右；如此往复。这种"之字形"（zig-zag）排布让长页面滚动起来有方向感，也避免了所有行都朝一个方向时产生的单调。

六个结构轴：Split Studio 的完整指纹

每个 Hallmark 宏结构都是一套完整"页面形状"——标题位置、正文构成、分隔语言、按钮语气、图片处理、揭示动效——打包成一次具名选择（见 skills/hallmark/references/macrostructures.md）。Split Studio 的六个轴定义如下，可与 skills/hallmark/references/structure.md 的六轴体系一一对照：

其中几个轴可以落到仓库中的具名组件原型上：

• 标题半屏对应 H2 · Split Diptych 英雄原型：标题 + 导语在一侧，图片或产品截屏在另一侧，6/6 或 7/5 分栏；若另一半放的是引用，则可参考 H3 · Quote-Led 的blockquote.display-italic+ attribution 写法。
• 描边按钮对应 C1 · Outlined chip：带边框、透明底、内含一个动作动词（如 "Open your studio →"），并保证min-height: 44px的可点击区域。
• 负空间分隔对应 structure.md 分隔语言里的 "Negative space——no rule at all, the gapisthe divider"，这也是 Apple、Linen 系现代极简的默认做法。

适用场景与回避场景

适用（Reach for it）：SaaS 功能页、需要"解释配代码"的开发者工具页、任何"每条主张都想配一个视觉证明"的内容。原文特别点名的三类参考是：Vercel 的功能页、Stripe Sessions 大会节目页、大量开发者工具主页。这类页面的共同特征是：卖点本身就是可以被截图证明的东西——一个界面、一段代码、一个图表——双联屏恰好是展示它们最直接的语法。

回避（Avoid for）：叙事型或摄影型品牌（narrative or photographic brands）。原文给的理由非常直白："Split halves the attention; some pages need single focus."——分屏会平分注意力，而有些页面需要单一焦点。例如以整幅摄影为主导的 08 Photographic 宏结构（单张巨图撑满每个折叠，文字退为小字号批注），或需要连续叙述流的 Letter / Long Document，都不适合被切成左右两半。这也对应 skills/hallmark/SKILL.md 的设计原则：先读 brief 判断页面"想让人做什么"，再决定结构，而不是反过来套模板。

开场文案配方：模仿"具体性"，而非句式

Split Studio 的文档特别强调，开场行要模仿的是具体性（specificity）——开场往往把一句定位声明与一个证明列（proof column）配对。原文给出了三个示例：

"A studio for what's next."—— 斜体展示字 + 右侧精选作品列

"Print discipline, on screen."—— Hallmark Newsprint —— 双短语标题，报头风格

"We design and build distinctive products for ambitious teams."—— 点明动词（design and build），点明受众（ambitious teams）

分析这三句的共性，可以提炼出三条可复用的配方：

1. 一句话即主张，另一列即证据。第一句 "A studio for what's next." 本身就是定位声明，不需要副标题解释——解释的工作交给了旁边的"精选作品"列。
2. 双短语压缩。"Print discipline, on screen." 用两个名词短语制造张力：前半是方法论（印刷纪律），后半是媒介（屏幕），一句话同时说清"继承什么、改变什么"。
3. 点明动词与受众。第三句同时命名了"做什么"（design and build）和"为谁做"（ambitious teams），比空洞的 "We create experiences" 具体一个量级。

这正是 skills/hallmark/references/copy.md 与 slop 测试（skills/hallmark/references/slop-test.md）共同反对的"LLM 分布文案"（如 "Built for the modern team"）的对立面：开场行的职责是给出可被证明的具体主张，而不是放一句放之四海皆准的漂亮话。

实战落地：从宏结构到可运行页面

第 1 步：先选宏结构，再谈视觉

按照 skills/hallmark/SKILL.md 的 Design flow，宏结构选择发生在主题选择之前（Step 2 "Pick a macrostructure FIRST"）：先读 macrostructures 索引 挑一个名字，再只加载对应的单文件 15-split-studio.md，绝不整卷加载。同时在这一步顺带选定导航与页脚原型（N1–N10 / Ft1–Ft8），它们是页面结构指纹的一部分，不是可选装饰。结构指纹表（structure.md 的 Theme-suggested fingerprints 表）显示，与 Split Studio 气质最接近的 Studio 主题默认使用 N7 Brutal slab 导航与 Ft3 Index columns 页脚。

第 2 步：H2 Split Diptych 的骨架代码

仓库 H2 组件原型 给出了英雄区的直接可运行实现：

<section class="hero-split"> <div><h1>…</h1><p>…</p><a class="cta-outline">…</a></div> <figure><img src="" /></figure> </section>

.hero-split { display: grid; grid-template-columns: 7fr 5fr; /* 文字侧 7，证明侧 5 */ gap: var(--space-2xl); /* 中间就是那条“无线的 gutter” */ align-items: center; } @media (max-width: 56rem) { .hero-split { grid-template-columns: 1fr; } /* 窄屏折叠为单列 */ }

要点拆解：

• 7fr/5fr 或 6/6 分栏：文字与证明并非五五对半，常用 7:5 让文字侧稍宽，读起来更从容；图片侧保持"证明"的克制身份。
• gutter 用gap实现：这就是"清晰间距槽、无分割线"的代码形态——分隔完全由--space-2xl级别的间距完成，不画任何border或::after装饰线。
• 窄屏折叠：max-width: 56rem以下退回单列，否则双联屏在手机上会变成两个互相挤压的窄条。

页面中每个后续内容块复用同一套.hero-split结构，通过交替方向制造之字形节奏：下一行的 DOM 顺序反过来（<figure>在前、文字块在后），或者用grid-template-columns: 5fr 7fr加figure { order: -1 }实现方向翻转。这是"alternates direction down the page"在代码里的直接体现。

第 3 步：按钮与揭示动效

按钮采用 C1 · Outlined chip：

.cta-outline { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.7rem 1.2rem; border: 1px solid var(--color-ink); min-height: 44px; /* 触控可点击性下限 */ }

揭示动效按 motion.md 的规范实现"左右两半轻微错峰交叉淡入"。规范要求：只动画transform与opacity、使用三个具名缓动 token（--ease-out/--ease-in/--ease-in-out）、按 DOM 索引用 CSS 自定义属性做交错、总错峰时长控制在约 500ms 以内。给双联屏两半分别设--i: 0与--i: 1，即得到自然的错峰淡入：

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-long: 420ms; } .half { opacity: 0; transform: translateY(8px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms); /* 左右两半错峰 */ } @keyframes reveal { to { opacity: 1; transform: none; } }

且必须提供prefers-reduced-motion: reduce回退——把空间位移收拢为 ≤150ms 的纯透明度交叉淡入。这是 Hallmark 的硬性纪律，不是可选优化。

第 4 步：移动端不可妥协项

SKILL.md 的响应式纪律 对每次输出强制要求 320 / 375 / 414 / 768px 四档验证：无横向滚动（html/body { overflow-x: clip }）、按钮与链接不可折行、图片网格轨道用minmax(0, 1fr)、展示标题用overflow-wrap: anywhere。对 Split Studio 而言，这意味着双联屏在 ≤56rem 必须折叠为单列，且折叠后"文字→图片"的阅读顺序要人工核对，保证先主张、后证据。

与相邻宏结构的边界

Split Studio 容易与另外几个宏结构混淆，明确边界可以避免选错：

• 与 16 · Feature Stack：Feature Stack 是"左侧粘性标签/描述 + 右侧随滚动同步切换的截图"，是滚动同步的影院式节奏；Split Studio 则是整行整行的静态左右配对，方向交替。一个靠滚动驱动，一个靠排版驱动。
• 与 05 · Workbench：Workbench 是"产品截图装进框里作为主要内容的导览页"，偏重"带你走一遍产品"；Split Studio 的截图是论证材料，服务于"每条主张配一个证明"。
• 与 08 · Photographic：Photographic 是整幅出血大图、文字退为批注；Split Studio 的图片被严格限制在半屏内，且必须与文字同屏成对。H2 原型文件里特意标注了"Don't confuse with: H6 Photographic（which puts the image full-bleed, not paired）"。
• 与 18 · Portfolio Grid：作品集网格是"可筛选的作品卡片墙"；Split Studio 的成对行是叙述，不是索引。

此外，structure.md 的 domain → trio 表 将Split Studio 归入"agency / studio（以作品为导向）、多项目作品集、自由职业创意者"这一类，与 Portfolio Grid、Index-First 组成三选一——这意味着当 brief 出现这类领域词时，Split Studio 是官方推荐的三候选之一，但默认不强行指定，而是把三个类别完全不同的候选交给用户选择。

输出纪律：预览、戳记与多样性轮换

选中 Split Studio 后，Design flow 要求一系列可验证的输出纪律：

1. Step 5 预览块：写代码前先输出 Markdown 要点式预览——宏结构、主题、增强方式（通常 "none (typography only)"）、章节清单、动效原语、slop 测试通过率、多样性差异轴。用户五秒内可叫停，避免写完 500 行 CSS 才发现方向不对。
2. CSS 戳记（stamp）：产物 CSS 第一行必须是/* Hallmark · macrostructure: Split Studio · tone: <tone> · anchor hue: <hue> */，作为本轮选择的持久记录。
3. 项目记忆.hallmark/log.json：在数组头部追加{ "date": ..., "macrostructure": "Split Studio", "theme": ..., "enrichment": ..., "brief": ... }，供下一轮 Step 2.5 读取。
4. 多样性轮换：下一轮必须选一个与 Split Studio不同的宏结构，且主题至少要在一个轴上（纸面色带 / 展示字体风格 / 强调色相）与上一轮不同——两页不能只换配色不换结构。这套规则的完整定义在 macrostructures.md 的 Diversification rule。
5. Step 7 slop 测试：交付前把输出跑一遍 69 项 slop 测试，任何一项不过都要修到通过为止——包括结构层面的"页面骨架千篇一律""三个等宽特性卡片"等反模式检查。

仓库中的验证路径

如果你想在仓库里看 Hallmark 的宏结构多样性纪律如何实际生效，可以对照 site/_tests/README.md：八份生成测试（外加后续扩展）在每个 brief 只给一句提示词的条件下，产出了八个互不重复的结构指纹——Letter、Long Document、Catalogue、Quote-Led、Workbench、Index-First、Bento Grid、Marquee Hero——没有任何一个宏结构重复，验证了"两页不应看起来像同一模板换了个色"的核心主张。其中 08 号 Cohort 测试明确使用了"交替侧特性行（alternating-side feature rows）"的排布，与 Split Studio 的双联交替同源。各测试产出的index.html/style.css位于 site/_tests/ 各子目录，CSS 文件头部都带有宏结构戳记，可直接当作"结构指纹如何落地"的样本阅读。

小结

Split Studio 的核心价值可以压缩成一句话：把页面从"列表式呈现"改造成"论证式呈现"——文字负责主张，同屏的另一半负责证明，交替方向让长页面的滚动本身产生节奏。它最适合 SaaS 功能页与开发者工具页这类"卖点可截图"的内容，最不适合叙事与摄影型品牌。实现上它不复杂（一个 7fr/5fr 的 grid、一条无线的 gutter、一个描边按钮、一组错峰淡入），真正的难点在于纪律：选它之前先确认 brief 匹配，用它的时候守住"证明不越界、方向必交替、窄屏必折叠"三条底线，并在交付前跑完 slop 测试与移动端四档验证。把这套流程走完，你就拥有了一个既不模板化、又能让每条主张都被看见的页面骨架。

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