nateherkai/scroll-craft

解决的问题

Scrollcraft 解决了 AI 生成网站常见的失败问题，即网站要么过于普通且容易被遗忘，要么虽然花哨但设计糟糕（例如：糟糕的排版、移动端响应性差、重复的布局）。它将高端交互设计与美学工艺视为一个集成过程，创建出独特且专业的高保真度滚动驱动型网站。

工作原理

作为 Claude Code 的一项技能，Scrollcraft 使用专用引擎和一系列严格的设计约束，引导 AI 按照特定的生产流程工作：

• 页面语法：使用八种互斥的布局结构（如「电影式单镜头」或「连续世界」），确保网站不会趋同为单一的通用风格。
• 指纹门控：为防止重复，新构建必须在至少 6 个维度（语法、导航、主视觉、动作形态、收尾、标志性动作）中与之前项目至少有 4 个不同。
• 设计底线：对排版（最多两种字体、特定行高）、间距（4px 基础节奏）和色彩（六种角色，禁止纯黑）实施严格规则，以维持专业水准。
• 情感曲线：在构建前为每个「动作」映射情感意图，确保存在一个工程化的高参与度峰值。
• 自动化验证：使用无头浏览器（Playwright）对最终页面进行审计，检查「无效滚动」（滚动无响应区域）、对比度问题和损坏资源。

适用人群

使用 Claude Code 的设计师和开发者，希望构建高保真度、滚动驱动型着陆页，避免「AI 风格」并符合专业设计标准。

核心亮点

• 滚动即时间线：支持高级交互，如逐帧视频拖动、固定区域、平移轨道。
• 定制化交互：每个构建都必须发明一个独特的「标志性动作」交互。
• 严格拒绝列表：明确禁止常见 AI 模式，如渐变文字、相同的特征卡片网格、「AI 紫色」渐变。
• 品牌集成：允许品牌套件作为硬性约束，覆盖技能的默认偏好。
• 自我审计：自动检查所有滚动位置的可访问性（对比度）和技术故障（未解码的片段）。