Tubegraph

Planning and preparation before using cursor AI

5 min read

From: gregisenberg

Successfully transforming an idea into code using Cursor AI requires thoughtful planning and preparation [00:00:05]. By adopting best practices, users can save hours of time and establish a solid foundation for their projects [00:00:39]. This approach ensures that the output is more accurate and aligned with the user’s vision [00:02:24].

The “Measure Twice, Cut Once” Strategy

The initial and most crucial step before engaging with Cursor AI is thorough planning [00:02:29]. It’s essential to approach development with a “developer mindset,” even when utilizing AI [00:02:42].

  • Visualize Your Project: Before prompting Cursor, visualize what you intend to build [00:02:48]. This includes having a clear picture of its appearance.
  • Sketching and Wireframing: Create sketches or wireframes using tools like Figma, Paint, or even handwritten notes [00:02:50]. These visuals provide crucial context to the AI model [00:03:01].
    • One example involved drawing a web3 portfolio page on an iPad and uploading it to an AI model to ask for planning and structure advice [00:04:41].
  • AI as a “Rubber Duck”: Utilize AI as a “co-pilot” or a form of “rubber ducking” [00:03:09] [00:05:26]. Explain your thoughts and ideas to the AI; this process can lead to new realizations about the best approach [00:05:38].
  • Using v0 for Visualization: If direct planning with design tools is challenging, start with v0. It helps visualize the potential look of your application or Minimum Viable Product (MVP) [00:06:04].
    • v0 can take a simple text prompt, or even a sketch, and generate a visual representation [00:07:13] [00:08:45].
    • It’s recommended to spend significant time with v0, iterating through 10 to 15 prompts to get the design as close as possible to your vision [00:10:34].
    • The generated code from v0 (often built with ShadCN UI) can then be copied and used as a starting point for Cursor [00:08:12] [00:10:27].
  • Delay Direct Coding: “Step one of being good at Cursor — don’t go on Cursor” [00:10:49]. The coding phase should begin only after the planning and design are clear [00:10:10]. This prevents extensive debugging and re-planning during coding [00:18:22].

Utilizing Cursor Directory

The cursor.directory website provides a critical resource for optimizing Cursor AI’s performance [00:11:17].

  • Pre-defined Prompts: cursor.directory offers prompts tailored for various technologies (e.g., Next.js, Python) [00:11:42]. These prompts include best practices for each technology, helping to combat the AI model’s tendency to pull outdated information [00:12:11].
  • .cursor_rules File: Copy the relevant prompt from cursor.directory and paste it into a file named .cursor_rules at the root of your project [00:12:39] [00:13:08].
    • This file serves as an initial prompt that Cursor reads before any other prompts, informing it about the project’s codebase and desired standards [00:13:37] [00:13:52].
  • Custom Rules: If your specific technology stack isn’t listed, you can copy existing prompts from cursor.directory and use other AI models (like Claude or ChatGPT) to generate a customized .cursor_rules file based on your technologies [00:14:37].

Tagging Documentation

Providing Cursor with specific documentation for the technologies you are using is another key preparation step [00:19:32].

  • Best Source of Truth: Official documentation for any technology is typically the most up-to-date and accurate source of information [00:21:13]. AI models can sometimes rely on outdated information [00:21:07].
  • Adding Docs in Cursor: In Cursor’s composer view, you can add documentation URLs (e.g., nextjs.org/docs) [00:20:31].
    • By adding these “tagged docs,” Cursor gains access to the latest information [00:21:38].
  • Enhanced Debugging and Learning: When facing issues, Cursor can use the tagged documentation to debug problems with the most current information [00:23:17]. This process also serves as a learning opportunity, helping users understand the ecosystem and terminology of the technologies [00:24:01].
  • Context is Key: Providing AI models with as much context as possible, including relevant documentation, aligns the AI with your objectives and helps it perform more effectively [00:25:05].

Leveraging Existing Code and Templates

Starting with pre-existing code structures can significantly expedite the development process and reduce the initial “pain” of building from scratch [00:36:56].

  • Starter Kits: Develop or find a “starter kit” — a template project with common boilerplate code like a landing page, authentication (e.g., Google Auth), database integration, or a dashboard [00:37:12] [00:37:51].
    • This eliminates the need to build the same foundational elements repeatedly [00:37:38].
    • Platforms like Replit are moving towards providing such templates [00:36:37].
  • GitHub Resources: Search GitHub for “Next.js starter template” or “React starter template” and download highly-rated options [00:38:14].
  • Building on Top: Use these templates within Cursor to build on top of established and functional code, rather than starting from a blank canvas [00:38:42]. This is considered the “smartest way of doing things” for serious projects [00:37:01].
  • Duplicating Functionality: If you have existing code that performs a specific function well on one page, provide that code to Cursor and ask it to replicate similar functionality with modifications for another page [00:35:50].

Learning and Understanding

While using AI for coding can seem like a shortcut, these preparation steps are crucial for genuine learning and becoming a more self-sufficient developer [00:33:10]. By understanding patterns and asking the AI to explain its code or concepts, users can expedite their learning process [00:32:06] [00:34:28]. This investment in learning now will be invaluable as AI models continue to evolve exponentially [00:34:04].

Graph View