Design · Tip
Animated Skeuomorphic 3D Icon Workflow
Workflow for generating and animating Airbnb-style isometric 3D icons using AI
This tutorial details how to generate cohesive Airbnb-style isometric icons and turn them into short looped animations. It combines a custom Hugging Face LoRA loaded into Flora with Kling for consistent video motion.
How it works
Steps: (1) Download the 'isometric-skeumorphic-3d-bnb' LoRA (a .safetensors file, 89.7 MB) from Hugging Face, trained by @multimodalart. (2) In Flora, use Upload LoRAs (LoRAs become Universal Styles usable with every image and video model), drag in the .safetensors file, set a trigger keyword. (3) Image prompt: 'RBNBICN, icon, white background, isometric perspective' after your subject. Example from the thread: 'a kangaroo on a red desert terrain, RBNBICN, icon, white background, isometric perspective'. (4) Select the style in Flora, then animate in Kling. Kling prompt from the thread: 'Animate the kangaroo in a smooth slow bounce, lifting slightly off the base and gently landing back. Add a soft tail movement for balance and subtle wiggle to the green cactus plants as if reacting to the motion.' Sea-turtle example — image prompt: 'A sea turtle swimming over coral reef, RBNBICN, icon, white background, isometric perspective'; video prompt: 'Animate the sea turtle with a gentle swimming motion, slow flaps of the flippers as it glides in place, while the coral sways slightly as if underwater. Add tiny floating bubbles rising up near the turtle's mouth.'
What it's for
- Generate consistent skeuomorphic 3D illustrations for UI design
- Animate landing page icon assets using Kling video generation
- Apply custom Hugging Face LoRAs as universal styles in Flora
Key points
- Source LoRA: uses multimodalart's isometric-skeumorphic-3d-bnb safetensors file
- Style activation via the specific trigger keyword RBNBICN
- Prompt formula combining subject description with isolation tokens on a white background
- Direct pipeline into Kling for subtle localized animation loops
Pricing
Free
Details
- Type
- Tip
- Category
- Design
- Topic
- AI Workflows
- Open source
- No
- Platforms
- Web
- For
- Motion designers, UI/UX designers, and AI creators
- Tags
- lora, flora, kling, icon design, 3d icons, animation
Why it was saved
- @egeberkina: Shows how to get a consistent icon style with a community LoRA and gives the trigger-prompt formula verbatim.
Related
Two-stage AI workflow for auditing and fixing UI animations across codebases
Recipe for scraping news URLs and rewriting them in your voice using Grok
A fast iOS development workflow combining Perplexity, Cursor, and Xcode
Four-step AI agent pipeline to extract audience insights from YouTube comments
AI-powered web editor for generating editable motion graphics from text prompts.
Browser-based graphic design editor with procedural motion graphics and effects
Updated