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.