3 Steps To Build ANY App with AI (ask, plan, agent)

Key Concepts

• Cursor AI: An AI-powered application development platform.
• Agent Mode: A mode in Cursor AI where the AI automatically executes tasks and makes changes.
• Ask Mode: A mode in Cursor AI for providing context, asking questions, and gathering information from the AI.
• Plan Mode: A mode in Cursor AI for creating a structured, step-by-step plan for the AI to follow.
• Workflow: A sequence of steps or actions to achieve a specific outcome.
• Tailwind CSS: A utility-first CSS framework.
• Overlay: A visual element that appears on top of other content.
• Opacity: The degree to which something is transparent.
• Vibe Coding: A term used in the transcript to refer to coding or developing applications.
• Markdown (.md): A lightweight markup language used for formatting text, often used by AI for plans and documentation.

Effective Workflow in Cursor AI: Ask, Plan, Execute

This video demonstrates a highly effective workflow within Cursor AI for building or fixing application features, emphasizing a structured approach over directly jumping into agent mode. The presenter, Corbin, highlights how this method leads to better code and a deeper understanding of the development process.

1. The Problem: Broken Overlays After Tailwind CSS Upgrade

The core issue addressed is a bug in the presenter's application where UI overlays lost their opacity after upgrading Tailwind CSS from version 3 to version 4. Specifically, when attempting to delete an element (like a hat on a thumbnail), the entire overlay background turned black and lost its intended transparency, obscuring the underlying content. This is a common scenario when integrating third-party libraries or updating dependencies, where new versions might introduce breaking changes.

2. The Incorrect Approach: Direct Agent Mode

The presenter advises against immediately entering "agent mode" with a vague request like "build out my landing page" or "fix this bug." This direct approach, without proper context or planning, is deemed ineffective and leads to suboptimal results.

3. The Recommended Workflow: Ask, Plan, Execute

The video outlines a three-step workflow:

Step 1: Ask Mode - Providing Context and Gathering Information

• Purpose: To give the AI detailed information about the problem or desired feature and to understand the AI's initial analysis.
• Process:
  • Screenshotting: The presenter starts by taking a screenshot of the problematic UI element to visually represent the issue.
  • Inputting Information: In "ask mode," the user provides context. This can be a specific explanation of the cause (e.g., "this happened when I upgraded the tailwind CSS from V3 to V4") or a general observation of the symptom (e.g., "I noticed now the pop-ups have no opacity").
  • Model Selection: The presenter mentions using "composer one" as the AI model, suggesting that different models might be suitable for different tasks.
  • Reviewing AI Output: The user is instructed to read the AI's response, even if just skimming. The AI will typically identify relevant files, explain the issue, and often provide a summary of changes.
• Example: The AI identifies that "mono overlays" are the critical files affected and that the opacity is not being rendered correctly after the Tailwind CSS update. It might suggest that the main issue is with the "mono overlays" after updating them.
• Key Takeaway: This step is about establishing a clear understanding of the problem and the AI's initial diagnosis.

Step 2: Plan Mode - Structuring the Solution

• Purpose: To create a detailed, step-by-step plan for the AI to follow, ensuring clarity and precision. This is crucial for complex tasks.
• Process:
  • Transitioning from Ask: After receiving information in "ask mode," the user switches to "plan mode."
  • Creating a Plan: The user prompts the AI to create a plan. The AI will then generate a structured list of tasks, often in a Markdown (.md) format.
  • Reviewing and Refining the Plan: The user reviews the generated plan. If it's confusing, they can ask the AI to "explain this to me like I'm 10 years old."
  • Adding Specificity: The presenter emphasizes that robots (AI) thrive on clear, numbered instructions. The plan should be unambiguous, detailing specific actions and files.
  • Adding To-Dos: Users can add their own "to-dos" to the plan to further refine it.
• Example: The AI might generate a plan that includes steps like: "1. Locate the CSS file responsible for the overlay styling. 2. Adjust the opacity property for the overlay element. 3. Test the changes to ensure correct transparency."
• Key Takeaway: Plan mode transforms the AI's understanding into a concrete, actionable roadmap, preventing ambiguity and improving the quality of the generated code. The Markdown format is used as a document for the AI to reference, not as executable code itself.

Step 3: Execute (Agent Mode) - Implementing the Plan

• Purpose: To have the AI automatically implement the steps outlined in the plan.
• Process:
  • Initiating Build: Once the plan is satisfactory, the user hits "build," which transitions them into "agent mode."
  • Methodical Execution: The AI then systematically executes each step of the plan.
  • Contextual Awareness: The AI retains the context of the original plan, ensuring that the changes are made with the intended goal in mind.
  • Reviewing Changes: After execution, the AI will show all the relevant files that were modified.
• Verification: The presenter then tests the fix by re-uploading the thumbnail and adding a hat. The overlay now displays correctly with proper opacity.
• Key Takeaway: This is where the AI translates the plan into actual code changes, leveraging the structured input for accurate implementation.

4. Learning and Iteration: Using Developer Jargon

• Importance of Specificity: The presenter stresses the importance of using precise developer terminology. If the user doesn't know the correct term for an element (e.g., "overlay"), they can ask the AI in "ask mode" to clarify.
• Analogy: Using the correct jargon is compared to using a sniper rifle for precision rather than a shotgun for a broad, less effective impact. This ensures the AI understands the exact intent.
• Example: Instead of saying "the color looks a little not there's no opacity," a more precise developer term like "overlay opacity" should be used.

5. Conclusion and Key Takeaways

The video concludes by emphasizing that this "Ask, Plan, Execute" workflow is a fundamental and powerful method for using AI development tools like Cursor AI. It's applicable to any type of application development or bug fixing. The core message is that by providing clear context, structuring the solution with a plan, and then executing, users can achieve better results, write higher-quality code, and learn more effectively during the development process. The presenter reiterates that "I don't care what you're building. We can build it now" with this methodology.