Creating no-code apps is easier than ever. Here are my takeaways from using Cursor + Claude + Figma to build an app to track savings goals in Bitcoin terms.
Pt. 1: Product development process
â START WITH DESIGNS. Before saying a word to our friend Claude, I recommend spending time up front to think through your desired pages, information hierarchy, UX flow, and basic designs. In general, prompting with visuals and text will get you closer to your desired end state than text alone. When youâre ready, lay out your screens in Figma, save each as a PNG file, and add them to Cursor so that you can reference them in your initial prompt to the AI.
â WAIT TO WORK ON THE BACKEND. To reduce complexity, start by asking the AI to build out the front end, informing it youâll work on any backend elements later. Just tell it to leave placeholders or use dummy data.
â WORK ITERATIVELY ON BIG CHANGES. The bigger the change, the greater the risk. Claudeâs biggest mistakes seem to come from either lacking context (see âContext is kingâ) or trying to be too helpful (e.g., adding features you didnât ask for). Do less, Claude. Give the AI a shorter leash. If you want to allow users to update the icon associated with an expense, you might give it the following prompts in succession: create the âUpdate iconâ button, link it to an empty âIcon Libraryâ page, layout the icons in a grid with a âSave buttonâ, and â finally â update the icon across the app when a user clicks âSaveâ.
â BONUS: DON'T TRY TO USE VOICE. I saw a post on X that made the a voice + AI workflow look effortless. As a result, I spent $20 on a license for this dictation software. In practice, it doesnât work well. Given the time it takes to turn your voice to text, youâre better off typing short instructions. For longer instructions, specificity is super important â as youâll see below. Talking at your computer â precise prompting.
