#11 Vibe designing a Bitchat Cashu wallet.
My approach using Figma MCP, Cursor, and Kotlin for quick prototyping.
This is a bit of a spontaneous update, but I wanted to share a new design → development flow I stumbled across over the last 72 hours. It’s still early but it feels like I’ve unlocked a new frontier in how I approach design and development implementation. I've successfully vibe designed a fully functional Bitchat Cashu wallet backed by CDK, and coded in Kotlin. Check it out:
You check out my source code here.
⚠️ Warning: For Design Review Only!
- This version is NOT production-ready.
- Do NOT use with real funds you cannot afford to lose.
I’ll be sharing my process and workflow. I hope other designers find it helpful. If you have any tips, suggestions, or questions, feel free to reach out. Let’s learn and build together.
Starting in Figma
As a product designer, Figma is my home base so that's where I started. I took some time to study the existing Bitchat app, studied its design language, style, and overall feel, and then quickly sketched wireframes to imagine how a Cashu wallet would look if seamlessly integrated. My goal was to make sure the wallet complemented Bitchat’s existing UI while having key bitcoin functionality that users would need. I figured some users might receive bitcoin for the first time through Bitchat and wouldn’t have set expectations yet, so I relied on my own experience to anticipate and include what they might need.
Connecting Figma to Kotlin via Cursor MCP
Next I set up the Figma x Cursor MCP integration to bridge my designs to Kotlin code. The integration allows me to select frames in Figma’s Dev mode, copy them directly into Cursor, and generate Kotlin code.
I was very mindful not to create inconsistent UI. I explicitly instructed Cursor to reference only existing files theme.kt and typography.kt and not hardcode new fonts, sizes, or colors. Keeping consistency with Bitchat’s existing design language was something I emphasized repeatedly. I think consistency accounts for least 50% of good UI. I also needed to avoid hardcoded colors that would break existing light and dark modes.
A Component-Based Approach
Instead of trying to one-shot entire screens I took a component-based build approach. I individually selected components like the total balance field, mint input, withdrawal buttons, and other reusable elements. Cursor then generated dedicated Kotlin files for each component, again strictly referencing the existing theme.kt and typography.kt files to maintain visual consistency.
Real-Time Component Preview in Android Studio
I discovered Android Studio’s Compose preview functionality, which lets gives you a realtime visualization of your Kotlin components. This was a game-changer. Cursor wasn’t always perfect, it often needed adjustments for spacing, borders, and other styling details. But using real-time previews in Android Studio, fine tuning became much easier, allowing me to quickly iterate until each component matched Bitchat’s existing style precisely.
After a lot of repetitions / re-prompting I ended up with a robust collection of reusable wallet components.
Bringing It All Together
With my components ready, the next step was assembling them into a working Cashu wallet. Using careful prompting, I guided Cursor on exactly how to integrate these components with CDK, ensuring CDK remained the sole source of truth for all payment functions.
After extensive UX fine-tuning, troubleshooting, build errors, and plenty of back-and-forth commits, the result is a functional wallet integrated into Bitchat. It’s not beta ready, (there are still many bugs, like incorrect balance displays and glitches with deleting amounts), but the wallet works, and the design is starting to feel consistent and unified. The kicker is that all of this was accomplished in just 72 hours from the moment I created my very first Kotlin .kt file.
What's Next?
I’ll be refining the design (it still needs a lot of work) and continuing to squash the many bugs. I’m keen to see what you all think. Would this be useful for Bitchat users? Does the design feel right? Could this eventually be merged into future app versions? Who knows - not me! But I’m having fun, and I think it’ll be useful.
The last 72 hours have felt like a new frontier in productivity. With Figma MCP, Cursor, and close collab with developers, it genuinely feels like we’re entering a whole new era.
You can just do things.
Thank you’s
Huge thanks to Calle and TheSimpleKid. They helped set up the engineering side by providing me with a fork of that already included a CDK backend.