Designing the Spraycash UI with Kimi K3 in Devin

Описание и применение

Spraycash получил единый, анимированный UI с унифицированными токенами дизайна, адаптивными макетами и интерактивным обучением, улучшив визуальную согласованность и пользовательский опыт.

Задача

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

Результат

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

Рабочий процесс

• 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.

Доказательства

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

Источник

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

Источник

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.

Источник