Claude Design 全流程：从灵感到成品网站

这套流程是我从"随便看看动画"到"做出一个影视级网站"的完整 pipeline。

Step 1: 去 Pinterest 找灵感

在 Pinterest 上找到你喜欢的动画风格或视觉灵感。保存你觉得最打动你的那几张图。

Step 2: 用 AI 生成背景和角色

把 Pinterest 上的图粘贴进 AI 工具，用以下 prompt：

Prompt 1（背景）：

Create a background just like this. It should be abstract since this is the background for my desktop wallpaper.

Prompt 2（角色）：

Create a character just like this, expand so their full height is visible.

Step 3: 用 Seedance 2.0 做动画

把生成的图片拿到小云雀（豆包）的 Seedance 2.0，prompt：

Animate this, no camera movement, no extra elements to be added, no zoom in and zoom out, looping animation.

Step 4: 用 motionsites.ai 做网站

到 motionsites.ai 选一个模板。如果你不喜欢默认模板，想要不同的布局、字号或配色，就在上面调整。

Step 5: 从 Landbook 找布局灵感

说你想做 X 个 section。把 Landbook 上看到的布局作为灵感来使用，而不是照搬。参考结构、留白、层次——但自己重新实现，这样成品才有自己的味道。

整个 pipeline 的关键点

  • 灵感来源：Pinterest（静态视觉）
  • 素材生成：AI（背景 + 角色，参考图做引导）
  • 动效：Seedance 2.0（把静态图变成循环动画）
  • 载体：motionsites.ai 模板（快速起步）
  • 布局参考：Landbook（不抄，做 inspiration）