{
  "id": 14329204,
  "title": "Designing the Spraycash UI with Kimi K3 in Devin",
  "url": "https://urgent.news/2026/10/14/designing-the-spraycash-ui-with-kimi-k3-in-devin",
  "topic": "ai",
  "section": "AI",
  "published": "2026-10-14T00:26:11.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ibrahimpima/designing-the-spraycash-ui-with-kimi-k3-in-devin-4l2f"
  },
  "original_language": "en",
  "account": "The Spraycash user interface (UI) was meticulously crafted using Kimi K3 in Devin, with each design element carefully outlined in chat messages. The post delves into various aspects such as the inspiration behind the design, the typography and color schemes, motion effects, and specific prompts used for each change. All prompts are sourced from chat logs, with minor typo corrections applied. The UI design began with a reference image featuring a soft blue sky, a meadow landscape, butterflies, and a hand-drawn circle around one word of the headline, aiming to convey the essence of \"cross-border payments or payroll for the rest of us.\"\n\nTo create the hero text, the goal was to emphasize \"payroll\" while maintaining a catchy and impactful phrase, ensuring it resonates with the target audience. Using the reference image as inspiration, a background photo featuring a sky and meadow was generated for the hero section. The payslip cards were placed atop the hill, accompanied by layered clouds drifting across the sky, each moving at a unique speed and delay to avoid synchronization. A green ring encircling the text \"us all\" was designed as a single SVG path, animating its dash offset from normal to zero upon loading. Realistic objects like coins, a paperclip, a sticky note, and a PAID stamp were rendered as images to achieve realistic lighting and shadow effects.\n\nTypography played a crucial role, with three distinct fonts assigned specific roles: Instrument Serif for headlines and monetary values, Money font employing tabular numbers for consistent width, and Geist for interface elements, codes, and receipt numbers. Geist Mono was utilized for codes and receipt figures, ensuring readability. The color palette was warm and inviting, consisting of background (#faf8f4), cards (#ffffff), text (#16130f), secondary text (#6b655c), lines (#e7e2d9), and primary accent (#0f6b4f). This color scheme was consistently applied across all screens to maintain a cohesive user experience. The spacing scale was standardized at increments of 8, 16, 24, 40, and 64 pixels, with a maximum width of 1080 pixels for content blocks. Cards featured a 14-pixel radius with soft shadows for resting states and deeper shadows for cards in an elevated position.\n\nThe navigation was redesigned to be a floating pill centered on the screen, containing a limited set of links and a prominent \"Send pay\" button. The previous voice icon was removed from the nav bar. The headline was refined from \"Payroll for the rest of the world\" to \"Payroll for the rest of us all,\" with an additional tagline: \"Pay anyone, anywhere, by the second.\" On smaller screens, the coin animation was adjusted to ensure all coins remained visible within the viewport, including the addition of a naira coin alongside other currencies. Clouds were scaled down to 60% and limited to three butterflies to maintain visual balance on mobile devices.\n\nMotion design incorporated smooth scrolling using the Lenis library, with consistent easing curves and durations for various interactions. Micro changes were animated in 80 ms, hovers and presses in 150 ms, while screen entries ranged from 250 to 500 ms. A cubic-bezier(0.22, 1, 0.36, 1) easing curve was applied uniformly across animations for smooth transitions. Reduced motion settings were implemented to accommodate users who prefer minimalistic animations, ensuring stability when scrolling and highlighting map routes. An interactive tutorial was introduced to guide users through each screen, providing contextual explanations and allowing users to skip or replay the tutorial as needed. The payslip form was structured into numbered sections for clarity, utilizing the Instrument Serif font for monetary values and Geist for labels and input placeholders. The receipt design mirrored traditional paper slips, complete with a perforated edge and a PAID stamp.",
  "summary": "Spraycash's UI was designed and built with Kimi K3 in Devin, one chat message at a time. This post walks through the design: where the look came from, the type and colour system, the motion, and the exact prompt behind each change. The prompts are copied from the chat, with only my typos fixed. The reference I started from a screenshot of a landing page I liked: a soft blue sky, a meadow hill,…",
  "key_points": [
    "Spraycash UI designed using Kimi K3 in Devin",
    "Reference image inspired soft blue sky, meadow landscape",
    "Color palette warm with background (#faf8f4), cards (#ffffff)"
  ],
  "editors_take": "Leveraging AI agents for granular UI design shifts the creative process toward prompt-based orchestration, allowing designers to translate abstract visual inspirations into complex, layered digital interfaces.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}