Skip to main content

Code Plan

Best practice tips for using Cursor AI / AI Coding Tools to code up an app.

v0 Design​

The key is spending ample time in the planning and visualization phase with V0 before moving to Cursor. V0 excels at UI design while Cursor excels at implementing the functionality. By leveraging each tool's strengths, you'll build apps faster and easier.

  1. Use V0 for planning and visualizing your app before jumping into coding with Cursor AI. Draw sketches or wireframes of what you want to build first, either using Figma, Paint, pencil and paper, or other tools.
  2. Take a screenshot or image of your sketch/wireframe and upload it to V0. Then provide a prompt describing the app you want to build based on that wireframe. For example: "I want to build a clean looking marketplace website for bicycle sellers. Refer to the wireframe uploaded."
  3. Keep prompting V0 and iterating on the design it generates. You can get specific with your prompts to refine the UI, such as: "Move the search bar to the right."
  4. Aim to prompt V0 at least 10-15 times to get the design as close as possible to your initial vision. V0 is very capable of generating nice looking UIs.
  5. Once you have a high-fidelity mock-up in V0 that matches your plan, copy the generated code and paste it into Cursor AI. This gives Cursor a great starting point to build on top of, which is where it shines.

Resources:

AI Coding​

Provide Cursor with context about your app, upfront leverage prompt files, carefully review its output, and focus on using it for its strengths like UI development and code editing. With practice, Cursor can make you a significantly faster developer.

  1. Plan out your app before jumping into Cursor AI. Draw sketches or wireframes of what you want to build to give the AI more context. Use tools like Figma, Paint, or even pencil and paper to visualize your app first.
  2. Use Cursor's directory feature to find pre-written prompts for the technologies you're using (e.g. Next.js, React, Python). Copy these prompts into a cursor.rules file in your project to set up Cursor with best practices for those technologies.
  3. When you get stuck, copy the code causing issues along with Cursor's attempted solutions and paste it into another AI model like Claude or GPT-4. Provide the error details and desired output to get better solutions.
  4. Add comments to your code explaining what it does. You can ask Cursor to generate these comments to make your code more understandable.
  5. Create prompt files (e.g. ui-guidelines.md) that contain instructions you commonly give Cursor. Reference these files when making requests, e.g. "Create a table following the guidelines in ui-guidelines.md".
  6. Carefully review every line of code Cursor generates before accepting the changes. Don't blindly accept its suggestions, as it can sometimes produce suboptimal or incorrect code.
  7. Prompt Cursor to ask you clarifying questions by ending your instructions with something like "Ask any questions you have to make the instructions clearer". Its code will be better if you answer those follow-up questions.
  8. Use Cursor for tasks it excels at - building UIs, refactoring code, editing code snippets, and auto-completing code. Avoid relying on it too much for very complex logic or integrating bleeding-edge packages.

Resources: