Prompting with CodinIT.dev

Most people think prompting is just typing a request into AI and hoping for the best. Wrong.

The difference between getting a mediocre response and having AI build entire workflows for you comes down to how you prompt. Whether you're a developer or a non-technical user, mastering prompt engineering can help you:

Automate repetitive tasks
Debug faster with AI-generated solutions
Build and optimize workflows effortlessly

And the best part? You don't need to be an expert. With the right prompting techniques, you can unlock AI's full potential in CodinIT, make.com, and n8n—without wasting time on trial and error.

TL;DR

Effective prompting matters: Structure your prompts to save hours of troubleshooting
Meta prompting: Use AI itself to refine your prompts for better accuracy
Reverse meta prompting: Save debugging sessions to optimize future requests
Automation tools: Extend CodinIT's capabilities with APIs using make.com and n8n
Chat mode vs. default mode: When to use each for debugging and iteration
Handling webhooks: Automate CodinIT applications with powerful integrations

Why Prompting Is Critical for AI Development

Understanding the AI's "Mindset"

AI models, including those powering CodinIT, do not "understand" in a human way—they predict responses based on patterns. To guide them effectively:

Be explicit: Instead of "build a login page," specify "create a login page using React, with email/password authentication and JWT handling"
Set constraints: If you need a specific tech stack (e.g., Supabase for authentication), state it clearly
Use formatting tricks: AI prioritizes the beginning and end of prompts—put important details upfront

Mastering Prompting: The Four Levels

1. Training Wheels Prompting

A structured, labeled approach for clear AI instructions:

# Context
## Task
### Guidelines
#### Constraints

Example:

You are a world-class prompt engineer. Write me a prompt that will generate a full-stack app taking an input of name, number, and company, and generate a company report.

2. No Training Wheels

More conversational prompts while maintaining clarity.

3. Meta Prompting

Leverage AI to refine your prompts:

Rewrite this prompt to be more concise and detailed: 'Create a secure login page in React using Supabase, ensuring role-based authentication.'

4. Reverse Meta Prompting

When debugging, have AI document the process for future use:

Summarize the errors we encountered while setting up JWT authentication and how they were resolved. Create a detailed prompt I can use next time.

Prompt Library

Starting a New Project

Use this proven structure for starting a new project:

Start with "I need a [type] application with:"
- Elaborate on tech stack - including Frontend, styling, Authorization and Database
- Elaborate on core features including main and secondary features
- Then direct the AI to start somewhere like: "Start with the main page containing: [Detailed page requirements]"

Recommendation: Begin with a blank project and gradually build upon it. This approach allows the AI to grasp fundamental concepts effectively before delving into specifics.

Diff & Select

Whenever you request CodinIT to implement a particular change in any file, provide clear instructions to ensure the AI only updates relevant files:

Implement modifications to the feature while ensuring core functionality, other features, and processes remain unaffected. Evaluate its behavior and dependencies to identify potential risks, and discuss any concerns before moving forward. Conduct thorough testing to verify there are no regressions or unintended consequences, and highlight any out-of-scope changes for review. Exercise caution—take a moment to pause if uncertain.

Lock Files

CodinIT currently lacks a built-in file locking system. Guide the AI with this instruction:

Please refrain from altering pages X or Y and focus changes solely on page Z.

For delicate updates:

This update is quite delicate and requires utmost precision. Carefully examine all dependencies and potential impacts before implementing any changes, and test systematically to guarantee nothing is disrupted. Steer clear of shortcuts or assumptions—take a moment to seek clarification if you're unsure. Precision is crucial.

Design Prompts

UI Changes

Make solely visual enhancements—ensure functionality and logic remain unaffected. Gain a comprehensive understanding of how the existing UI interacts with the app, ensuring that logic, state management, and APIs stay intact. Conduct extensive testing to verify that the app operates precisely as it did before. Cease all actions if there is any uncertainty regarding potential unintended consequences.

