Designing the Spraycash UI with Kimi K3 in Devin

Description and use

Spraycash now has a cohesive, animated UI with unified design tokens, responsive layouts, and an interactive onboarding tour, enhancing visual consistency and user experience.

Problem

Create a cohesive, animated UI for Spraycash that aligns with brand aesthetics and functional requirements.

Outcome

Spraycash now has a consistent, animated UI with unified design tokens, responsive layouts, and an interactive onboarding tour, improving visual coherence and user experience.

Workflow

• 1. Start from a reference screenshot and prompt Kimi K3 for hero text and imagery.
• 2. Generate background sky‑and‑meadow image and layer cloud and butterfly animations.
• 3. Create SVG ring animation around headline and generate realistic coin, paperclip, sticky note, and PAID stamp images.
• 4. Define three fonts (Instrument Serif, Geist, Geist Mono) and assign roles for headlines, interface, and code.
• 5. Set color palette with warm paper base and single green accent, and apply tokens across screens.
• 6. Establish spacing scale (8,16,24,40,64) and card radius/shadows.
• 7. Redesign navigation: floating pill with logo, links, and Send pay button; move sound toggle to footer.
• 8. Adjust headline wording and ring placement; add subtitle line.
• 9. Fix mobile layout: reposition coins, add naira coin, shrink clouds and butterflies.
• 10. Add Lenis smooth scroll, define motion tokens (durations, easing, entrance effects).
• 11. Implement reduced motion fallback.
• 12. Animate map routes and coins; highlight default city and hover interactions.
• 13. Add interactive tutorial overlay with dimming, green outlines, and navigation controls.
• 14. Update rate card with Chainlink logo, verified badge, countdown ring.
• 15. Structure payslip form into numbered sections with consistent typography.
• 16. Design freelancer screens with reusable card components and receipt styling.
• 17. Iterate and refine based on visual feedback and usability tests.

Evidence

Spraycash's UI was designed and built with Kimi K3 in Devin, one chat message at a time.

Source

Add Lenis smooth scroll, make the animations smooth, and animate the pay routes on the map from the USA and Europe.

Source

The nav bar is too long. You have to fix the nav bar. And also, why have you put that voice icon there? You have to fix all that.

Source