Why Should I Embrace AI Tools for Coding? Will They Help or Reduce My Efficiency?

Not too long ago, as I was working on an Android application, I was scrolling through YouTube, looking for something interesting to watch. Then, YouTube recommended a video to me: Embrace GitHub Copilot, Cursor AI & ChatGPT as a Developer!. As a curious developer, I watched the entire video. It raised a question that I’ve been thinking about a lot: should I rely on AI tools to build applications, and if so, how much should I use them? What are the potential side effects?

I’ve already discussed similar questions in a previous blog post, My Love and Hate Relationship with GitHub Copilot, where I concluded that it’s best to set boundaries on how much we rely on these tools. But this video only highlighted the benefits of using AI for development. For instance, it pointed out how these tools can generate boilerplate code effortlessly. Generating boilerplate code for a Flutter widget or an HTML page can be tedious, but with AI, you just need to provide a prompt like “create this widget with this title and metadata,” and it gets done in seconds.

This feature can make life so much easier, especially for tasks that feel more like obstacles than creative work. I want to focus on creating meaningful UI and logic for my app to function, rather than dealing with repetitive code. Another key benefit mentioned in the video was how AI can help refactor code, making it easier to break down components into reusable pieces. This reusability improves maintainability, eases debugging, and facilitates adding new features.

These are all solid points from the video, but here’s my personal take on using AI tools in development.

My Usage

Honestly, as a developer, I use these AI tools mainly for learning new technologies and improving UI design. I’m not a front-end developer, but I usually have a vision for what I want to build. I code it, but I know it’s not perfect. That’s when I turn to AI. Here’s an example of a prompt I often use:

Imagine you are a designer and developer with five years of experience. With this expertise, you are tasked with improving a UI. Here is the code. Now, modify this UI to make it better.

For Example I was working on the Tools section on my own website using Astro, React, and Framer Motion. This was the original code:

import React, { useState } from "react";
import "devicon/devicon.min.css";
import { motion } from "framer-motion";
import authorConfig from "../../../config/info";

const techStack = authorConfig.techStack;

const SkillsShowcase: React.FC = () => {
  // Set initial tab as the first category in the tech stack
  const [activeTab, setActiveTab] = useState(Object.keys(techStack)[0]);

  return (
    <div
      style={{
        boxShadow:
          "0 2px 6px rgba(76, 80, 106, 0.25), 0 8px 24px rgba(76, 80, 106, 0.33), 0 16px 32px rgba(76, 80, 106, 0.33)",
      }}
      className="py-12 px-6 md:px-12 bg-[var(--accent-dark)] rounded-lg"
    >
      {/* Tab Navigation for Tech Stack Categories */}
      <div className="flex flex-wrap justify-center space-x-2 mb-8">
        {Object.keys(techStack).map((category) => (
          <button
            key={category}
            className={`py-2 px-4 font-semibold rounded-lg ${
              activeTab === category
                ? "bg-[var(--accent)] text-white"
                : "bg-transparent text-[var(--text-light)]"
            } transition duration-300 whitespace-nowrap`}
            onClick={() => setActiveTab(category)}
          >
            {category}
          </button>
        ))}
      </div>

      {/* Skills Table */}
      <div className="flex overflow-x-auto">
        {Object.entries(techStack).map(([category, skills]) =>
          activeTab === category ? (
            <motion.div
              key={category}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 20 }}
              transition={{ duration: 0.3 }}
              className="flex items-center justify-start"
              style={{ whiteSpace: "nowrap" }}
            >
              {skills.map((skill) => (
                <i
                  key={skill}
                  className={`devicon-${skill}-plain colored text-6xl mx-2`}
                ></i>
              ))}
            </motion.div>
          ) : null
        )}
      </div>
    </div>
  );
};

export default SkillsShowcase;

And this is the modified code

import React, { useState } from "react";
import "devicon/devicon.min.css";
import { motion } from "framer-motion";
import authorConfig from "../../../config/info";

const techStack = authorConfig.techStack;

const SkillsShowcase: React.FC = () => {
  const [activeTab, setActiveTab] = useState(Object.keys(techStack)[0]);

  return (
    <div
      className="py-12 px-6 md:px-12 bg-[var(--accent-dark)] rounded-lg shadow-lg"
      style={{
        boxShadow:
          "0 2px 6px rgba(76, 80, 106, 0.25), 0 8px 24px rgba(76, 80, 106, 0.33), 0 16px 32px rgba(76, 80, 106, 0.33)",
      }}
    >
      {/* Tab Navigation */}
      <div className="flex flex-wrap justify-center gap-4 mb-8">
        {Object.keys(techStack).map((category) => (
          <button
            key={category}
            onClick={() => setActiveTab(category)}
            className={`py-2 px-6 font-semibold rounded-full transition duration-300 text-sm md:text-base ${
              activeTab === category
                ? "bg-[var(--accent)] text-white shadow-md"
                : "bg-transparent text-[var(--text-light)] hover:bg-gray-700 hover:text-[var(--accent)]"
            }`}
          >
            {category}
          </button>
        ))}
      </div>

      {/* Skills Grid */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 10 }}
        transition={{ duration: 0.3 }}
      >
        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-6">
          {techStack[activeTab].map((skill) => (
            <motion.div
              key={skill}
              whileHover={{ scale: 1.1 }}
              className="flex flex-col items-center text-center"
            >
              <i className={`devicon-${skill}-plain colored text-5xl`}></i>
              <p className="mt-2 text-sm text-[var(--text-light)]">
                {skill.charAt(0).toUpperCase() + skill.slice(1)}
              </p>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </div>
  );
};

export default SkillsShowcase;

Using this prompt, the AI suggests enhancements that usually address the issues in my design. However, I still tweak things afterward to better fit my vision—whether it’s changing fonts, icons, or colors to align with the overall style of the application.

Hot Take

Here’s my perspective on AI usage after watching the video and reflecting on my own experiences: AI tools are valuable for learning, refactoring, and improving code structure, but they shouldn’t be overused for generating large chunks of code. Code generated by AI often lacks high quality, security, and precision. And if you’re a new developer without a solid foundation, relying heavily on AI can be harmful. It might weaken your ability to read documentation and hinder your debugging skills.

Conclusion

In the end, AI tools like GitHub Copilot, ChatGPT, and Cursor AI can be incredibly powerful aids for developers. They can save time on repetitive tasks, help refactor code, and offer learning opportunities, especially for areas outside our expertise. However, it’s essential to use them mindfully. Over-relying on AI for code generation can lead to lower quality, less secure code, and it may even hinder important skills like reading documentation and debugging.

My advice? Embrace these tools as companions for learning, refactoring, and enhancing your work, but maintain control over your code by focusing on quality and understanding what you’re building. AI can be a valuable ally—just be sure it complements, rather than replaces, your own development skills.

For more of my thoughts, check out my other post, My Love & Hate Relationship with Copilot.

Until next time, stay curious and keep building 👓.