Tips Tricks for AI Coder
1.0.0
Welcome to the Tips & Tricks for AI Coder Beginners, a comprehensive resource designed to help non-coders effectively use AI tools to develop websites, apps, and other projects. This guide is based on real-world experience and practical advice tailored for absolute beginners.
This guide also serves as a testament to my journey as a beginner developer learning to harness the power of AI. Every chapter is inspired by lessons I've learned while navigating the world of AI-driven development. My goal is to share these insights with you so you can avoid common pitfalls and maximize the potential of these tools.
Let me share with you one of the biggest lessons I learned early on. Here it is: The way you phrase what you ask the AI to do is everything. The difference between getting something brilliant and getting something useless often comes down to how you asked for it. Sounds simple, but this tip alone can save you a lot of frustration.
So, let’s talk about how to ask your AI “coder assistant” for help in a way that actually gets results—because trust me, the way you talk to the AI makes all the difference.
Here’s the deal: AI tools are smart, but they aren’t mind readers. They’re brilliant at following directions, but they need those directions to be clear and specific. If you’re vague or leave room for guessing, things can go sideways fast.
Think of it this way: Imagine you’re hiring a contractor to build you a house. If you say, “Build me something nice,” you might end up with a treehouse when what you really wanted was a three-bedroom ranch with a pool. But if you hand them blueprints and say, “I want this exact house with these exact features,” they’ll know exactly what to do.
AI works the same way. If your instructions are specific, the output will be better. Instead of saying, “Fix this code,” try something like, “Fix the problem with the submit button not working when a user clicks it.” Instead of “Make my app pretty,” say, “Modernize the app’s UI with sleek, professional fonts and high-quality icons.” See the difference? The AI now knows exactly what you want and has a clear path to follow.
One trick I’ve learned is to start with the right task-specific phrase—think of it as the secret sauce that gets the AI into the right mode. Here are examples of phrases you can use for different situations. Feel free to copy, tweak, and use these as much as you want.
When Something’s Broken:
This tells the AI to focus on fixing one specific issue. Instead of trying to redo your entire code, it homes in on solving just that problem.
Pro Tip: If you know what broke things (like a certain line of code), include that detail. And if you’re not sure? No worries—just focus on describing the symptoms of the problem as clearly as possible.
When Adding New Features:
This phrase is worth its weight in gold because it tells the AI two critical things: (1) what you want to add and (2) what not to touch. Trust me, you don’t want the AI to accidentally break something while it’s adding your shiny new feature. That’s why the “without removing any other features” part is so important—it keeps everything else intact.
When You Need to Fix Browser Errors:
Okay, this might be the most beginner-friendly pro tip ever. If you’re building a web app and things aren’t working, your browser console is like a detective who’s already figured out the crime scene for you. To find it, right-click on your webpage, click “Inspect,” and go to the “Console” tab. You’ll see error messages there—just copy those and paste them into your AI tool.
Why does this work so well? Because those error messages often contain the exact information the AI needs to figure out what went wrong. It’s like giving it a roadmap for fixing your app. Seriously, this trick is a lifesaver.
When You Want to Improve How Your App Looks:
Let’s be real—design is subjective. What looks great to one person might not be someone else’s cup of tea. That’s why it’s especially important to guide your AI with words like “modern,” “professional,” and “high-quality.” These kinds of adjectives help the AI understand the overall vibe you’re going for.
Pro Tip: If you have a specific app or website that you love the look of, mention it! For example: “Make this look more like the design of Spotify.” The AI will try to mimic that style and apply it to your project.
When Removing Features:
Removing features can be tricky because you don’t want to accidentally take out something important. This phrase lets the AI know to cleanly remove the feature but leave everything else working exactly as it should.
When You Accidentally Delete Something:
It's important to let the AI know what file you lost and give it some context (e.g., “This file handled all the styling for my homepage”). While the AI might not restore the file perfectly, it’ll often provide enough to get things back on track.
If there’s one thing you take away from this chapter, let it be this: specificity is everything. The more detail and clarity you give in your prompts, the better the AI will perform. Here’s what I’ve learned:
This process might feel clunky at first, but I promise, the more you practice, the better you’ll get at it.
Working with AI to build apps and websites isn’t always smooth sailing. There will be moments when you feel like you’re on a roll, only to hit a wall where nothing seems to work. You’ve given the AI clear instructions (or so you thought), you’ve rephrased your requests, and yet… your project isn’t moving forward.
This chapter is all about troubleshooting those frustrating situations and getting yourself unstuck.
Sometimes, the AI just… forgets itself. If you find yourself repeating a command over and over, and nothing is changing, the problem might not be with your instructions—it might be the chat history.
AI language models work by keeping track of previous instructions and responses in the current conversation. Over time, this history can become cluttered with conflicting context. For example:
The Fix: Start a new conversation with the AI.
If starting fresh doesn’t solve the problem, there’s a chance the issue is in the code itself. Contradicting code happens when two pieces of code tell your app to do opposite things. This can often occur when:
For example:
The Fix: Ask the AI to identify and resolve contradictions. Using the chat feature of your AI assistant, you can give it a prompt like, “Review my code and identify any parts that might be contradicting each other.” Then paste the relevant sections into the chat.
Another Fix: Debug manually. If the AI isn’t catching the problem (or you just want more control), start testing pieces of your app one at a time. Disable or comment out parts of the code and see how the app behaves when those sections aren’t running. This process can help you locate the specific lines causing the conflict.
Here’s a game-changer: AI doesn’t always need to write code for you. You can also use it as a trusted debugging partner to answer your questions and guide you through problems without actually changing your project. This approach gives you more control and can help you better understand how everything is connected.
For example, you can ask:
This back-and-forth isn’t about handing over control to the AI—it’s about using it as a coding coach. By treating AI as a teacher rather than a task executor, you can unlock insights that help you troubleshoot faster and better.
If one AI model isn’t giving you answers you can work with, try mixing things up. Different models have different strengths:
Here’s how to do it:
Even if you’ve been working exclusively with one tool, switching to another can provide valuable new perspectives (and solutions).
Changelogs are lifesavers. They let you:
Many tools and IDEs allow you to enable changelogs or version history. If not, you can use Git for version control to achieve the same effect.
Sometimes, the issue isn’t you or the AI—it’s the language you’ve chosen. If your app isn’t working well or feels overly complex, ask the AI: “Is [current language] the best choice for this project?”
This one shift can be a game-changer.
This chapter focuses on leveraging screenshots in creative and effective ways, along with strategies for having the AI track and remember changes so that your workflow stays productive and frustration-free.
A screenshot can often say more than words, especially when something in your UI doesn’t look or behave as expected. However, without proper context, the AI might misinterpret the screenshot and assume it represents the solution you want rather than the problem you’re highlighting. To address this, it’s critical to pair your screenshot with precise prompts that guide the AI’s focus.
Provide a Clear Description Alongside the Screenshot:
A screenshot without context can lead to misunderstandings. For example, if you’re highlighting a visual bug, include an explanation like:
Highlight Key Areas in the Screenshot:
Use basic image editing tools to circle, underline, or annotate the parts of the screenshot that are relevant to the problem. This helps the AI know where to focus.
Clarify That the Screenshot Represents a Problem:
To make sure the AI doesn’t misinterpret the image as your desired output, use this prompt:
Why this works: This phrasing explicitly tells the AI to treat the screenshot as evidence of the issue, ensuring it analyzes the problem rather than assuming the outcome.
Another common issue is when the AI generates code changes that don’t appear in the app or website’s UI. This can happen for several reasons—deployment issues, unsaved changes, or even hidden bugs in your project structure. Screenshots are especially useful here because they can visually capture the “before” and “after” states, helping the AI pinpoint what went wrong.
Take two screenshots:
Include both screenshots in your prompt with an explanation like:
Use targeted prompts to go deeper:
Why this works: Combining screenshots with prompts gives the AI both visual and written context, making it easier for it to identify underlying issues.
Screenshots aren’t just for pinpointing UI problems. Here are some additional ways you can use screenshots to improve communication with your AI assistant:
Show Error Messages or Logs:
If your browser console or application log shows an error, take a screenshot of it and include a prompt like:
Capture Unexpected Behavior in Live Environments:
When debugging deployed projects, take screenshots of any unexpected behavior and describe what should have happened instead:
Highlight Missing Elements in the UI:
If something is missing from your UI (e.g., an image, button, or text), use a screenshot to show its absence:
Comparing Designs:
Use screenshots of designs from similar apps or projects as inspiration and ask the AI to replicate elements from those designs:
Another frequent challenge with AI-assisted development is when the AI forgets prior edits or loses track of changes it has made. To combat this, you can ask the AI to create a custom change-tracking system within your project. This system will document the changes it makes, acting as a “memory” to reference whenever something goes wrong.
This can include:
A Centralized Log File:
The AI can create a file (e.g., changelog.txt) where it automatically appends a description of each change it makes:
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
Inline Code Comments:
Ask the AI to annotate its changes directly in the code:
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
Version Numbers or Tags:
Have the AI embed version numbers or tags within the code so you can revert to specific points if needed:
https://github.com/techcow2/cursor-agent-tracking
When working on a project, you’re bound to encounter issues—whether it’s crashes, unexpected behavior, or persistent errors. These moments can be frustrating, but there’s a simple and effective way to guide the AI to handle these challenges carefully while avoiding known pitfalls. This section will show you how to craft thoughtful prompts that help the AI tackle problems effectively without introducing new ones.
Sometimes, when trying to fix an issue or add a new feature, you might find that the AI inadvertently repeats the same mistake or introduces new problems. This can happen because the AI isn’t aware of past errors or isn’t given enough context to avoid them. Without clear guidance, it might overlook critical details or create unintended side effects.
To prevent these issues, you can craft prompts that combine your task description with explicit instructions about what to avoid. This ensures the AI approaches the task with caution and focuses on solving the problem without causing further complications.
Revert to a Stable State (if needed):
Identify and Document the Problem:
Craft Your Prompt:
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
Provide Context (if applicable):
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
Review and Test Output:
When building or enhancing a website or a web-based application, efficiency and performance are two critical factors. One effective way to achieve these goals is by using Content Delivery Network (CDN) libraries. This chapter will guide you through what a CDN library is, how it benefits your project, and introduce some of the most popular libraries like Tailwind CSS, Bootstrap, Material UI, and more. It will also provide helpful examples on how to prompt your AI assistant to integrate and use these libraries—especially useful if you’re new to coding and rely on AI to simplify development tasks.
A Content Delivery Network (CDN) is a geographically distributed network of servers that delivers web content—such as JavaScript libraries, CSS frameworks, or fonts—quickly to users based on their location. A CDN library refers to a version of a popular framework or tool (like Bootstrap or jQuery) that is hosted on these networks. Instead of downloading the files to your own server or development machine, you reference them directly from the CDN.
Faster Loading Times
CDNs serve files from servers located closest to your users, reducing the time it takes for your site to load.
Reduced Bandwidth for Your Server
Offloading the library hosting to a CDN means your own server doesn’t have to handle those file downloads.
Ease of Implementation
You can add powerful libraries quickly—often with just one or two lines of code.
Automatic Updates
CDNs typically host the latest versions of libraries, so you can easily stay up to date.
Caching Advantages
If a user has already loaded the same library or framework from a CDN on another site, their browser may use the cached version, speeding up load times further.
If you’re brand new to coding and rely on AI for setting up your project, here are prompt examples you can use to have AI handle library integration:
Integrating a CSS Framework
Example Prompt:
“Use the Bootstrap CDN in my existing HTML file. Make sure the navbar collapses on mobile. Place a footer at the bottom with a simple copyright notice.”
Migrating from One Framework to Another
Example Prompt:
“Replace Tailwind CSS with Bootstrap via CDN in my project. Carefully convert existing Tailwind classes to Bootstrap equivalents to keep the same overall design.”
Adding a JavaScript Utility
Example Prompt:
“Include Lodash from a CDN in my index.html. Then, in my main.js file, demonstrate how to use Lodash’s debounce function for a text input.”
These prompts give the AI clarity on which library to use, how to use it (via a CDN), and any specific tasks or features you want implemented.
Below, you’ll find popular libraries you can easily add to your project via a CDN. Each entry includes a description, usage notes, a sample snippet, and a prompt example for your AI.
Description:
A utility-first CSS framework that helps you build custom designs rapidly by using pre-defined classes in your HTML.
Best For:
Developers who want granular control over the design without writing a lot of custom CSS.
Sample Implementation:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
AI Prompt Example:
“Add Tailwind CSS to my project via a CDN. Create a homepage with a header, a simple hero section, and a footer. Use Tailwind classes to ensure a clean, modern design.”
Description:
One of the most widely used CSS frameworks for building responsive, mobile-first websites. It comes with pre-designed components like navbars, forms, modals, and more.
Best For:
Beginners who want a quick and consistent design with minimal setup.
Sample Implementation:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
AI Prompt Example:
“Add the latest Bootstrap CDN links to my website. Create a responsive navbar with a dropdown for ‘Services’ and a search bar on the right. Ensure it looks good on mobile devices.”
Description:
A React-based library that implements Google’s Material Design system, offering ready-to-use components like buttons, cards, and dialogs.
Best For:
React projects requiring a sleek, modern, and professional design aesthetic.
Sample Implementation:
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
(While Material UI primarily recommends npm, you can still reference their icon fonts via CDN.)
AI Prompt Example:
“Integrate Material Icons from a CDN and use them in my React app. Build a simple card component for displaying products with a material-style ‘Add to Cart’ button.”
Description:
A comprehensive icon library offering scalable vector icons that can be easily styled with CSS.
Best For:
Quickly adding social media icons, nav icons, or any other iconography without creating custom SVGs.
Sample Implementation:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
AI Prompt Example:
“Add Font Awesome to my HTML via CDN. Replace all placeholder icons in my navbar with Font Awesome icons for ‘Home,’ ‘Profile,’ and ‘Cart.’ Ensure they scale correctly on mobile.”
Description:
A classic JavaScript library known for simplifying DOM manipulation, event handling, and AJAX operations.
Best For:
Legacy projects or beginners who want to do complex UI interactions without writing extensive vanilla JavaScript.
Sample Implementation:
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
AI Prompt Example:
“Add jQuery via CDN to my index.html. Show me how to hide a div when a user clicks a button, and log a success message to the console.”
Description:
A JavaScript utility library that provides a wide range of functions for data manipulation, including deep cloning, debouncing, and more.
Best For:
Simplifying complex operations on arrays, objects, and strings.
Sample Implementation:
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
AI Prompt Example:
“Add Lodash from a CDN. Convert my existing for-loops to Lodash methods, and demonstrate how to debounce a search field.”
Description:
A CSS library offering pre-made animations (fade, bounce, slide, etc.) that you can apply to elements by adding specific classes.
Best For:
Quickly adding animations to elements without writing custom CSS animations.
Sample Implementation:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
AI Prompt Example:
“Include Animate.css via CDN and apply a fade-in animation to my hero section on page load. Also apply a bounce effect to the ‘Sign Up Now’ button.”
Description:
A versatile JavaScript library for creating interactive charts and graphs.
Best For:
Beginners who want a straightforward way to visualize data without diving into more complex libraries.
Sample Implementation:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
AI Prompt Example:
“Add Chart.js via a CDN and create a bar chart showing monthly sales data. Label the y-axis as ‘Sales’ and the x-axis with the months of the year.”
Identify Your Needs
Decide if you need help primarily with styling (CSS) or with JavaScript functionality. Some libraries (like Bootstrap or Tailwind) focus on design, while others (like jQuery or Lodash) focus on helping with JavaScript tasks.
Check Compatibility
Ensure the library you choose works well with the tools or frameworks you already have in place.
Look for Active Community and Documentation
Well-supported libraries typically have better tutorials, larger communities for troubleshooting, and frequent updates.
Ask Your AI
If you’re still unsure which library to use, prompt your AI for advice:
“Which library is best for a beginner-friendly, highly customizable UI: Tailwind, Bootstrap, or Material UI?”
The AI can explain the pros and cons for each choice in the context of your project.