Mobile Optimization

Enhance the app's mobile experience while preserving its existing design and functionality. Assess the layout and responsiveness to pinpoint essential modifications for smaller screens and touch inputs. Develop a comprehensive plan before making any code changes, and conduct thorough testing across various devices to guarantee the app operates as intended. If uncertain, take a moment to consider and suggest potential solutions.

Responsiveness and Breakpoints

Make certain that all designs are completely responsive at every breakpoint, adopting a mobile-first strategy. Apply contemporary UI/UX best practices to define how components should adjust for varying screen sizes, utilizing ShadCN and Tailwind's standard breakpoints. Steer clear of custom breakpoints unless specifically requested.

Before editing any code, create a phased plan for implementing responsiveness. Start with the largest layout components and progressively refine down to smaller elements and individual components. Ensure the plan includes clear steps for testing responsiveness across all breakpoints to maintain consistency and a seamless user experience. Share the plan for review before proceeding.

Knowledge Base Setup

Creating a solid framework for AI ensures it operates effectively. Incorporate these elements within your project:

Project Requirements Document (PRD)

Introduction
App flow
Core features
Tech stack
In-scope vs out-of-scope items

Application Flow

Users begin their experience on the landing page, where they can click the sign-up button to register with Google, subsequently accessing the dashboard. The dashboard comprises X sections.

Tech Stack

Frontend Tech Stack
Backend Tech Stack
API Integrations
Deployment Instructions
Open-source libraries

Frontend Guidelines

Design Principles
Styling Guidelines
Page Layout
Navigation Structure
Color Palettes
Typography

Backend Structure

Backend Tech (e.g., Supabase)
User Authentication
Database Architecture
Storage buckets
API Endpoints
Security measures
Hosting Solutions

Key Prompt:

Before you write any code, please review the Knowledge Base and share your understanding of my project.

Mobile-First Development

A great prompt shared by a Champion on Discord:

Always make things responsive on all breakpoints, with a focus on mobile first.
Use modern UI/UX best practices for determining how breakpoints should change the components.
Use shadcn and tailwind built in breakpoints instead of anything custom, unless the user prompts for custom breakpoints directly.
Optimize the app for mobile without changing its design or functionality. Analyze the layout and responsiveness to identify necessary adjustments for smaller screens and touch interactions. Outline a detailed plan before editing any code, and test thoroughly across devices to ensure the app behaves exactly as it does now. Pause and propose solutions if unsure.

Best Practices

Be Specific and Detailed

Instead of: "move the button to the right"

Try: "in the top header, shift the sign-up button to the left side of the page, ensuring the styling remains consistent"

Key Guidelines Template

Key Guidelines: Approach problems systematically and articulate your reasoning for intricate issues. Decompose extensive tasks into manageable parts and seek clarification when necessary. While providing feedback, elucidate your thought process and point out both challenges and potential improvements.

Step-by-Step Approach

Start with Front design, page by page, section by section
Plug backend using Supabase as CodinIT integration is natively built
Refine the UX/UI if needed

Important: Avoid assigning five tasks to CodinIT simultaneously! This step-by-step process enables AI to concentrate on one task at a time.

Component Management

Regularly refer to our filesExplainer.md document to ensure we accurately record changes in code and components, keeping our file structure organized and up to date.

Refactoring Prompts

Standard Refactoring

Refactor this file while ensuring that the user interface and functionality remain unchanged—everything should appear and operate identically. Prioritize enhancing the structure and maintainability of the code. Carefully document the existing functionality, confirm that testing protocols are established, and implement changes gradually to prevent risks or regressions. If you are uncertain at any point, pause the process.

Refactoring Planning

