Designer at Ramp: Advanced AI Design Process
A tutorial by George Visan & Jay Dalal. Featured in the OTF curated resource library.
Ramp's Design Culture
Ramp's design team operates differently from most fintech companies. Instead of the traditional handoff model (designer creates Figma mockup → engineer implements), Ramp's designers are expected to ship code. Not all of them write code from scratch, but all of them can use AI tools to go from design concept to working implementation.
This culture shift started organically: one designer used Cursor to prototype a dashboard redesign and presented working code instead of mockups. The reaction from engineering was overwhelmingly positive — the prototype was closer to the final product than any Figma handoff had ever been. Within months, the entire design team adopted AI-assisted prototyping.
The key enabler: Ramp's design system is well-documented and coded. When designers reference components in their AI prompts, the AI generates code using Ramp's actual component library, not generic HTML.
AI in the Design Loop
Ramp's design process integrates AI at three specific points.
Exploration: AI-generated prototypes
During the exploration phase, designers use Cursor or Claude Code to generate 3-4 different approaches in working code. Each prototype uses Ramp's design system components and real (anonymized) data. This replaces the traditional Figma wireframing phase for most projects.
Validation: Interactive user testing
Working prototypes go directly to user testing. Real interactions, real data, real responsiveness. The quality of feedback improves dramatically when users interact with functional interfaces rather than clickable mockups.
Refinement: Designer-led code polish
After user testing, designers refine the prototype directly in code — adjusting spacing, animations, and micro-interactions. Engineers then take the designer's code, add business logic, and prepare it for production.
Real Workflow Examples
Dashboard Redesign
A designer prototyped 4 dashboard layouts in one afternoon using Cursor. User testing picked the winner. The final production code retained 70% of the designer's prototype code with engineering additions for data fetching and error handling.
Onboarding Flow
The onboarding redesign went from concept to user testing in 2 days. The designer built the entire multi-step flow with AI assistance, including form validation and progress indicators. Previously, this would have taken 2 weeks of design + engineering.
Component Variants
When the design system needed new button variants, the designer created them in code using AI, tested across themes and states, and submitted a PR directly to the design system repository.
Team Adoption Strategies
Ramp's approach to team adoption was deliberate:
Start with volunteers. Don't mandate AI tool adoption. Find the 2-3 designers most curious about code and support their experimentation. Their success stories become the best advocacy.
Pair with engineers initially. The first month, designers worked alongside engineers who could answer 'why did the AI do this?' questions. This built confidence faster than tutorials.
Celebrate shipped code. When a designer's AI-assisted code reaches production, celebrate it publicly. This normalizes the practice and encourages others.
Don't require perfection. Designer-written code doesn't need to be production-perfect. Engineers refine it. The value is in the design fidelity, not the code quality.
