Beyond Magic Prompts: The Structured Approach to Building Web Apps with AI

Picking up from where we left off! Last time, I talked about giving the LLM detailed requirements to ensure it didn’t miss anything. Now, it’s time for the magic moment—the fun part of using Cursor AI to develop my product.

If you’re reading this for the first time, I’m a non-tech finance guy learning AI to build online web apps. I completely rely on AI code generators and have built a couple of products already: ?? Focus Bell – an Android app ?? SaveScout.app – a web app that analyzes bank statements

This time, I’m building something way more complex—out of my comfort zone—and I’m sharing every step. If you’re like me (zero coding experience but tons of ideas), you can build your own product too. And trust me, the journey is fun. ??

Garbage In, Garbage Out – The Power of Prompt Engineering

One thing I’ve realized: AI is only as smart as the prompts you give it. No matter how powerful a model is, if your input is unclear, your output will be a mess.

This applies to prompt engineering—a skill I’m actively learning. Many people fall into the trap of consuming endless content, jumping from one “magic prompt” to another. But learning without applying is just an illusion. Real progress happens when you try, fail, fix, and repeat.

Building the Markdown File for AI Development

In my previous projects, I faced multiple issues so I pre-empted these issues and want it to be taken care off in this markdown file. Following are some of the issues I pre-empted :

? AI must understand I don’t know coding and am using Cursor AI end-to-end.

? It must reference my finalized database and file structure.

? Tasks must be logically split so I can pause anytime without breaking the flow.

? It should account for the AI’s context window to avoid errors.

? Testing at each phase must be built into the plan.

? Changes must be committed after every major step.

Here’s the prompt I used:

"Now that you have the detailed project design, database designs, and page flow, create a step-by-step Markdown file for development. Keep in mind:

1?? I’m using Cursor AI to generate all the code.

2?? I have no coding experience—this must be beginner-friendly.

3?? This file should ensure the entire project stays in sync.

4?? It will be used alongside the database and project brief.

5?? The project folder will contain these files: ?? Project Brief ?? Database Design ?? Page Flow ?? Markdown Development Plan

6?? Steps must be compartmentalized for easy context resets.

7?? Testing should be built into every logical step.

8?? Every major step should be committed after testing.

9?? Think like a project manager—structure this file for another AI coding agent to follow. Take your time and build it carefully. Also, tell me anything I should know before proceeding."

And—I got my Markdown file! ??

Next, I used this must-ask prompt:

?? "Please explain this file in detail."

Why? Because understanding even a little bit helps a lot when things go sideways.

Setting Up Cursor AI Rules – The Game Changer

Now, onto Cursor Rules—a feature that will save me from past headaches. In Cursor we can pre-define some rules for it to follow, so I went back to ChatGPT and asked it to build me a cursor rule file, here again I pre-empted some issues and wanted it to be taken care off.

Context window is a big issue when it comes to AI coding so this time I have a plan. Why don’t we create a tracking file and in the cursorrules tell cursor that every time you work on the markdown file you will updated what you did in the tracking file. It will solve two issues (hopefully), there is a reference file for the AI coder which knows that what It was doing and what was done previously, and every time I have a new context window I can refer to this file and AI coder will know everything about the project

Here is the prompt I used:

**"I want to create a cursorrules file for my new project. I will give a detailed development plan in the markdown.md file, along with another file containing the database design, website pages, and a detailed project brief. I am looking for cursorrules.

As you know, all AI coding agents have a limited context window, and after a while, they start messing things up. So, I have created a development plan that is sequential and compartmentalized. I want Cursor to follow it and, after fully completing each line of the development plan, mark it as done.

Additionally, it should create a tracking file in which it briefly updates what it did to complete each action from the Markdown file. This way, when the context window is overloaded, I can start a new chat and, in my first prompt, ask it to review the tracking file and the Markdown file to know where to start. This will prevent it from getting overwhelmed and allow it to continue seamlessly."**

And just like that, I got a fully structured rules file. ??

Project Files Ready – Time to Build!

At this point, I had all the essential files ready to roll: ?? Cursor Rules ?? Markdown Development Plan ?? Database Design ?? Site Map ?? Tracking File

Simply create a new project folder, copy these files in And now? The real work begins.

What’s Next? Weekly Updates & Lessons Learned

Now that development is underway, I’ll be sharing weekly updates on: ? Progress made ? Issues faced (and how I fixed them) ? New things I learned

Building with AI as a non-coder is a wild ride—but it’s 100% doable. If you’re on a similar journey, let’s connect! ??

#NoCode #AIWebDevelopment #BuildWithAI #PromptEngineering #LearningByDoing

?