Everyone's talking about how AI is going to replace developers. But here's the reality: AI isn't going to replace us—it's going to make it easier for us to replace the boring stuff.

I've been using AI to accelerate my development process for all my projects, including Babytales and my other ventures that are part of One Million Goal. The productivity boost has been nothing short of incredible.

In this article, I'll show you exactly how I leverage AI to code 10x faster by:

• Setting up my code editor for maximum AI assistance
• Using AI to write 80% of my code (yes, really)
• Leveraging AI for advanced tasks like high-level architecture and design
• Sharing my best tips to get the most out of AI-assisted development

Let's dive in.

How I Set Up My Code Editor for AI-Assisted Development

After testing Lovable, v0, Replit, Bolt, and several other AI coding tools, I've settled on Cursor as my go-to code editor. It's the only place I do AI-assisted coding now, and for good reason.

I'm currently using Cursor with Claude-3.5-Sonnet or Claude-3.7-Sonnet. It's incredibly capable for virtually any task I throw at it, reasonably fast, and I absolutely love it.

One of the most powerful features in Cursor is hidden in the settings. If you go to Cursor → Settings → Rules → User Rules, you'll find a section called "User Rules". This is where the magic happens—you can instruct the AI exactly how you want it to behave.

If I'm not getting the results I want, I refine these rules until the AI is perfectly trained to my preferences. You can use cursor.directory to find rules that match your needs.

Here are my specific rules:

You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

### Code Style and Structure
- 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.
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines.
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- 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.
- Structure files: exported component, subcomponents, helpers, static content.

### Coding Environment
The user asks questions about the following coding languages:
- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS
- Supabase

### Naming Conventions
Follow these rules when you write code:
- Use kebab-case for directories.
- Use camelCase for variables and functions.
- Use PascalCase for components.
- File names for components should be in PascalCase. Rest of the files in kebab-case.
- Prefix component names with their type (e.g. ButtonAccount.tsx and ButtonSignin.tsx, CardAnalyticsMain.jsx and CardAnalyticsData.tsx, etc.)

### Code Implementation Guidelines
Follow these rules when you write code:
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
- Use “class:” instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
- Optimize Web Vitals (LCP, CLS, FID).
- Favor server components and Next.js SSR.
- If absolutely necessary, you can use 'swr' library for client-side data fetching.
- When using client-side hooks (useState and useEffect) in a component that's being treated as a Server Component by Next.js, always add the "use client" - directive at the top of the file.
- Follow Next.js docs for Data Fetching, Rendering, and Routing.

### UI and Styling
- Use Tailwind CSS for components and styling.
- Use @heroicons/react for icons.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

### Performance Optimization
- Minimize 'use client', 'useState', and 'useEffect'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

### Design
- For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
- Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.

You can find another hidden feature under Cursor → Settings → Rules → Project Rules. Here you can add project-specific rules that help the AI understand your codebase and follow your project's conventions. They can be automatically included or fetched by an agent, with four possible rule type configurations:

• Always: This rule is attached to every chat and inline request
• Auto Attached: When you specify file patterns, the rule will automatically be included in AI responses for files matching those patterns
• Agent Requested: The agent can see the provided description and decide to read the full rule if it wants it
• Manual: The rule needs to be explicitly mentioned to be included

The foundation of my AI coding workflow is solid documentation. For every project, I create a documentation folder with files that are added under project rules with the right rule type configuration:

• Project Requirements (rule type: always)
• App Flow (rule type: always)
• Tech Stack (rule type: always)
• Frontend Guidelines (rule type: auto attached)
• Backend Structure (rule type: auto attached)
• Implementation Plan (rule type: manual)

This documentation becomes critical when using AI to generate code, as you'll see in the next section.

How I Use AI to Write 80% of My Code

