Hallmark Feature Stack 宏结构实战指南用「粘性左栏 滚动同步右栏」打造电影级产品叙事【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读Feature Stack特性堆叠是 hallmark 这套反 AI 味设计技能Anti-AI-slop design skill所内置的 21 种页面宏结构macrostructure之一编号16。它解决的核心问题是当一款产品拥有多个值得逐一展示的细节画面截图、面板、演示图时如何让用户顺着滚动自然、有节奏地把它们看完——左栏标题保持粘性sticky不动右栏画面随滚动依次循环播放形成类似电影剪辑的观看节奏。读完本文你将掌握 Feature Stack 的六轴结构定义、与 F2 Sticky-scroll stack 组件的精确对应关系、Scroll-sync 的两种实现路径、它适用的场景边界与移动端回退策略并能在自己的落地页项目中直接复刻这套结构。一、Feature Stack 是什么一次「滚动即放映」的结构决策在开始写任何代码之前Hallmark 要求先做宏结构决策而不是直接进入视觉细节。宏结构索引 将宏结构定义为「一页完整的页面形态——标题位置、正文构成、分隔线语言、按钮语气、图片处理、呈现方式——打包成一个命名选择」。Feature Stack 就是这 21 个命名形态之一它的定位由 16-feature-stack.md 完整定义Sticky left pane (label / description) scroll-synced right pane (screenshots cycling through related details). Cinematic pacing.翻译过来即粘性的左栏标签/描述 与滚动同步的右栏截图在相关细节间循环切换整体呈现电影化的节奏控制。与同目录下其他宏结构对比Feature Stack 最接近的「近亲」是14-Narrative Workflow与05-Workbench三者都围绕「用户往下滚动、内容逐步揭示」展开但分工不同宏结构核心形态节奏机制14 · Narrative Workflow编号阶段1.0 → 2.0 → 3.0自上而下讲使用过程线性时间轴叙事05 · Workbench步骤列表 钉住的工具面板步骤高亮驱动面板内容切换左侧步骤驱动右侧面板16 · Feature Stack粘性左栏 滚动同步右栏右栏在 3–6 张细节画面间循环滚动行程即放映进度Hallmark 的核心纪律是「结构性多样而非视觉多样」——两页不同 brief 的页面不应共享同样的 hero → 三特性 → CTA → footer 节奏。因此 Feature Stack 的价值不只是「好看」而是它提供了一种与 Bento Grid、Long Document 等形态在结构轴上完全不同的指纹供设计师按需取用。二、六轴结构定义Feature Stack 的完整解剖16-feature-stack.md 用六个轴向与 structure.md 的六轴目录一致完整描述了 Feature Stack 的形态指纹1. 标题Heading—— 钉在粘性栏内标题不跟随滚动移动而是被放在粘性左栏内部当右栏内容在它旁边循环切换时标题始终保持可见充当整个片段的「固定片名」。2. 正文Body—— 双栏左粘性 右滚动页面被切成两列左列position: sticky右列正常参与滚动。右栏在每个 section 内依次播放3–6 张细节画面detail screens画面与左栏当前标题语义一一对应。3. 分隔线Divider—— 分节 band用分节色带section bands切分不同部分每当进入新的 section左栏粘性面板会重新锚定re-anchor即解除上一个 section 的粘性、再针对新 section 再次钉住。4. 按钮Button—— 出现在粘性栏内按钮同样放在粘性左栏中且触发时机有讲究当用户滚动到该 section 的细节画面数量走完时才出现set when the user reaches the sections detail count——按钮是滚动的终点奖励而不是首屏就摆出来的常规 CTA。5. 图片Image—— 右列以画面为主滚动右列绝大部分是图像内容mostly imagery。这是 Feature Stack 与纯文字文档类宏结构的最大区别文字只承担「标签/描述」职责画面才是叙事主体。6. 呈现方式Reveal—— 无空间淡入淡出Feature Stack刻意不使用任何空间淡入淡出spatial-fade类的呈现动效——「粘性 滚动本身就是动效」the sticky/scroll IS the motion。这是与其他宏结构在运动设计轴上的关键差异动效预算全部花在滚动同步上而不是花在元素入场动画上。一句话总结Feature Stack 六轴中「标题 钉住」「正文 左粘右滚」「分隔 分节重锚」「按钮 细节播完才出现」「图片 右栏主力」「呈现 滚动即动效」。三、何时使用、何时回避场景边界16-feature-stack.md 给出了非常明确的使用指引Reach for it使用场景高端产品premium products复杂的特性故事complex feature stories任何你希望在用户滚动时控制节奏control pacing as the user scrolls的内容。Avoid on回避场景移动优先的受众mobile-first audiences且没有强回退方案时——因为「粘性 滚动同步」在小屏幕上体验很差stickyscroll-sync is rough on small screens。这一警告与 responsive.md 的移动端硬性要求相互印证Hallmark 规定每个输出必须在320 / 375 / 414 / 768 px四个宽度下完美渲染而 component-cookbook.md 的移动回退表中明确写着F2 Sticky-scroll stack 在小屏上「粘性面板解除粘性内容退化为文本视觉块的线性序列画面收缩为 16/9 内联图完全不再有粘性行为」。参考对象公开参照系文档点名了 Apple 产品页、部分 Stripe Sessions 页面、Read.cv onboarding——这些页面都以「标题钉住 画面轮播」的节奏著称。作为设计研究参考时可结合 study 工作流提取其 DNA但注意 hall mark 的study动词强调「提取结构而非复制像素」。四、开口文案样板如何开启一个 Feature Stack 页面16-feature-stack.md 强调Feature Stack 的开场要先钉住一句具体声明然后带用户逐段走完pin a single statement and then walk the user through。文档给出了三条可直接模仿的样板Plan, build, ship.— 三个动词三个粘性栏Read anything that emits lines.— Streampipe测试 02——先命名「能做什么」再逐步走读From stdin, through the pipe, into your dashboard.— 先命名数据通路再逐步解释每一步注意这里要求的模仿对象是具体性specificity而非句式。Hallmark 的诚实文案纪律anti-patterns.md 与 slop-test gate 关于虚构指标的规定同样适用于开场如果用户没有提供数据就不能发明 47% 转化、50,000 团队 之类的数字——开场声明必须建立在真实能力描述之上。Streampipe 测试例02-streampipe-cli/brief.md展示了一条完整的真实开场演化v1 以$ streampipe --help命令开场v2 改为「一句描述该 CLI 能做什么的话」把$命令移到安装章节——先声明能力再讲解步骤正是 Feature Stack 与 Long Document 共用的开场哲学。五、F2 Sticky-scroll stack与组件层的精确对应Feature Stack 宏结构在组件层面对应的正是F2 · Sticky-scroll stack组件。组件菜谱 对它的索引描述为F2 · Sticky scroll stack— Sticky left pane, scrolling right pane that cycles through related screenshots.适用条件某个特性有多个值得按顺序展示的子状态multiple sub-states worth showing in sequence。易混辨析不要与F4 · Step sequence混淆——F4 是线性编号的阶段1.0 → 2.0 → 3.0不强调滚动同步。F2 组件文件 给出了可直接复用的最小骨架section classsticky-stack div classpane-stickyh3…/h3p…/p/div div classpane-scroll figure1/figurefigure2/figurefigure3/figure /div /section.sticky-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } /* calc(--banner-height --space-xl) so the sticky pane docks below the nav with breathing room. Falls back to --space-xl alone when no sticky nav is on the page (slop-test gate 68). */ .pane-sticky { position: sticky; top: calc(var(--banner-height, 0px) var(--space-xl)); align-self: start; z-index: var(--z-sticky); }这段 CSS 里藏着两个关键工程点都有仓库级依据top偏移必须避开粘性导航top: calc(var(--banner-height, 0px) var(--space-xl))让粘性栏停在导航下方并留出呼吸空间当页面没有粘性导航时--banner-height回退为 0退化为--space-xl单值。这正是 slop-test.md gate 68 的硬性要求——如果页面上同时存在「粘性导航」和「另一个top: 0的粘性元素」两者会叠在一起出现章节标题渗进导航栏的经典 bug修复方案就是定义--banner-heighttoken 并把次要粘性元素偏移到top: var(--banner-height)同时把导航的 z-index 抬到--z-sticky-nav300之上、页内粘性元素用--z-sticky200。z-index 分层--z-sticky与--z-sticky-nav是两个分离的 token。真实实现可见 site/css/sections.css 的 Almanac 主题——html[data-themealmanac] .section__head使用position: sticky; top: var(--banner-height); z-index: var(--z-sticky);并配了注释说明「--z-sticky(200) 位于--z-sticky-nav(300) 之下所以 banner 即使在滚动中途与 section head 的盒体重叠也能盖住它」——这就是同一个「双粘性元素」问题的正面解法。六、Scroll-sync 的实现机制与仓库佐证「滚动同步」是 Feature Stack 的引擎。综合仓库中的实现证据滚动同步有两种典型实现路径路径 A纯 CSS 粘性对齐零 JS利用position: sticky的天然行为左栏钉住、右栏滚动右栏内 3–6 张画面依次进入视口。配合上文的 F2 骨架当滚动行程覆盖整个 section 的高度时用户自然会依次看到全部画面——粘性本身提供了「面板不换位、内容在换」的电影感。这条路径零 JS、零滚动监听也最贴合宏结构「sticky/scroll IS the motion」的设计意图。路径 BIntersectionObserver 驱动的面板换内容高保真 Workbench 式当需要「同一块面板随滚动切换内容状态」时仓库给出了更精细的实现Workbench宏结构在 05-tracejam-saas 测试中展示了「pinnedright, contenttrace-panel, steps3」的粘性面板变体——右侧钉住一个手绘的瀑布追踪面板用户滚过每一步step 01 open → step 02 find → step 03 read时面板状态随之切换。其 样式实现 使用.pinned { position: sticky; top: var(--space-xl); height: fit-content; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 6px; padding: var(--space-lg); }height: fit-content保证钉住的面板不撑开布局top: var(--space-xl)与 F2 骨架的偏移逻辑一致。而「步骤高亮随滚动切换」的机制记录在 microinteractions.md 中使用IntersectionObserver 触发active-step highlight via IntersectionObserver并且 Hallmark 的动效纪律要求「绝不使用 scroll 监听器首轮揭示之后不再有任何滚动动效」——这是为了照顾前庭敏感用户motion.md 同款立场滚轮绑定的视差/滚动驱动动效被列为反模式。实现选择建议若右栏是「一组静态截图依次经过」用路径 A纯 CSS即可若需求是「一块面板随滚动切换内部状态如追踪面板、代码输出、仪表盘」用路径 BIntersectionObserver。无论哪条路径都要满足 responsive.md 的移动回退小屏下解除粘性、画面转 16/9 内联、无任何滚动同步行为。七、滚动叙事相关的三条动效纪律Feature Stack 虽然以「滚动即动效」著称但 Hallmark 对滚动类动效有严格的边界依据 microinteractions.md 与 motion.md只用 IntersectionObserver不用 scroll 监听器。滚动监听在 iOS 上不可靠且易引发抖动IntersectionObserver 是声明式的、可被浏览器优化的。入场动效一次完成。首轮入场用 100ms 交错 translateY(8px → 0)--ease-out400ms之后不再有任何滚动触发动画——页面应该在滚动中「安静地存在」。滚动同步不是页面普遍动效。正文文本不得随滚动揭示——「阅读不是电影体验」。Feature Stack 的「动效」只属于那对粘性/滚动栏其余部分保持静止。若你的 Feature Stack 落地页含交互元素按钮、复制代码、Tab记得同时满足 interaction-and-states.md 的八状态要求default · hover ·:focus-visible·:active· disabled · loading · error · success并支持prefers-reduced-motion——空间类动效应坍缩为 ≤150ms 的透明度交叉淡入。八、与宏结构生态的关系Feature Stack 在决策流程中的位置在 Hallmark 的默认 Design flow 中Feature Stack 不是孤立选择而是一套决策链的产物Step 2 先选宏结构SKILL.md 强制要求从 宏结构索引 中挑一个命名形态然后只加载references/macrostructures/16-feature-stack.md这一个文件禁止整册加载省 token 的纪律。同时选导航与页脚原型N1–N10 / Ft1–Ft8典型一次构建加载 5–7 个原型文件。多态化纪律连续两次构建不能重复同一宏结构——检查代码库中已有的/* Hallmark · macrostructure: name · ... */印章也检查 .hallmark/log.json 风格的项目记忆05-tracejam-saas/brief.md 演示了完整轮转v1 用 Bento Grid Pastelv2 因 brief 说「try it」而轮转到 Workbench Midnight并在印章中记录「differ on macrostructure paper band accent hue」。构建后跑 slop testslop-test.md 的 69 个门Feature Stack 尤其要过 gate 36/62无横向滚动、overflow-x: clip——且必须用clip而非hidden因为hidden会破坏position: sticky后代、gate 68双粘性元素偏移、gate 61含图网格轨道用minmax(0, 1fr)而非裸1fr。印章 记忆落盘CSS 文件首行写/* Hallmark · macrostructure: Feature Stack · ... */并向.hallmark/log.json追加条目供下一次构建的多态化读取。从源码结构看仓库的 site/css/sections.css、site/css/tokens.css 与 site/_tests 下的 brief 目录共同构成了一套「宏结构 → 组件 → token → 测试」的可追溯体系每个测试 brief 都记录了从 pre-flight、设计上下文门、宏结构轮转、预览块到最终印章的完整决策过程是学习 Feature Stack 如何在真实 brief 中落地的最佳活教材。九、实战清单落地一个 Feature Stack 页面综合 16-feature-stack.md 与仓库实现落地一份 Feature Stack 页面的最小检查清单结构层左栏粘性position: stickytop: calc(var(--banner-height, 0px) var(--space-xl))align-self: start右栏按 section 播放 3–6 张细节画面画面占右栏主体每个 section 独立成带左栏跨 section 时重新锚定按钮只在该 section 细节播完后出现在粘性栏内。纪律层开场先钉一句具体声明Plan, build, ship. 式再逐段走读不做空间淡入淡出——滚动同步就是动效用 IntersectionObserver 而非 scroll 监听器首轮后无滚动动效文案不虚构指标、不虚构用户证言。兼容层320 / 375 / 414 / 768 px 四宽度验证移动端回退为线性「文本 16/9 内联画面」html, body { overflow-x: clip; }勿用hidden含图轨道用minmax(0, 1fr)若页面已有粘性导航用--banner-height偏移 --z-sticky(200) /--z-sticky-nav(300) 分层prefers-reduced-motion下坍缩为 ≤150ms 透明度交叉淡入。结语Feature Stack 是 Hallmark 宏结构目录中「节奏控制」的代表作它以一对粘性/滚动栏把「滚动」本身变成放映机让 3–6 张细节画面在钉住的标题旁依次上演。它的适用域明确——高端产品、复杂特性故事、需要掌控滚动节奏的页面它的边界同样明确——移动优先受众需要强回退方案。掌握了它你就掌握了一种与 Bento Grid、Long Document、Manifesto 完全不同的页面指纹而这正是 Hallmark「让两页不同 brief 的页面看起来像两个不同的站点而不是同一模板的换色」这一核心目标的最直接体现。深入研究可继续阅读 宏结构索引、F2 组件定义、slop-test 滚动门 以及 Tracejam 实测 brief。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Hallmark Feature Stack 宏结构实战指南用「粘性左栏 滚动同步右栏」打造电影级产品叙事【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读Feature Stack特性堆叠是 hallmark 这套反 AI 味设计技能Anti-AI-slop design skill所内置的 21 种页面宏结构macrostructure之一编号16。它解决的核心问题是当一款产品拥有多个值得逐一展示的细节画面截图、面板、演示图时如何让用户顺着滚动自然、有节奏地把它们看完——左栏标题保持粘性sticky不动右栏画面随滚动依次循环播放形成类似电影剪辑的观看节奏。读完本文你将掌握 Feature Stack 的六轴结构定义、与 F2 Sticky-scroll stack 组件的精确对应关系、Scroll-sync 的两种实现路径、它适用的场景边界与移动端回退策略并能在自己的落地页项目中直接复刻这套结构。一、Feature Stack 是什么一次「滚动即放映」的结构决策在开始写任何代码之前Hallmark 要求先做宏结构决策而不是直接进入视觉细节。宏结构索引 将宏结构定义为「一页完整的页面形态——标题位置、正文构成、分隔线语言、按钮语气、图片处理、呈现方式——打包成一个命名选择」。Feature Stack 就是这 21 个命名形态之一它的定位由 16-feature-stack.md 完整定义Sticky left pane (label / description) scroll-synced right pane (screenshots cycling through related details). Cinematic pacing.翻译过来即粘性的左栏标签/描述 与滚动同步的右栏截图在相关细节间循环切换整体呈现电影化的节奏控制。与同目录下其他宏结构对比Feature Stack 最接近的「近亲」是14-Narrative Workflow与05-Workbench三者都围绕「用户往下滚动、内容逐步揭示」展开但分工不同宏结构核心形态节奏机制14 · Narrative Workflow编号阶段1.0 → 2.0 → 3.0自上而下讲使用过程线性时间轴叙事05 · Workbench步骤列表 钉住的工具面板步骤高亮驱动面板内容切换左侧步骤驱动右侧面板16 · Feature Stack粘性左栏 滚动同步右栏右栏在 3–6 张细节画面间循环滚动行程即放映进度Hallmark 的核心纪律是「结构性多样而非视觉多样」——两页不同 brief 的页面不应共享同样的 hero → 三特性 → CTA → footer 节奏。因此 Feature Stack 的价值不只是「好看」而是它提供了一种与 Bento Grid、Long Document 等形态在结构轴上完全不同的指纹供设计师按需取用。二、六轴结构定义Feature Stack 的完整解剖16-feature-stack.md 用六个轴向与 structure.md 的六轴目录一致完整描述了 Feature Stack 的形态指纹1. 标题Heading—— 钉在粘性栏内标题不跟随滚动移动而是被放在粘性左栏内部当右栏内容在它旁边循环切换时标题始终保持可见充当整个片段的「固定片名」。2. 正文Body—— 双栏左粘性 右滚动页面被切成两列左列position: sticky右列正常参与滚动。右栏在每个 section 内依次播放3–6 张细节画面detail screens画面与左栏当前标题语义一一对应。3. 分隔线Divider—— 分节 band用分节色带section bands切分不同部分每当进入新的 section左栏粘性面板会重新锚定re-anchor即解除上一个 section 的粘性、再针对新 section 再次钉住。4. 按钮Button—— 出现在粘性栏内按钮同样放在粘性左栏中且触发时机有讲究当用户滚动到该 section 的细节画面数量走完时才出现set when the user reaches the sections detail count——按钮是滚动的终点奖励而不是首屏就摆出来的常规 CTA。5. 图片Image—— 右列以画面为主滚动右列绝大部分是图像内容mostly imagery。这是 Feature Stack 与纯文字文档类宏结构的最大区别文字只承担「标签/描述」职责画面才是叙事主体。6. 呈现方式Reveal—— 无空间淡入淡出Feature Stack刻意不使用任何空间淡入淡出spatial-fade类的呈现动效——「粘性 滚动本身就是动效」the sticky/scroll IS the motion。这是与其他宏结构在运动设计轴上的关键差异动效预算全部花在滚动同步上而不是花在元素入场动画上。一句话总结Feature Stack 六轴中「标题 钉住」「正文 左粘右滚」「分隔 分节重锚」「按钮 细节播完才出现」「图片 右栏主力」「呈现 滚动即动效」。三、何时使用、何时回避场景边界16-feature-stack.md 给出了非常明确的使用指引Reach for it使用场景高端产品premium products复杂的特性故事complex feature stories任何你希望在用户滚动时控制节奏control pacing as the user scrolls的内容。Avoid on回避场景移动优先的受众mobile-first audiences且没有强回退方案时——因为「粘性 滚动同步」在小屏幕上体验很差stickyscroll-sync is rough on small screens。这一警告与 responsive.md 的移动端硬性要求相互印证Hallmark 规定每个输出必须在320 / 375 / 414 / 768 px四个宽度下完美渲染而 component-cookbook.md 的移动回退表中明确写着F2 Sticky-scroll stack 在小屏上「粘性面板解除粘性内容退化为文本视觉块的线性序列画面收缩为 16/9 内联图完全不再有粘性行为」。参考对象公开参照系文档点名了 Apple 产品页、部分 Stripe Sessions 页面、Read.cv onboarding——这些页面都以「标题钉住 画面轮播」的节奏著称。作为设计研究参考时可结合 study 工作流提取其 DNA但注意 hall mark 的study动词强调「提取结构而非复制像素」。四、开口文案样板如何开启一个 Feature Stack 页面16-feature-stack.md 强调Feature Stack 的开场要先钉住一句具体声明然后带用户逐段走完pin a single statement and then walk the user through。文档给出了三条可直接模仿的样板Plan, build, ship.— 三个动词三个粘性栏Read anything that emits lines.— Streampipe测试 02——先命名「能做什么」再逐步走读From stdin, through the pipe, into your dashboard.— 先命名数据通路再逐步解释每一步注意这里要求的模仿对象是具体性specificity而非句式。Hallmark 的诚实文案纪律anti-patterns.md 与 slop-test gate 关于虚构指标的规定同样适用于开场如果用户没有提供数据就不能发明 47% 转化、50,000 团队 之类的数字——开场声明必须建立在真实能力描述之上。Streampipe 测试例02-streampipe-cli/brief.md展示了一条完整的真实开场演化v1 以$ streampipe --help命令开场v2 改为「一句描述该 CLI 能做什么的话」把$命令移到安装章节——先声明能力再讲解步骤正是 Feature Stack 与 Long Document 共用的开场哲学。五、F2 Sticky-scroll stack与组件层的精确对应Feature Stack 宏结构在组件层面对应的正是F2 · Sticky-scroll stack组件。组件菜谱 对它的索引描述为F2 · Sticky scroll stack— Sticky left pane, scrolling right pane that cycles through related screenshots.适用条件某个特性有多个值得按顺序展示的子状态multiple sub-states worth showing in sequence。易混辨析不要与F4 · Step sequence混淆——F4 是线性编号的阶段1.0 → 2.0 → 3.0不强调滚动同步。F2 组件文件 给出了可直接复用的最小骨架section classsticky-stack div classpane-stickyh3…/h3p…/p/div div classpane-scroll figure1/figurefigure2/figurefigure3/figure /div /section.sticky-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } /* calc(--banner-height --space-xl) so the sticky pane docks below the nav with breathing room. Falls back to --space-xl alone when no sticky nav is on the page (slop-test gate 68). */ .pane-sticky { position: sticky; top: calc(var(--banner-height, 0px) var(--space-xl)); align-self: start; z-index: var(--z-sticky); }这段 CSS 里藏着两个关键工程点都有仓库级依据top偏移必须避开粘性导航top: calc(var(--banner-height, 0px) var(--space-xl))让粘性栏停在导航下方并留出呼吸空间当页面没有粘性导航时--banner-height回退为 0退化为--space-xl单值。这正是 slop-test.md gate 68 的硬性要求——如果页面上同时存在「粘性导航」和「另一个top: 0的粘性元素」两者会叠在一起出现章节标题渗进导航栏的经典 bug修复方案就是定义--banner-heighttoken 并把次要粘性元素偏移到top: var(--banner-height)同时把导航的 z-index 抬到--z-sticky-nav300之上、页内粘性元素用--z-sticky200。z-index 分层--z-sticky与--z-sticky-nav是两个分离的 token。真实实现可见 site/css/sections.css 的 Almanac 主题——html[data-themealmanac] .section__head使用position: sticky; top: var(--banner-height); z-index: var(--z-sticky);并配了注释说明「--z-sticky(200) 位于--z-sticky-nav(300) 之下所以 banner 即使在滚动中途与 section head 的盒体重叠也能盖住它」——这就是同一个「双粘性元素」问题的正面解法。六、Scroll-sync 的实现机制与仓库佐证「滚动同步」是 Feature Stack 的引擎。综合仓库中的实现证据滚动同步有两种典型实现路径路径 A纯 CSS 粘性对齐零 JS利用position: sticky的天然行为左栏钉住、右栏滚动右栏内 3–6 张画面依次进入视口。配合上文的 F2 骨架当滚动行程覆盖整个 section 的高度时用户自然会依次看到全部画面——粘性本身提供了「面板不换位、内容在换」的电影感。这条路径零 JS、零滚动监听也最贴合宏结构「sticky/scroll IS the motion」的设计意图。路径 BIntersectionObserver 驱动的面板换内容高保真 Workbench 式当需要「同一块面板随滚动切换内容状态」时仓库给出了更精细的实现Workbench宏结构在 05-tracejam-saas 测试中展示了「pinnedright, contenttrace-panel, steps3」的粘性面板变体——右侧钉住一个手绘的瀑布追踪面板用户滚过每一步step 01 open → step 02 find → step 03 read时面板状态随之切换。其 样式实现 使用.pinned { position: sticky; top: var(--space-xl); height: fit-content; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 6px; padding: var(--space-lg); }height: fit-content保证钉住的面板不撑开布局top: var(--space-xl)与 F2 骨架的偏移逻辑一致。而「步骤高亮随滚动切换」的机制记录在 microinteractions.md 中使用IntersectionObserver 触发active-step highlight via IntersectionObserver并且 Hallmark 的动效纪律要求「绝不使用 scroll 监听器首轮揭示之后不再有任何滚动动效」——这是为了照顾前庭敏感用户motion.md 同款立场滚轮绑定的视差/滚动驱动动效被列为反模式。实现选择建议若右栏是「一组静态截图依次经过」用路径 A纯 CSS即可若需求是「一块面板随滚动切换内部状态如追踪面板、代码输出、仪表盘」用路径 BIntersectionObserver。无论哪条路径都要满足 responsive.md 的移动回退小屏下解除粘性、画面转 16/9 内联、无任何滚动同步行为。七、滚动叙事相关的三条动效纪律Feature Stack 虽然以「滚动即动效」著称但 Hallmark 对滚动类动效有严格的边界依据 microinteractions.md 与 motion.md只用 IntersectionObserver不用 scroll 监听器。滚动监听在 iOS 上不可靠且易引发抖动IntersectionObserver 是声明式的、可被浏览器优化的。入场动效一次完成。首轮入场用 100ms 交错 translateY(8px → 0)--ease-out400ms之后不再有任何滚动触发动画——页面应该在滚动中「安静地存在」。滚动同步不是页面普遍动效。正文文本不得随滚动揭示——「阅读不是电影体验」。Feature Stack 的「动效」只属于那对粘性/滚动栏其余部分保持静止。若你的 Feature Stack 落地页含交互元素按钮、复制代码、Tab记得同时满足 interaction-and-states.md 的八状态要求default · hover ·:focus-visible·:active· disabled · loading · error · success并支持prefers-reduced-motion——空间类动效应坍缩为 ≤150ms 的透明度交叉淡入。八、与宏结构生态的关系Feature Stack 在决策流程中的位置在 Hallmark 的默认 Design flow 中Feature Stack 不是孤立选择而是一套决策链的产物Step 2 先选宏结构SKILL.md 强制要求从 宏结构索引 中挑一个命名形态然后只加载references/macrostructures/16-feature-stack.md这一个文件禁止整册加载省 token 的纪律。同时选导航与页脚原型N1–N10 / Ft1–Ft8典型一次构建加载 5–7 个原型文件。多态化纪律连续两次构建不能重复同一宏结构——检查代码库中已有的/* Hallmark · macrostructure: name · ... */印章也检查 .hallmark/log.json 风格的项目记忆05-tracejam-saas/brief.md 演示了完整轮转v1 用 Bento Grid Pastelv2 因 brief 说「try it」而轮转到 Workbench Midnight并在印章中记录「differ on macrostructure paper band accent hue」。构建后跑 slop testslop-test.md 的 69 个门Feature Stack 尤其要过 gate 36/62无横向滚动、overflow-x: clip——且必须用clip而非hidden因为hidden会破坏position: sticky后代、gate 68双粘性元素偏移、gate 61含图网格轨道用minmax(0, 1fr)而非裸1fr。印章 记忆落盘CSS 文件首行写/* Hallmark · macrostructure: Feature Stack · ... */并向.hallmark/log.json追加条目供下一次构建的多态化读取。从源码结构看仓库的 site/css/sections.css、site/css/tokens.css 与 site/_tests 下的 brief 目录共同构成了一套「宏结构 → 组件 → token → 测试」的可追溯体系每个测试 brief 都记录了从 pre-flight、设计上下文门、宏结构轮转、预览块到最终印章的完整决策过程是学习 Feature Stack 如何在真实 brief 中落地的最佳活教材。九、实战清单落地一个 Feature Stack 页面综合 16-feature-stack.md 与仓库实现落地一份 Feature Stack 页面的最小检查清单结构层左栏粘性position: stickytop: calc(var(--banner-height, 0px) var(--space-xl))align-self: start右栏按 section 播放 3–6 张细节画面画面占右栏主体每个 section 独立成带左栏跨 section 时重新锚定按钮只在该 section 细节播完后出现在粘性栏内。纪律层开场先钉一句具体声明Plan, build, ship. 式再逐段走读不做空间淡入淡出——滚动同步就是动效用 IntersectionObserver 而非 scroll 监听器首轮后无滚动动效文案不虚构指标、不虚构用户证言。兼容层320 / 375 / 414 / 768 px 四宽度验证移动端回退为线性「文本 16/9 内联画面」html, body { overflow-x: clip; }勿用hidden含图轨道用minmax(0, 1fr)若页面已有粘性导航用--banner-height偏移 --z-sticky(200) /--z-sticky-nav(300) 分层prefers-reduced-motion下坍缩为 ≤150ms 透明度交叉淡入。结语Feature Stack 是 Hallmark 宏结构目录中「节奏控制」的代表作它以一对粘性/滚动栏把「滚动」本身变成放映机让 3–6 张细节画面在钉住的标题旁依次上演。它的适用域明确——高端产品、复杂特性故事、需要掌控滚动节奏的页面它的边界同样明确——移动优先受众需要强回退方案。掌握了它你就掌握了一种与 Bento Grid、Long Document、Manifesto 完全不同的页面指纹而这正是 Hallmark「让两页不同 brief 的页面看起来像两个不同的站点而不是同一模板的换色」这一核心目标的最直接体现。深入研究可继续阅读 宏结构索引、F2 组件定义、slop-test 滚动门 以及 Tracejam 实测 brief。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
