Observations: Coding with AI

Here's a framework for effectively using AI-IDE's and assistants in your development workflow.

Step 1: First, Set Up Your AI Assistant

The quality of your AI interactions depends heavily on how you configure and communicate with your assistant, after downloading an AI-IDE, start by creating a clear system prompt file that defines the rules of engagement. You can do this in settings, markdown or HTML.

System Prompt Template

This System Prompt or "Rules for AI" file could incorporate these key messages:

You are an expert AI programming assistant that primarily focuses on producing clear Javascript and Next.js projects, you are familiar with the latest features, documentation and best practices.
 
You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.
 
- Follow the user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
- Focus on readability over being performant.
- Complete requirements in a minimal way, do not over develop features.
- Fully implement all requested functionality.
- Leave NO todo's, placeholders or missing pieces.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.
- If sending code updates, always send the full updated file after reading it first, make sure to include all of the previous existing features. 
- Keep the solutions and architecture simple and straightforward.
- Maintain and update a detailed documentation file after each session that captures all of the decisions made and the reasoning behind them located at the root of the project.
- After each response, explain the changes you made and why to educate the user on your progress and provide learning opportunities.
- If you are unsure of the answer, ask the user for clarification.

Step 2: Project Planning

The most critical phase is planning. A well-structured PRD (Product Requirements Document) serves as your project's foundation and reference point.

Creating Your PRD

Use this prompt to generate a comprehensive project plan:

Your job is to create a detailed PRD explaining how to build this project, read through every step, understand how these features / components work together. Think through ALL edge cases and potential errors that could be introduced when building this. Include instructions to add detailed error checks, comments and logging. Include sample code. Ensure you explain how every section of this feature works going into macro detail. Break these down into detailed numbered steps and phases. Make sure to define the ultimate goal of the project and the ultimate of the user.

Store this PRD in your codebase and reference it throughout development to maintain consistency. You can ask your AI agent to reference the PRD in its responses and work.

Step 3: Development Workflow

Break your project into small, manageable pieces or phases defined by the PRD. Each component should be:

• Independent and isolatable: Components should work in isolation to simplify testing and debugging
• Testable on its own: Write components that can be validated independently
• Well-documented: Include clear documentation about dependencies and usage

Track your progress automatically with the AI:

1. Document each completed feature: Write clear documentation about what was built and why certain decisions were made. This helps maintain context as the project grows.

2. Keep a list of pending items: Maintain an active backlog of features, improvements, and known issues. This helps prioritize work and ensures nothing gets forgotten.

3. Generate documentation as you build: Don't wait until the end to document. Create documentation alongside your code to capture your thought process and implementation details while they're fresh.

Step 4: Debugging Process

When encountering issues, follow these steps:

1. Have the AI explain potential causes or reflect upon itself: Ask the AI to analyze the error messages and code context. Often, it can spot patterns that aren't immediately obvious.

2. Get a detailed problem analysis: Have the AI break down the issue into its component parts. Understanding the problem thoroughly is crucial for finding the right solution. Sometimes, using a reasoning model such as o1 can be very effective

3. Create a clear action plan: Work with the AI to develop a step-by-step plan for resolving the issue. This should include specific code changes and testing steps.

4. Test systematically: Implement the changes one at a time, testing at each step to ensure the fix doesn't introduce new problems.

Step 5: Communication Optimization

For efficient interaction, use a hotkey response system:

J) First option (usually "proceed" or "yes")
K) Second option (usually "modify" or "adjust")
L) Third option (usually "cancel" or "no")

Tools

For a detailed overview of AI-IDE's I use, check out my article on A List of AI Coding Tools.