90-Minute Claude Workshop: Prototype to Code
Situation
3 UX people from Agency EVE (including myself) joined developers from Twin Suns on a Google Meet for a 90-minute workshop. We started with basic Figma mockups of a medspa booking flow and wanted to see what we could execute in code using Claude AI within the time limit.
Task
Convert Figma prototype into a functional React booking component in 90 minutes using Claude, with real-time collaboration between UX and development teams.
Action
Initial Prompt (15 mins): "You are an expert at software development, UX and Figma. Help us build a new product for this workshop..."
Claude generated a working React component. UX team provided design feedback while developers assessed code structure and began integrating into Ruby on Rails in parallel.
Iterative Development (60 mins) - Cross-team requests:
"Add more specialists" → Generated 100+ staff profiles
"Give me 12 months calendar" → Built full year navigation
"Add gender filters for specialists" → Added filtering system
"Make the design look more 2026" → Added glassmorphism effects and modern styling
Advanced Features (15 mins): Asked "What's the best pattern for selecting 100+ items?" Claude provided UX analysis and implemented search-first pattern with natural language processing.
Key Collaboration Pattern: UX provided design direction, developers evaluated technical feasibility in real-time, with continuous screen sharing for immediate feedback.
Result
Delivered:
Fully functional 4-step booking component
Support for 3 industries (medical, wellness, beauty)
Advanced search with 100+ treatments/specialists
Modern responsive design with glassmorphism effects
Calendar navigation with 12 months of data
Key Outcomes:
Speed: 130x faster than traditional development
Quality: Production-ready code that Twin Suns developers successfully integrated into Rails during the workshop
Collaboration: Established effective UX-Dev-AI workflow with real-time feedback loops
Scope: Exceeded expectations for 90-minute timeframe
Workshop Learnings:
Cross-team input significantly improves AI outputs
Screen sharing enables immediate feedback and iteration
High-level design direction ("2026 aesthetic") works better than detailed specs
Single person driving Claude with team input shapes better direction
Claude excels at incremental feature building when guided by collaborative feedback
The workshop demonstrated that cross-team collaboration enhances AI-assisted development, creating deployable code through effective real-time communication between UX and development teams.
