滚动叙事与页面动效设计

原名：epic-design

结合现有素材设计滚动、层次和文字动效，兼顾可读性与性能。

中文 Skills 技能说明

产品介绍页想增加动效时，先看素材和阅读顺序，不必把每块内容都做成动画。提供品牌、目标页面、现有图片、设备范围和技术约束，技能整理景深、视差、文字及区块衔接方案，借助包内素材检查工具交付实现草稿与检查项。素材检查需 Pillow，页面验证需 Node.js、浏览器及项目环境；不承诺帧率或转化提升。保留原路由和设计规则，支持减少动态效果，图片版权与移动端表现经核对后再发布。

上游能力依据

上游原始适用说明：结合现有素材设计滚动、层次和文字动效，兼顾可读性与性能。

上游 SKILL.md 主要章节（保留原文标题）：

• Before Starting
• Your Mindset
• How This Skill Works
• Mode 1: Build from Scratch
• Mode 2: Enhance Existing Site
• Mode 3: Debug/Fix
• Step 1 — Understand the Brief + Inspect All Assets
• A. Extract the brief
• B. Inspect every uploaded image asset
• C. Compositional planning — visual hierarchy before a single line of code

使用边界

先核对上游说明、依赖、输入资料和所需权限。涉及写入、删除、发布、支付或外部发送时，必须在执行前人工确认。

作者、翻译与许可证

原作者

Alireza Rezvani 与 claude-skills contributors

中文翻译

CEOFans翻译

许可证

MIT

上游来源

https://github.com/alirezarezvani/claude-skills/tree/27cfcd0fb0a41f60adffcbd5271fdf8839f86ed2/engineering-team/skills/epic-design

适用范围

平台：linux、macos、windows；标签：设计与前端、滚动叙事与页面动效设计、开源技能

安全提示

基础静态扫描不等于绝对安全。技能可能调用命令、浏览器、云服务或本地文件，请在最小权限环境中使用，高风险操作必须人工确认。

如发现侵权、许可证或安全问题，可在本页前台提交投诉，管理员复核后可立即下架。