Blog · Engineering

How to Use AI to Code for Beginners

· ·5 min read
How to Use AI to Code for Beginners

You’ve got an idea that’s been sitting in your notes or bouncing around your brain for months. You may have dabbled with code or played with ChatGPT, but haven’t yet built a complete, working product.

Whether you’re a designer, PM, marketer, ops lead, or curious professional, you don’t need to become a software engineer to build a working MVP. You just need a clear plan and the right tools.

This guide will help you:

  • Define what you’re building
  • Set up a modern web development environment
  • Understand how web apps work
  • Start coding with real tools
  • Deploy your project live
  • Know where to go when you get stuck

Step 0: Define What You’re Building First

Before coding, you need a plan. Devplan breaks this down into 3 parts:

1. PRD (Product Requirements Document)

Write what your product does from the user’s perspective. Focus on functionality, not implementation. Example:

  • “Users can sign up with email and password”
  • “They see a personalized dashboard after login”

2. Technical Design

Define what components, pages, logic, and data are needed to implement the PRD. This gives structure to your code before you write it.

3. Build Plan

Devplan turns your tech design into scoped tasks. Each task comes with a pre-written AI coding prompt. You’ll use these directly inside your IDE (Cursor is recommended).

After generating your plan:

  • Copy/paste the prompts into Cursor
  • Or download the plan and run through them as you go

Tech Stack Overview

Here’s the modern web dev stack:

Layer Tool
Frontend framework Next.js
UI styling Tailwind CSS
Language TypeScript
Runtime Node.js
Package manager npm
Deployment Vercel
Editor Cursor (AI-native IDE)
Version control Git + GitHub

This is a professional-grade stack used by teams at real startups. You’re not building a toy app.

Step 1: Set Up Your Environment

Open your terminal. You’ll be using it often—it’s where most real development happens.

1. Install Node.js + npm

Go to https://nodejs.org. Download the package and install it as you would any other app.

Check that it worked:

node -v
npm -v

You should see version numbers.

2. Install Git

Download from https://git-scm.com/downloads. Install with default settings.

Check it:

git --version

Step 2: Install and Use Cursor

Cursor is a developer environment based on VS Code with built-in AI. It’s perfect for working with Devplan’s AI prompts and helping you through roadblocks.

Install it and open the app.

Inside Cursor:

  • Create or open your project folder
  • Use the built-in terminal (View > Terminal or Ctrl+`)
  • Use the AI agent panel (right-hand side) to paste in prompts or ask for help

Step 3: Create a New Project with Next.js

In the Cursor terminal, run the Next.js scaffold command and choose these options:

  • TypeScript → Yes
  • Tailwind CSS → Yes
  • App Router → Yes
  • Customize src directory → No
  • Import alias → No
  • Install dependencies → Yes

When complete:

cd your-app-name
npm run dev

What’s happening here?

  • You’re starting a local server on your machine
  • Your app runs at http://localhost:3000 — this is only visible to you
  • Next.js watches your files — every time you save, it auto-refreshes the browser

Open app/page.tsx, change some text, and save. Watch the browser update instantly.

Step 4: Get Comfortable with the Command Line

You’ll be using terminal commands a lot. Here are a few you’ll use regularly:

Command Purpose
cd folder-name Change directory
ls (or dir on Windows) List files
npm install Install dependencies
npm run dev Start local dev server
Ctrl+C Stop the current process
clear Clean up the terminal screen

When things go wrong, most errors will show up in the terminal. Read it carefully—it usually tells you what broke.

Step 5: Start Building Features in Cursor

Once your Devplan Build Plan is ready:

  1. Open Cursor and your project folder
  2. Go to your Devplan task list
  3. Copy the AI prompt for the first task
  4. Paste it into Cursor’s AI panel
  5. Cursor will generate code inside the file it thinks you need. Review it before saving
  6. Use the dev server to check progress at http://localhost:3000

Repeat for each task in your plan.

Tips:

  • If something breaks or errors show up: copy/paste from the browser and say “I just added this code and now I’m getting this error. What’s wrong?”
  • Let the AI do some of the heavy lifting, but try to read and understand the code it writes.

Step 6: Common Errors and Fixes

Error Cause Fix
Command not found: npx Node.js not installed properly Reinstall Node.js, restart Cursor
EADDRINUSE: Port 3000 Dev server already running Stop with Ctrl+C, try again
Red squiggles in Cursor Lint/type errors Hover and let Cursor suggest a fix
Cannot find module Import path or file doesn’t exist Double-check file names and paths
Tailwind styles don’t apply Misconfigured setup Restart dev server after config changes
Broken layout CSS or HTML errors Use devtools in browser to inspect
npm install errors Conflicting dependencies Delete node_modules, run npm install again
ReferenceError, undefined, etc. JS bugs Read stack trace, debug in browser console or Cursor agent
App crashes on build Mismatched imports or component nesting Use console.log() to trace it, ask Cursor to help debug
Confused by what a file is doing Too much AI-generated code Ask Cursor: “Explain what this file does and how it works”

Step 7: Deploy to Vercel

Once your app works locally, deploy it:

1. Push your project to GitHub

git init
git add .
git commit -m "initial commit"
gh repo create your-app-name --public --source=. --remote=origin --push

If you don’t have GitHub CLI (gh) installed, you can create a repo on the GitHub site and push it manually.

2. Deploy to Vercel

Vercel gives you a public URL in seconds. Push to GitHub again anytime you want to update the live site.

Summary: What You Just Set Up

Step Outcome
Devplan Structured PRD, Tech Design, and Build Plan with AI prompts
Cursor AI-native IDE with terminal + prompt-based code generation
Next.js app Full frontend app running locally at localhost:3000
Command line Used to install, run, and debug
Vercel deploy Live app online, ready to share

Final Notes

You will hit errors. That’s part of it. But now you have:

  • A plan (Devplan)
  • An assistant (Cursor)
  • A working stack (Next.js, Tailwind, Node, Git)
  • A feedback loop (localhost → fix → refresh → repeat)

Take it one feature at a time. Each small thing you ship teaches you how real software is built.