Viktor Oddy walks through building a full animated website with Kimi K3. The workflow blends design sourcing, AI image generation, and K3’s code output into something replicable in a few hours.
Workflow
1. Source design inspiration - Search Pinterest for “3D relief” style. Pin a reference image you like.
2. Generate variations - Drag the Pinterest image into ChatGPT/Figma AI with “create image exactly like this but with a metallic texture.” This gives you two similar-but-distinct images for the hover reveal effect.
3. Get UI reference - Go to motion.design and find a UI layout you like (fonts, element positioning, section structure). Copy the prompt it generates. This is critical: screenshotting a design doesn’t give K3 enough context for fonts, colors, and animations. Motionsites provides structured prompts that do.
4. Build the page with Kimi K3 - Select K3 model, paste the motionsites prompt, upload your two reference images. Request: “build this” + “replace the video in the background with this static image, turn content to dark mode.” K3 generates a complete landing page with liquid glass aesthetics.
5. Add hover reveal effects - Use a reveal-effect prompt (masks transition on hover). Upload to K3 with “in this section, let’s have a mouse hover reveal effect.” K3 generates the CSS hover mask transition.
6. Customise images - Open Chrome inspector on the generated page, copy the image URL, paste into Figma AI / ChatGPT, recreate in the desired style. Re-upload to K3: “replace that image with this one.”
7. Animate assets - Use KlingAI to animate static images with a simple prompt. Upload the resulting video loop as background.
8. Scale to more pages - Prompt K3 for services, pricing, download pages following the established style (liquid glass, same font positioning). K3 generates all pages with consistent aesthetics.
9. Add flair - Ask for parallax effects on overlay images, remove backgrounds from icons, position them as overlays.
10. Build apps too - K3 also generates functional web apps. Demo: a DJ-friendly to-do list app with a clean white theme. Can restyle later by feeding a motionsites app template prompt.
Key techniques
- Source images, don’t draw. Pinterest for inspiration, ChatGPT/Figma AI to generate variations in your chosen style. You’re curating, not designing from scratch.
- Use motionsites for UI structure. Screenshots alone don’t carry enough info for K3 to reproduce fonts, colors, animations. Motionsites provides structured prompts that include all layout details.
- Prompt to extend, not rebuild. After the first section, build additional pages with “use the same styles, fonts, positioning we already established.” K3 maintains consistency across pages.
- Animation via KlingAI. Generate video loops from static images with a simple text prompt, use as background assets.
- Everything is mobile responsive out of the box.
Limitations
- Kimi K3 is slow. The full page generation and restyling process took several minutes per iteration.
- Image assets still need external tools (Figma AI / ChatGPT for generation, KlingAI for animation).
- The workflow works best when you already have a clear visual reference - starting from a blank prompt is less effective.
Related
- Kimi K3 is the best model ever made (sometimes) - broader coverage of K3’s capabilities including UI work
- Designing Claude Code - another perspective on AI + design tooling
Sources
- x.com/viktoroddy/status/2078140696910037002
- Full transcript: kimi-k3-web-design-tutorial