ClaudeMap

scroll-craft

一个做高级滚动驱动网站的 agent skill——设计标准、引擎与验收工具打包在一起。

技能与命令skilldesignwebscroll-animationsplugin

scroll-craft 把滚动驱动营销站的完整设计标准打包成一个 agent skill:分层景深、指针响应与滚动转场作为一个整体任务来规划,skill 内置工作流、参考资料、引擎与验收工具。0.3.0 版加入了十个已验收上线站点背后的流程。Claude Code 用插件市场安装(marketplace nateherkai/scroll-craft),Codex 等其他 agent 直接用 skill 文件夹。

它做什么

  • 把交互与工艺当一个任务:景深分层、触点锚点、开场/中段/退场状态统一规划
  • 自带设计工作流、参考资料、引擎与验收工具——不只是一段 prompt
  • 0.3.0 沉淀了十个已验收上线网站的流程
  • 同时提供 Claude Code 插件与可移植 skill 文件夹两种形态,Codex 等 agent 也能用

什么时候用

最适合营销/产品站要「手工感」的场景——沉浸式首屏、滚动叙事——同时在真手机上保持可读与流畅。

如何上手

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design
# 调用:/nateherk-design:scroll-craft

# Codex 等 agent:把 plugins/nateherk-design/skills/scroll-craft/ 拷进对应 skill 目录

注意事项

滚动驱动页面的成败在真机性能上;skill 自带验收工具,但仍要给中端手机实测留时间。已验收站点标准代表作者本人的品味——当强默认值用,别当普适规范。

代码仓库

nateherkai/scroll-craft

收录日期

地图上的相关资源

  • 归藏的 Agent Skill:把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐,全程不碰视频剪辑软件。

    • agent-skill
    • video
    • promo
    • marketing
  • 一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片,把「这是哪」变成带误差半径的测量答案。

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
  • Birdview

    技能

    让 AI 编码 agent 在动第一行代码之前先画出架构、声明影响范围的 skill——成果是一张可直接打开的独立 HTML 架构地图。

    • skill
    • architecture
    • code-visualization
    • change-scope