<< GO BACK

Prototyping “Safe to Spend” with AI

Exploring product logic with AI before implementation in Flutter.
COFOUNDER & PRODUCT DESIGNER · MONDAYCALL
Prototyping, AI-assisted workflow, engineering handoff
2026

About This Project

Two AI-assisted prototypes built through conversational iteration with Claude, not static mockups, but working simulations. One pressure-tests the “Safe to Spend” calculation across edge cases and produces an implementation-agnostic spec for engineering. The other carries that logic into a full interactive app flow, ready to hand off for translation into MondayCall's real Flutter codebase.

Problem

MondayCall's “Safe to Spend” number depends on several deduction rules: credit card debt, upcoming payments, savings goals, that don't have one universally correct calculation. Describing every edge case to my engineering cofounder in a document risked losing precision, and testing the logic directly in Flutter would have been slow and expensive while the rules were still being defined.

Key Drivers

Fast, Cheap Iteration

‍Test every deduction scenario and edge case live, in a medium where a full revision takes one prompt instead of a rebuild.

Engineer-Ready Handoff

‍Turn validated decisions into an implementation-agnostic spec and a Flutter-mappable prototype engineering can build from directly.

Engineering Spec Prototype

Rather than describing the calculation logic to my engineering cofounder in a doc, I used Claude to build an interactive prototype where I could test every deduction scenario live, catching a real double-counting bug in the process, and generate an implementation-agnostic spec engineering could build from directly.

VIEW PROTOTYPE

Mobile App Prototype

A full interactive simulation of the “Safe to Spend” experience inside the app: configuration, spending breakdowns, and category details, all working across languages, themes, and device sizes, not just a single static screen.

VIEW PROTOTYPE

Configure Safe to Spend on the app.

The same calculation logic from the engineering spec, brought into the real app flow. Users choose which categories count against their Safe to Spend, and see the number and chart update immediately.

Other experiences.

Additional screens built from the same underlying data and translation objects: cash-flow periods, category breakdowns, transaction history, and account settings, all supporting live English/Spanish, mobile/tablet, and light/dark switching.

Building specs with Claude.

Every screen was built the same way: describe the behavior in the chat, see it render immediately, and refine until it matched the real product decision. Spacing, component states, and navigation patterns were chosen deliberately to map onto Flutter widgets rather than browser-only tricks.

Skills & Workflow

AI-Assisted Prototyping

Using conversational AI to build working, high-fidelity simulations instead of static mockups.

Business Logic Validation

Testing edge cases and catching real bugs before engineering time is spent.

Engineering Handoff

Producing implementation-agnostic specs ready for engineering to build from.

Bilingual & Themeable Systems

Designing with live English/Spanish and light/dark support built in from the start, not added later.

What's Next

Translating the prototype into Flutter with Claude Code to evaluate whether this workflow can reduce design-to-engineering iteration time and implementation effort.