Understanding "Vibe Coding" (And Why I Don't Fully Embrace It)

The term "vibe coding" was coined in February 2025 by Andrej Karpathy, one of the founders of OpenAI. He explains it best:

"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LLMs (e.g. Cursor Composer w/ Sonnet) are getting too good.

Also I just talk to Composer with SuperWhisper so I barely even touch the keyboard. I ask for the dumbest things like 'decrease the padding on the sidebar by half' because I'm too lazy to find it. I 'Accept All' always, I don't read the diffs anymore.

When I get error messages I just copy paste them in with no comment, usually that fixes it. The code grows beyond my usual comprehension, I'd have to really read through it for a while. Sometimes the LLMs can't fix a bug so I just work around it or ask for random changes until it goes away.

It's not too bad for throwaway weekend projects, but still quite amusing. I'm building a project or webapp, but it's not really coding - I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works."

While "vibe coding" can help you ship quickly, I'm not fully on board with this approach. It can lead to situations like this:

See the problem? The initial excitement of building a SaaS product without writing a single line of code quickly turns into panic when technical issues arise and the developer lacks the understanding to fix them.

I'd rather be a little bit slower and do things correctly than find myself in this position.

My Cursor Workflow: Three Approaches to AI-Assisted Coding

I use Cursor in three different ways, depending on what I'm trying to accomplish:

Inline AI Composer (Cmd+K): Quick Code Completions

This is when you're in your code file and query the AI from a prompt box that appears directly in your code. The AI will attempt to change the code and ask you to Accept. If you're in YOLO mode, it will make changes without asking for confirmation.

Best for: Quick, context-aware code completions, short snippets, or finishing lines of code without breaking flow.

I use this approach when I want to make small fixes in CSS. It's particularly good with Tailwind CSS classes. Another feature I love is converting SVGs from HTML pages into valid TSX for React. These inline instructions are faster than other methods when you don't need specific context.

AI Composer “Ask” (Cmd+L): Conversations About Your Code

This uses the chat window on the right side of your code editor, but with the "Ask" option selected. It only answers your questions without trying to change your code.

Best for: Debugging help, explanations, asking broader coding questions, refactoring advice, or code walkthroughs.

I barely use this for actual coding because I find it tedious to scroll through responses, apply the code, and then verify it was correctly added. Instead, I use the chat mostly for high-level thinking.

For example, I might ask: "I want to change the algorithm used to generate Babytales images. Before coding, suggest a high-level architecture on how to implement it."

AI Composer “Agent” (Cmd+I): Your AI Coding Companion

This is a more advanced code generation panel that's my go-to for 90% of my AI-assisted coding. This uses the same chat window on the right as the "Ask" option, but it's set to "Agent" mode.

Best for: Generating entire functions, components, boilerplate code, or larger tasks where inline and chat would be too limited.

Composer looks like the chat but functions more like an AI agent that takes your project context and writes code for you autonomously.

The better your instructions, the better the result.

This is where Kidlin's Law comes into play: “If you write the problem down clearly, then the matter is half solved”. Today, this applies more than ever in AI development. Specific prompts lead to better outputs, making prompts a new form of code.

This is also where the documentation I mentioned earlier becomes critical. Composer works best when it has clear, project-specific context. Without that, it defaults to generic patterns. But when you give it guidance—either through documentation, README sections, or dedicated prompt templates—it can write code that feels like your code.

My typical prompt would be something like: "Refer to @documentation. Start the project by following the @implementation_plan"

Using AI for Design Implementation

While there are specialized tools like Lovable, Bolt, and v0 for AI-assisted design, I prefer using Cursor for this as well. Why? Because it already knows my codebase, my file naming conventions, and my color palette.

When I want a new design implemented, I share a screenshot or Figma file with Cursor and ask it to recreate the component and make it work with my API endpoints.

For example, with Babytales, I exported a design from Figma and asked Cursor to implement it in my codebase. The results were impressive: it created the components I needed while maintaining consistency with my existing code.

Tips to Get the Best Results with AI-Assisted Coding

Here are some of my best practices for maximizing the effectiveness of AI in your development workflow:

Plan Before Coding

Start with a clear project plan. This ensures better organization and reduces unnecessary iterations.

The more context you give, the better the results you'll get. As you've seen, I use documentation to provide all the necessary context to the AI, creating a foundation that makes it easier to build on my codebase.

Name Everything Clearly

Your components, APIs, etc., should be named in a way that's easy for both you and AI to understand.

In all my projects, React components have explicit, easy-to-understand names. My API endpoints are also self-explanatory—for instance, /api/search clearly indicates a search function. This helps the AI come up with better results when generating related code.

Sync Official Documentation

In Cursor, go to Settings > Features > Docs and sync official documentation for your tech stack (e.g., Next.js, Supabase). This ensures the AI provides accurate answers based on the tools you're using.

Tag Relevant Files in Chat

When using the chat feature, index specific files to get high-quality outputs tailored to your needs. This gives the AI more context about what you're working on.

Automate Testing

Add prompts like "Write tests first, then code, then run tests and update code until tests pass" for non-trivial tasks. This ensures the AI iterates until the implementation is correct.

The Future Is Now: Build Faster Than Ever Before

There has never been a better time in history to build a project. You now have AI that can:

• Code for you at incredible speed
• Help with high-level architecture decisions
• Assist with design implementation
• Generate and run tests to ensure quality
• and more...

This is how I'm using AI every day to pursue my One Million Goal with a one-person company. The productivity multiplier is real, and it's changing how we approach building products.

So don't worry about AI replacing you—focus instead on how you can use AI to replace the tedious parts of development, freeing you to focus on the creative aspects that truly matter.

Have questions about my AI coding workflow? Want to share your own experience? Write a comment, DM me on X or send me an email—I'd love to chat about this!