Develop a comprehensive plan to refactor this file while keeping the user interface and functionality entirely intact. Concentrate on enhancing the code's structure, readability, and maintainability. Start by meticulously documenting the existing functionality and pinpointing potential areas for enhancement. Implement rigorous testing protocols to ensure consistent behavior throughout the entire process. Move forward incrementally, minimizing risks and avoiding regressions, and take breaks for clarification whenever uncertainties emerge.

Comprehensive Refactoring

Develop a comprehensive plan for a site-wide codebase review aimed at identifying segments that would benefit from refactoring. Concentrate on highlighting areas where the code structure, readability, or maintainability can be enhanced, ensuring the user interface and functionality remain unchanged. Rank the most essential files or components based on their significance and usage frequency. Thoroughly document your findings, detailing suggested improvements and the potential effects of each change. Ensure that any proposed refactoring efforts are incremental, low-risk, and supported by rigorous testing to prevent regressions. Circulate the plan for feedback prior to implementation.

Codebase Structure Audit

Perform a comprehensive regression and audit of the codebase to determine if its architecture is clean, modular, and optimized. Identify any files, components, or logic that are mislocated, not correctly placed, or could benefit from enhanced organization or modularity. Evaluate whether the separation of concerns is distinct and if functionality is aggregated logically and efficiently. Deliver a detailed report outlining improvement areas, such as files that need restructuring, overly coupled code, or chances to simplify and streamline the organization. Break down the actionable enhancements into manageable steps, arranged in the order you deem most effective for implementation. Ensure the analysis is comprehensive, actionable, and adheres to best practices for a maintainable and clean codebase. Refrain from editing any code.

Stripe Integration

Initiate a Stripe connection in test mode using the configuration detailed below: Utilize the specified product and pricing details: Product IDs are [Your Product IDs], with a pricing model of [One-time or Subscription]. Set the webhook endpoint to [Your Webhook Endpoint]. Style the frontend payment form as follows: [Describe desired payment form or provide an example]. Upon successful payment, redirect users to [Success Redirect URL], and for canceled payments, redirect them to [Cancel Redirect URL]. Please refrain from altering any code, and ensure that I have included all necessary information to effectively start with Stripe.

Security Note: Use your Stripe Secret Key and Webhook Signing Secret securely in the Supabase Edge Function Secrets and avoid including them in the prompt.

Debugging in CodinIT

Chat Mode vs. Default Mode

Default Mode: High-level feature creation
Chat Mode: Troubleshooting—ask AI to analyze errors before making changes

Effective Error Handling

Check browser developer tools (Console logs, Network requests)
Use reasoning models (e.g., GPT-4 Turbo, DeepSeek, Mistral) for debugging
Feed errors into AI for deeper analysis

Debugging Prompts

Initial Investigation

The same error continues to occur. Take a moment to perform a preliminary investigation to uncover the root cause. Examine logs, workflows, and dependencies to gain insight into the problem. Avoid making any changes until you fully grasp the situation and can suggest an initial solution informed by your analysis.

Deep Analysis

The issue persists without resolution. Perform a thorough analysis of the flow and dependencies, halting all modifications until the root cause is identified with complete certainty. Record the failures, the reasons behind them, and any observed patterns or anomalies in behavior. Avoid speculation—ensure your findings are detailed and complete before suggesting any solutions.

Full System Review

This is a pressing issue that necessitates a thorough re-evaluation of the entire system. Halting all edits, begin by outlining the flow systematically—covering authentication, database interactions, integrations, state management, and redirects. Evaluate each component individually to pinpoint failures and their causes. Deliver a comprehensive analysis to validate the problem before proceeding further.

Comprehensive Audit

The problem continues and now calls for a comprehensive, system-wide audit. Take a step back and carefully map the entire system flow, examining all interactions, logs, and dependencies. Generate a clear and detailed report outlining expected behaviors, current realities, and any discrepancies. Refrain from suggesting or modifying any code until you have accurate, evidence-based insights.

Explaining Errors

