Hallmark Split Studio 宏结构指南用交替分屏Diptych让每一条主张都有视觉证明【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkSplit Studio 是 Hallmarkskills/hallmark/SKILL.md21 种具名页面宏结构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.三个关键约束双联屏Diptych每一个主要内容块都是一对文字 证明而不是三列卡片、也不是居中段落。视觉节奏来自成对的左右分割而非卡片数量。证明proof文字的另一侧必须是证据——产品截图、代码示例、客户引用而不是装饰性配图。这是它与普通图文左右排版的本质区别图片是用来证明主张的不是用来填充空白的。交替alternates direction第一行文字在左、图片在右第二行图片在左、文字在右如此往复。这种之字形zig-zag排布让长页面滚动起来有方向感也避免了所有行都朝一个方向时产生的单调。六个结构轴Split Studio 的完整指纹每个 Hallmark 宏结构都是一套完整页面形状——标题位置、正文构成、分隔语言、按钮语气、图片处理、揭示动效——打包成一次具名选择见 skills/hallmark/references/macrostructures.md。Split Studio 的六个轴定义如下可与 skills/hallmark/references/structure.md 的六轴体系一一对照结构轴Split Studio 的取值与通用六轴体系的对应Heading标题半屏宽另一半放截图或引用居中显示centered display或悬挂hanging但始终被限制在双联屏的一侧Body正文交替式左文右图 / 右文左图模块双栏不对称two-column asymmetricDivider分隔两半之间用清晰的间距槽gutter不画分割线负空间分隔negative space——间距本身就是分隔符Button按钮文字半屏下方的描边按钮描边outlined按钮语气Image图片每一行都锚定在与文字相反的那一侧与文字对齐margin-aligned / inline的图片进入方式Reveal揭示动效相对的左右两半以轻微错峰的方式交叉淡入fade-up 交错stagger模式但按左半 / 右半成对编排其中几个轴可以落到仓库中的具名组件原型上标题半屏对应 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 itSaaS 功能页、需要解释配代码的开发者工具页、任何每条主张都想配一个视觉证明的内容。原文特别点名的三类参考是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 whats next.—— 斜体展示字 右侧精选作品列Print discipline, on screen.—— Hallmark Newsprint —— 双短语标题报头风格We design and build distinctive products for ambitious teams.—— 点明动词design and build点明受众ambitious teams分析这三句的共性可以提炼出三条可复用的配方一句话即主张另一列即证据。第一句 A studio for whats next. 本身就是定位声明不需要副标题解释——解释的工作交给了旁边的精选作品列。双短语压缩。Print discipline, on screen. 用两个名词短语制造张力前半是方法论印刷纪律后半是媒介屏幕一句话同时说清继承什么、改变什么。点明动词与受众。第三句同时命名了做什么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 classhero-split divh1…/h1p…/pa classcta-outline…/a/div figureimg 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 StackFeature Stack 是左侧粘性标签/描述 右侧随滚动同步切换的截图是滚动同步的影院式节奏Split Studio 则是整行整行的静态左右配对方向交替。一个靠滚动驱动一个靠排版驱动。与 05 · WorkbenchWorkbench 是产品截图装进框里作为主要内容的导览页偏重带你走一遍产品Split Studio 的截图是论证材料服务于每条主张配一个证明。与 08 · PhotographicPhotographic 是整幅出血大图、文字退为批注Split Studio 的图片被严格限制在半屏内且必须与文字同屏成对。H2 原型文件里特意标注了Dont confuse with: H6 Photographicwhich 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 要求一系列可验证的输出纪律Step 5 预览块写代码前先输出 Markdown 要点式预览——宏结构、主题、增强方式通常 none (typography only)、章节清单、动效原语、slop 测试通过率、多样性差异轴。用户五秒内可叫停避免写完 500 行 CSS 才发现方向不对。CSS 戳记stamp产物 CSS 第一行必须是/* Hallmark · macrostructure: Split Studio · tone: tone · anchor hue: hue */作为本轮选择的持久记录。项目记忆.hallmark/log.json在数组头部追加{ date: ..., macrostructure: Split Studio, theme: ..., enrichment: ..., brief: ... }供下一轮 Step 2.5 读取。多样性轮换下一轮必须选一个与 Split Studio不同的宏结构且主题至少要在一个轴上纸面色带 / 展示字体风格 / 强调色相与上一轮不同——两页不能只换配色不换结构。这套规则的完整定义在 macrostructures.md 的 Diversification rule。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
