scroll-world

scroll-world 是一个专为 Claude Code、Codex 及其他兼容 SKILL.md 标准的 AI 智能体设计的插件。它能够帮助开发者和设计师快速构建一种极具视觉冲击力的网页体验：通过滚动驱动镜头，连续不断地“飞入”并穿越一个个生成的微观世界。这种无缝衔接的视觉叙事方式，类似于苹果产品页面中标志性的滚动动画技术，但完全由 AI 自动化生成资产与代码。

核心体验：连续不断的视觉飞行

与传统网页不同，scroll-world 创建的页面没有剪辑点。当用户滚动鼠标时：

1. 镜头推进：视角从当前场景的外部平滑飞入内部。
2. 无缝过渡：镜头自然流向下一个场景，形成一条连贯的视觉动线。
3. 时间驱动：滚动条仅控制时间轴，镜头运动是真实的物理模拟，带来极强的沉浸感。

工作流程：从概念到落地

调用该技能后，AI 将执行以下标准化流程：

1. 🗣️ 需求沟通：
   • 确认主题、行业及核心宣传点。
   • 收集品牌套件（Logo、配色、字体）。
   • 确定艺术方向及镜头访问的场景顺序。
   • 确认是否需要移动端适配及预算限制。
2. 🎨 资产生成：
   • 静帧 (Stills)：为每个关键场景生成高质量静态图。
   • 俯冲镜头 (Dive Clips)：生成从外部飞入场景内部的动态视频片段。
   • 连接器 (Connectors)：生成连接两个相邻场景的过渡片段，确保视觉流畅性。
   • 注：主要依赖 Higgsfield CLI 生成艺术效果，也可通过 Codex 内置的 image_gen 生成静帧。
3. 💻 页面构建：
   • 组装一个配置驱动的滚动引擎。
   • 将所有片段串联成完整的飞行序列。
   • 自动适配移动端，提供竖屏片段及海报优化。

系统要求

• Higgsfield CLI：需已认证并有剩余积分（用于生成核心视频资产）。
• FFmpeg / ffprobe：用于帧提取和视频编码处理。
• Python 3 & Pillow：用于图像处理。
• Codex CLI (可选)：若存在，可利用其内置 image_gen 生成场景静帧，费用计入 ChatGPT 订阅。

安装指南

1. Claude Code (推荐)

/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

使用方式：直接对话要求“创建一个滚动穿过世界的着陆页”，或输入 /scroll-world。

2. Codex 及其他智能体

npx skills add oso95/scroll-world            # 根据提示选择智能体
npx skills add oso95/scroll-world -a codex   # 直接指定 Codex

使用方式：在 Codex 中使用 $scroll-world 调用，或直接自然语言描述需求。

3. 手动安装

git clone https://github.com/oso95/scroll-world
# 复制到对应智能体的 skills 目录
cp -R scroll-world/skills/scroll-world ~/.claude/skills/   # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/    # Codex

适用场景

• 品牌故事讲述：通过连续的视觉隐喻展示品牌理念。
• 产品发布着陆页：以极具科技感的方式展示产品细节。
• 创意作品集：为设计师或艺术家提供独特的在线展示形式。
• 营销活动页面：吸引用户长时间停留并互动的沉浸式体验。