AI时代的设计守门员：让 Claude 自动生成真正有呼吸感的滚动式网页

Scroll Craft 不是一个普通的前端动画库，也不是一个“一键生成落地页”的营销工具。它是一套嵌入 Claude Code 的深度设计规则引擎——专为对抗当下 AI 网站生成中泛滥的“伪精致”而生：那些千篇一律的六段式结构、低对比度文字、堆砌动效却毫无节奏的页面、以及用“01/06”计数器假装专业的空洞表达。它强制 AI 把“交互逻辑”和“视觉工艺”视为同一项工作，用可验证的工程标准（比如截图比对、逐帧对比、实时对比度检测）来守住设计底线。

核心功能

滚动即时间轴，而非触发开关：解决“动效与内容脱节”问题。传统 scroll-trigger 库只在临界点播放动画，而 Scroll Craft 让滚动本身成为连续时间线——标题逐字浮现、背景色随滚动位置渐变、3D 场景按比例平移、甚至鼠标悬停元素会响应滚动进度而提前位移，真正实现“你滚多远，世界就演多深”。
八大互斥页面语法强制差异化：解决“AI 产出同质化”顽疾。它不提供“主题切换”，而是定义 filmic-one-shot（电影单镜长拍）、continuous-world（无缝世界）、typographic-poster（排版海报）等八种底层叙事结构，且明确禁止交叉混用——选了“章节式编辑体”，就不能出现“分屏舞台”所需的左右切割逻辑，从架构上杜绝模板复用。
每页必须拥有唯一签名交互：解决“缺乏品牌记忆点”问题。不是简单加个视差或缩放，而是要求每个生成页面发明一个仅在此处生效的交互：比如 Orrery 页面中“地球仪随滚动自动校准经纬度并投射实时阴影”，该逻辑无法复用到 PERKFORM 的咖啡液滴溅射动画中。
指纹门限机制防自我抄袭：解决设计师/团队重复劳动陷阱。新页面必须在“语法、导航模型、首屏形态、段落形状、结尾方式、签名交互”6个维度中，至少4项与历史作品不同；若相似度过高，系统拒绝生成，倒逼重新构思，而非微调配色。
情感曲线先行设计法：解决“技术驱动掩盖体验断层”问题。要求每个内容段落先定义“读者此刻应感受的情绪（如：好奇→敬畏→松弛）”，再匹配视觉实现；相邻两段若情绪相同，则被判定为冗余填充，直接剔除——确保每一步滚动都有心理推进力。
峰值-终点法则硬编码：解决“信息平均主义导致无高潮”问题。全页只允许一个视觉/交互峰值（如 Fallowbank 中摄影集突然全屏淡入+环境音效触发），该区域独占最高资源配额（带宽、渲染优先级、留白空间），其他部分必须为其让渡注意力。
Typography 地板规范自动校验：解决“响应式排版失守”痛点。强制执行：最多两种字体、字号越大字距越紧、行宽严格控制在45–75字符、深色背景文字需三轴补偿（亮度/饱和度/对比度），任何违反项在生成阶段即报错。
自检式质量门禁：解决“上线后才发现体验崩坏”风险。生成后自动启动无头浏览器，在每个滚动关键帧截图并分析：是否存在“死滚动”（滚动无变化）、文字是否始终达不到100%不透明度、每行文本在最亮帧下的实际对比度是否≥4.5:1、视频片段是否静默未解码——全部通过才允许交付。

技术亮点

Claude Code 插件原生集成架构：非独立运行工具，而是作为 Anthropic 官方认证插件深度嵌入 Claude Code 工作流，所有设计决策由 LLM 在代码生成前完成推理，而非后期 CSS 覆盖，保证“意图即实现”。
基于真实像素的验证闭环：区别于多数前端库依赖 DOM 状态判断，Scroll Craft 的质检模块通过 Puppeteer 截取合成后的完整像素帧，逐行计算文本对比度、检测图层透明度衰减、识别静止视频帧，用视觉事实替代代码假设。
设计约束即代码契约：将“禁止梯度文字”“禁用 em dash”“禁用 AI-purple 色值”等主观规则转化为 ESLint 式可执行校验器，违反即中断生成，使设计原则获得工程级 enforceability。
品牌指南强约束解析器：支持直接输入 Figma 变量 JSON 或 Brand.ai 配置，自动提取色值、字号阶梯、间距比例，并将其中“禁止项”（如“主色不可用于正文”）编译为运行时断言，确保 AI 不越界发挥。

适合哪些人用

主要面向两类专业用户：一是数字产品设计师与创意总监，需要快速验证高端落地页概念，又不愿陷入“改稿10版仍像竞品”的泥潭；二是前端工程师兼设计协作者，常被要求“既要性能又要高级感”，但苦于缺乏可落地的设计语言体系。

真实场景示例：
• 某独立设计工作室接到京都旅行品牌委托，要求制作“沉浸式地理叙事”官网。使用 Scroll Craft 选定 continuous-world 语法，系统自动生成 Orrery 页面：用户滚动即穿越地球模型→京都街景→巴塔哥尼亚冰川，全程无分页跳转，且所有地形光影根据滚动位置实时计算，交付后客户直接用于提案；
• 咖啡科技公司发布新品蛋白冷萃，市场部需48小时内上线强冲击力落地页。团队启用 filmic-one-shot 语法，生成 PERKFORM 页面：首屏黑场+金属撞击音效切入，中段硬切双全屏反转（咖啡液滴慢镜 vs 实验室离心机高速旋转），所有文案采用超大无衬线字体配合物理抖动，上线首周转化率提升220%。

快速上手

无需本地安装。在 Claude Code 环境中启用该插件后，直接输入自然语言指令即可：

请为「Fallowbank 景观事务所」生成官网首页，品牌色系：#1a2b3c, #e6f0e6；要求采用 documentary 语法，结尾用流动文本而非按钮；禁用所有图标与装饰性线条；主图必须为真实场地摄影；输出含完整 HTML/CSS/JS，且通过 contrast-check 和 dead-scroll 检测。

系统将返回可直接部署的静态文件包，并附带自检报告截图与各维度合规说明。

同类对比 / 注意事项

不同于 locomotive-scroll 或 gsap 等动效库：Scroll Craft 不提供 API，而是定义“什么不该做”；它不教你怎么写 JS，而是告诉你“这个页面为何不能有滚动提示箭头”。
不同于 Webflow AI 或 Framer AI：后者追求“更快生成”，Scroll Craft 追求“更难生成但绝不妥协”——当检测到对比度不足时，它会重写整个配色方案，而非仅调亮文字。
注意事项：目前仅支持 Claude Code 生态，暂未开放独立 CLI；对品牌指南的解析依赖结构化输入（需提供变量命名规范），纯图片版 VI 手册需人工转译；生成过程耗时较长（因含多轮截图验证），适合精品项目而非批量生产。