silk-design

这是什么？适合谁？

silk-design 是一个 Claude Code Skill，解决 AI 生成网页的通病：出来的页面是死的—默认滚动条、凭空出现的区块、毫无反应的 hover。它是一套动效与设计令牌的「目录」，并指示 Agent 默认就使用这些技术，而不是等你开口要求。GitHub 108 Stars（MIT 协议）。

它的底气是 8 个用它建成的真实上线站点（README 全部附链接）：理发店、烘焙坊、咖啡馆、物理治疗所、美甲工作室—全是真实付费客户级别的产出，不是 demo 页。

内容构成：

• 地基（每次构建必用）：Lenis 平滑滚动、杀死滚动反弹、九色令牌系统（暴露给 Tailwind）、流体 clamp() 字号—四件事约十五行代码，完成大部分工作
• 效果目录（带具体数值）：弹簧常数、缓动曲线、stagger 间隔、滚动偏移量—文字逐字 stagger 标题、视差、pin + scrub 区块、滚动擦洗视频、光标图像轨迹、磁性按钮、幕布菜单、跑马灯；五个大组件完整源码在 assets/，其余是可直接照打的配方
• 13 个动画背景（3 个成品组件）
• 单旋钮设计系统：一个 --radius 驱动整个圆角体系，附字体配对与 10 套风格皮肤（换三个 CSS 块即切换）
• 23 个参考构图：每个含配色、字体选择、区块节奏与效果组合

技术栈：React + Vite、Tailwind v4、motion（Framer Motion）、GSAP。

适合人群：

• 用 Claude Code 做客户网站的独立开发者/工作室：直接产出「动效高级感」的站点
• 前端开发者：即使手写，效果目录里的具体数值（弹簧常数/缓动曲线）也是现成参考
• 想让 AI 建站摆脱「模板感」的任何人

不适合：后台管理系统等动效反成干扰的场景；非 React 栈项目（组件是 React 生态）。

使用前提：Claude Code（或兼容 Agent）；React + Vite + Tailwind v4 项目。

准备工作

1. 运行环境：Claude Code 及一个 React + Vite + Tailwind v4 项目。
2. 安装：git clone https://github.com/bendrape1-byte/silk-design ~/.claude/skills/silk-design。
3. 依赖：motion（Framer Motion）、GSAP、Lenis—Agent 会在构建时按需安装。
4. 素材：你的文案、品牌信息、照片/视频（可选）。
5. 成本：免费开源；消耗 Agent 额度。
6. 时间预算：安装 2 分钟；一个完整站点（含动效）数小时，取决于内容量。

3 步快速上手

第 1 步：安装

git clone https://github.com/bendrape1-byte/silk-design ~/.claude/skills/silk-design

第 2 步：下达建站任务

在项目里对 Agent 说：

用 /silk-design skill 给 The Hair House（女性理发工作室）建官网。
信息：位于法兰克福，主营剪染造型，需要预约入口、价目表、作品集。
素材在这个目录：./assets/

第 3 步：审阅与迭代

Agent 会应用地基（平滑滚动/令牌/流体字号）+ 从效果目录选配合适的动效，产出完整站点。逐节查看动效节奏，用自然语言微调（「hero 的视差再强一点」「这个区块换成幕布菜单」）。

预期结果：一个 Lenis 平滑滚动、带视差/stagger/磁性按钮等动效、可部署的 React 站点（README 的案例全部部署在 Cloudflare Workers / Vercel 上）。成功判定：滚动流畅无跳变、hover 有反馈、移动端动效不卡。

常见踩坑

踩坑 1：动效堆砌过载

• 现象：页面每个区块都在动，观众晕船。
• 原因：效果目录太诱人，Agent 什么都想用。
• 解决：指令明确「动效克制，重点区块（hero/CTA）用大动效，正文区只保留滚动显现」；23 个参考构图里选一个「效果集」而不是全开。

踩坑 2：移动端性能崩盘

• 现象：手机上视差+跑马灯+光标轨迹齐飞，掉帧严重。
• 原因：部分效果（光标轨迹类）在触屏无意义且耗性能。
• 解决：要求 Agent 按指针类型区分（@media (hover: hover)）；触屏只保留 stagger 显现与平滑滚动。

踩坑 3：Tailwind 版本不匹配

• 现象：令牌系统不生效，颜色仍是默认值。
• 原因：项目用的是 Tailwind v3，Skill 的九色令牌面向 v4 暴露方式。
• 解决：新项目直接 v4 起步；旧项目先迁移或手动移植令牌到 v3 配置。

