nateherkai/scroll-craft

解决的问题

大多数AI生成的网站要么平庸无奇，要么华而不实（例如：糟糕的排版、移动端响应差、重复的布局）。scroll-craft通过将交互与高端设计工艺视为一个统一的过程，防止AI代理生成‘千篇一律’的AI页面。

如何工作

它作为一个“代理技能”（一组指令、参考和工具），可与Codex或Claude Code等编码代理配合使用。它提供一个严格的設計框架，代理必须遵循：

• 页面语法（Page Grammars）： 定义八种互斥的布局风格（例如：电影式单镜头、排版海报），以确保多样性。
• 设计约束（Design Constraints）： 强制执行“排版底线”、特定的间距比例和有限的配色方案，以维持专业标准。
• 指纹门控（Fingerprint Gate）： 为防止重复，新构建必须在6个维度（语法、导航、主视觉区、动作形态、收尾、签名动作）中至少有4个与之前项目不同。
• 验证引擎（Verification Engine）： 无头浏览器自动审计完成的页面，检测“死滚动”（滚动无反应区域）、对比度问题和损坏的视频片段。
• 技术引擎（Technical Engine）： 核心JavaScript/CSS引擎处理滚动驱动动画（如逐帧视频拖动），无需对核心机制进行项目级修改。

适用人群

使用AI编码代理构建高端、沉浸式滚动驱动网站，需要遵循高标准专业设计并避免“AI感”的开发者和设计师。

主要亮点

• 滚动即时间线： 支持复杂交互，如视频逐帧拖动，用户滚动时部分区域固定。
• 反平庸护栏： 明确禁止常见的AI设计套路，如相同的特征卡片网格和“AI紫”渐变。
• 自动化质量控制： 包含使用无头浏览器报告视觉和功能失败的验证流程。
• 代理就绪： 以Claude Code插件和可移植技能文件夹形式提供，适用于其他编码代理。