Explain the meaning of this error, its origins, and the logical sequence that led to its occurrence. Offer a concise breakdown of the problem and its possible underlying cause. Avoid making any edits to the code at this stage, and don't be concerned with the current page we're on.

Advanced Debugging Strategy

DON'T GIVE ME HIGH-LEVEL STUFF. IF I ASK FOR A FIX OR AN EXPLANATION, I WANT ACTUAL CODE OR A CLEAR EXPLANATION! I DON'T WANT "Here's how you can..." Keep it casual unless I specify otherwise. Be concise and suggest solutions I might not have considered—anticipate my needs. Treat me like an expert. Be accurate and thorough, and provide the answer right away.

Debugging Flow

Task Identification – Prioritize issues based on impact
Internal Review – Validate solutions before deploying
Reporting Issues – Clearly define current vs. expected behavior
Validation – Verify changes render correctly in the DOM
Breakpoints – Isolate and test specific components
Error Handling & Logging – Use verbose logging and debug incrementally
Code Audit – Document issues and proposed fixes before making changes
Use the 'Try to Fix' Button – Automatically detects and resolves errors in CodinIT
Leverage Visuals – Upload screenshots to clarify UI-based errors
Revert to Stable Version – Use the 'Revert' button to go back if needed

Writing Better Prompts to Avoid Errors

Use this best practice format:

Project Overview – Describe what you're building
Page Structure – List key pages and components
Navigation Logic – Explain user movement through the app
Screenshots/Wireframes – Provide visuals if available
Implementation Order – Follow a logical sequence

Automation with make.com and n8n

When to Use Automation

Edge Functions: Direct Supabase API calls
make.com: Integrating external services (Slack, Stripe, CRM tools)
n8n: Self-hosted, scalable automation

Example: Automating a Dental Consultation App

Create a landing page in CodinIT with a form for dental issues
Send data to make.com via Webhooks
Use an AI API (e.g., Perplexity AI) for live research
Determine eligibility using Mistral or GPT-4 reasoning models
Return a response to CodinIT with recommended next steps

Webhooks and API Calls: Advanced Use Cases

Validate responses: Ensure correct processing of webhook responses
Test incrementally: Send minimal data first before building complex API workflows
Use reasoning models: Debug errors by asking AI to analyze incorrect responses

Conclusion

Mastering prompt engineering isn't just about better AI interactions—it's about boosting efficiency, reducing development cycles, and unlocking new automation possibilities. Whether you're debugging existing workflows, optimizing AI outputs, or integrating complex automations, structured prompting helps you get there faster and with fewer headaches.

Focus on your big ideas—CodinIT and automation tools will handle the execution. Whether you're a seasoned developer refining 15-year-old code or a non-technical user crafting innovative applications, the right prompting strategy is your most powerful tool.

Additional Resources

Feedback and Contributions

We welcome your feedback and contributions to this guide. If you have suggestions for improvements, additional prompts, or examples, please feel free to reach out on our Discord or submit a pull request on our GitHub repository.

Stay Updated

Stay informed about the latest updates, features, and best practices by following us on social media and subscribing to our newsletter. We regularly share tips, tutorials, and success stories from the CodinIT community.

Final Thoughts

Prompting is an art and a science. By mastering the techniques outlined in this guide, you can transform your interactions with AI, streamline your development processes, and unlock new levels of productivity. Remember, the key is to be clear, concise, and structured in your prompts. With practice, you'll become a prompting pro in no time.

About the Author / Founder

Gerome Elassaad is a seasoned software engineer and AI enthusiast with over a decade of experience in building scalable applications and automating workflows. He is passionate about leveraging AI to enhance productivity and streamline development processes. Gerome is also an active member of the CodinIT community, where he shares his knowledge and helps others master the art of prompting.

Acknowledgments

Special thanks to the CodinIT community for their invaluable contributions and feedback in shaping this guide.

Contact

For any questions, feedback, or collaboration opportunities, feel free to reach out to Gerome El