Claude Design Full Pipeline: From Inspiration to a Cinematic Website
This is the full pipeline I use to go from "just browsing animations" to "a cinematic-level website."
Step 1: Find Inspiration on Pinterest
Hunt for the animation style or visual inspiration you like on Pinterest. Save the few that hit you hardest.
Step 2: Use AI to Generate Background and Character
Paste the Pinterest image into your AI tool of choice, with these prompts:
Prompt 1 (background):
Create a background just like this. It should be abstract since this is the background for my desktop wallpaper.
Prompt 2 (character):
Create a character just like this, expand so their full height is visible.
Step 3: Animate with Seedance 2.0
Take the generated image to Seedance 2.0 on Doubao (小云雀). Prompt:
Animate this, no camera movement, no extra elements to be added, no zoom in and zoom out, looping animation.
Step 4: Build the Site with motionsites.ai
Pick a template from motionsites.ai. If you don't like the default, tweak layout, font size, and color until it fits.
Step 5: Steal Layouts from Landbook
Say you want to build X sections. Use what you saw on Landbook as inspiration, not a copy. Reference structure, whitespace, hierarchy — but implement it yourself so the final product has your own flavor.
Key Points of This Pipeline
- Inspiration source: Pinterest (static visuals)
- Asset generation: AI (background + character, guided by reference images)
- Motion: Seedance 2.0 (static → looping animation)
- Container: motionsites.ai templates (fast start)
- Layout reference: Landbook (don't copy, use as inspiration)