Ramp Network: Visual Explorations
Ramp needed their product to communicate. Not UI documentation. Strategic visual pieces.
12 explorations in 4 days.
The Need
Ramp had functional screens. Good screens. But functional doesn't communicate value. Functional doesn't tell a story.
They needed visual material ready for external communications.
The Output
| Hero explorations | 4 pieces (8-second loops) |
| Supporting explorations | 8 pieces (3-second loops) |
| Timeline | 4 days |
| Format | Web-ready, shareable |
Each exploration takes one product feature and makes it a statement.
Spotlight Gallery
How This Was Made
This isn't Lovable prototyping. It's a multi-model AI workflow that combines design taste with implementation quality.
Two AIs, One Workflow
Gemini Pro 3 handles visual design direction. It's better at creative ideation, brand interpretation, and aesthetic refinement.
Claude Code handles implementation. It writes production-quality React code with precise animation timing and responsive behavior.
Together: design taste + implementation quality.
The AISTUDIO MCP
I use Google's Gemini through the AISTUDIO MCP server, which lets me call Gemini directly from Claude Code.
Example prompt to Gemini:
"I need a balance ticker animation for a fintech app. The brand is premium, confident. The number should feel like it's actively earning. What's the visual approach?"
Gemini returns visual direction. Claude Code implements it. I review, refine, repeat.
This loop—human to AI to human to AI—is faster than either pure manual work or pure AI generation.
The Agent Workflow (Open Source)
I used a structured agent system for this project. Each phase has a specific agent with clear instructions.
The full workflow is available on GitHub:
github.com/charlieellington/visual-motion-design-agents
The Phases
| Phase | What Happens |
|---|---|
| 01 Scene Prep | Extract requirements, define animation goals |
| 02 Build Static | Create base components and layout |
| 03 Animation | Add motion and timing |
| 04 Polish | Refine details, brand alignment |
| 05 Complete | Export and documentation |
Sample Agent Instruction
From 03-animation.md:
You are an animation specialist. Your job is to add motion to the static component from Phase 02.
Animation Principles
- Use spring physics (stiffness: 200-400, damping: 20-30)
- Entry animations: bouncy, not floaty
- Exit animations: quick and clean
- Prefer motion that has purpose over motion that decorates
View full agent instructions on GitHub
Use It Yourself
If you make something with it, I'd love to see.
Continue the Journey
Get weekly UX + Code experiments delivered to your inbox
New newsletter launch
New subscriber bonus: I'll personally review your website or application and send you a 5-minute video with three quick fixes you can implement today.