Claude Design + Seedance 2.0 Workflow for Animated Sites
Start with composition-planned hero image from NanoBanana Pro on Higgsfield, mockup and iterate variants/tweaks in Claude Design, animate subtly with Seedance 2.0, handoff zip to Claude Code for dev server—costs ~$5 extra usage for full page.
Plan Hero Composition to Dictate Layout
Before generating any image, decide on hero composition by analyzing sites on Dribbble (search 'landing page SaaS'). Identify dead space for text (left, center, right, top/bottom), navbar, buttons, and ticker. Prompt NanoBanana Pro on Higgsfield.ai accordingly—e.g., split image with flashy visuals on right, blank left for overlay text. Use Claude to refine prompts. This locks in layout flow, preventing rework; still image ensures mobile performance by avoiding auto-video load.
Iterate Rapidly in Claude Design for 90% Solution
Upload composition image and Dribbble examples as context. Paste detailed prompt (generate via Claude Code) specifying company (e.g., Olympus market intelligence), sections (hero, features, testimonials, pricing, CTA), mythic voice, full-bleed hero, and 'Ask questions before beginning.' Claude enters plan mode, querying typography (modern mythic, inverted palette), copy voice, section order, social proof—answer or 'decide for me.'
Post-generation, use tweaks panel (right sidebar) for micro-changes: accents, theme (light/dark), headline, logo, fonts, type scale, CTA, overlay darkness. Prompt for macro variants ('create two additional layout variants') to compare cinematic, archive, terminal styles—pick one. Then demand more tweaks ('aggressively increase tweaks') to reach 15+ options. Edit granularly (click elements for color/font/padding/opacity), comment/draw for AI adjustments. Export/share options include HTML, PPT/PDF, team collab, or handoff to Claude Code. Limit resource-hog usage (~$5 extra for full page) by finalizing 90% here.
Animate Subtly with Seedance 2.0 and Handoff Seamlessly
Drag still image to Seedance 2.0 on Higgsfield as starting frame. Prompt simply: 'keep motion extremely slow, clouds barely moving, embers from fire, hands slowly drifting' for 15s 16:9 1080p loop (subtle GIF-like, not chaotic). Iterate 4-5x for perfection; alternatives: Kling 3.0, VO 3.1. Avoid auto-prompt enhancement for control.
Re-upload MP4 to Claude Design: 'swap still image for video in hero background.' Download zip (includes video/code), extract, drop into Claude Code: 'extract files and spin up dev server.' Yields hosted page with animated hero, still fallback, ready for GitHub/Vercel tweaks. Mobile sees still; users rarely linger 15s on hero.