踩坑 4：平滑滚动与锚点冲突

• 现象：Lenis 启用后锚点跳转失效或错位。
• 原因：Lenis 劫持了滚动行为，原生锚点逻辑不再适用。
• 解决：让 Agent 用 Lenis 的 scrollTo API 实现导航跳转（Skill 的地基方案应包含此处理，遇到时提醒即可）。

踩坑 5：字体加载闪动（FOUT）破坏 stagger 效果

• 现象：标题逐字动画在字体切换后显得破碎。
• 原因：网页字体异步加载，stagger 完成时字体才换上。
• 解决：使用 font-display: swap 配合在字体就绪后再触发入场动画（document.fonts.ready）。

踩坑 6：照抄案例的德语站结构

• 现象：8 个案例全是德语区小店（咖啡馆/理发店），直接套用结构到别的行业水土不服。
• 原因：案例是「参考构图」不是「模板」。
• 解决：学它的节奏（单屏 hero + 双列叙事 + 全宽 CTA）而非内容结构；参考构图自带 23 种行业无关的组合。

初级用法

1. 单页落地页：一屏 hero + 三特性 + CTA，让 Agent 只用地基 + 一个大动效，30 分钟产出。
2. 旧站动效改造：把 Skill 装上后让 Agent 只加动效层（平滑滚动/显现动画），不动内容与布局。
3. 换肤：单旋钮设计系统下，让 Agent 换 --radius 与三块 CSS，同一站点瞬间换风格（10 套皮肤）。

高级玩法

1. 参考构图组合：从 23 个参考构图各取所长（A 的配色 + B 的区块节奏 + C 的效果集），让 Agent 合成专属构图。
2. 滚动叙事页（scrollytelling）：用 pin + scrub 区块 + 滚动擦洗视频做长叙事页—这是 Skill 效果目录里的强项组合。
3. 定制效果配方：把效果目录当「带数值的菜谱」，让 Agent 按品牌调性微调弹簧常数与缓动曲线，形成品牌的「动效手感」。
4. 多站点品牌化生产：美甲店/咖啡店这类小客户站用同一地基 + 不同皮肤/构图批量产出，工作室流水线化。

小技巧

1. 先看 8 个案例站定预期：README 链接全部可点，建站前先逛一圈，把喜欢的效果截图发给 Agent 当目标。
2. 「效果集」一次选定：参考构图自带效果集，让 Agent 按构图走比逐个点菜更协调。
3. 大组件直接用 assets/：五个大组件有完整源码，让 Agent 复制改造比从配方打快。
4. 九色令牌别绕过：改色改令牌而不是写死 hex，后续换肤才是一键的事。
5. GSAP 与 motion 分工：滚动相关交给 GSAP（ScrollTrigger），UI 微交互交给 motion—Skill 目录本身就是这样分的，顺着来少踩坑。

常见问题 FAQ

Q1: 和直接说「给页面加点动效」有什么区别？

A: 裸指令产出的是随机拼凑的动效（每个项目质量看运气）。silk-design 的价值在「默认即达标」：Agent 被指示优先使用经过验证的配方（具体到弹簧常数/缓动曲线/stagger 毫秒数），8 个上线站点证明这些数值组合可复现。

Q2: 只能建德国小店那种网站吗？

A: 不是。案例集中在德语区小商户只是作者的客群；效果目录（动效/背景/构图）是行业无关的，B 端产品官网、个人作品集同样适用。参考构图明确说明「是起点不是填空模板」。

Q3: 必须用 React + Vite + Tailwind v4 吗？

A: Skill 的组件与令牌按此栈编写，新项目强烈建议跟随。其他栈（Vue/Svelte/原生）可以借鉴方法论（地基四件事+带数值的效果目录），但组件源码需要自行移植。

Q4: 108 stars 的项目可靠吗？

A: 判断依据应是产出而非 stars：8 个可访问的上线站点（含真实商业客户 mina-cafe.com、oeffnermedia.com）是比 stars 更硬的验证。风险在于单人维护，锁版本使用是稳妥做法。

Q5: 动效会不会拖慢网站？

A: 地基四件事（Lenis/令牌/clamp 字号）开销极小；大头在视差、滚动擦洗视频这类效果—Skill 的正确用法是「重点区块用大效果」，全页堆砌属于使用错误（见踩坑 1/2）。

参考链接

• GitHub 仓库
• 案例站点合集（README 内 8 个链接）

本文基于公开资料整理（GitHub 仓库 README 及案例站点，数据核验日期 2026-08-25），AI 辅助生成。