Dev Environments

A terminology guide for designers entering AI-assisted development

This guide is organized by environment — the context where you'll most likely encounter each term. Rather than an A–Z list, it follows the shape of a real workflow: from your local machine, to version control, to the browser, to deployment, and into AI-assisted building.

Each term includes a plain-English definition and a short example grounded in real situations.

1. The Absolutes

Foundational concepts — the vocabulary beneath everything else

Code — Written instructions that tell a computer what to do. Code is just text — written in a specific language (like JavaScript or Python) that a computer can interpret and execute.

When you inspect a website in your browser and see lines of HTML and JavaScript, you're looking at code.

Programming language — A set of rules and syntax for writing code. Different languages are suited to different tasks. HTML structures content, CSS styles it, JavaScript makes it interactive, Python handles logic and data.

A web page typically uses three languages at once: HTML for structure, CSS for appearance, JavaScript for behaviour.

File / directory — A file is a single document of code (e.g. index.html). A directory organises files into a structure. A project is essentially a directory containing many files.

A typical project might have a /components folder, a /styles folder, and an index.js file at the root.

Framework — A pre-built set of tools, conventions, and patterns that gives your project a foundation to build on. Instead of starting from zero, a framework handles the repetitive scaffolding so you can focus on what's unique to your product.

React is a framework for building user interfaces. Next.js is built on top of React and adds routing, server-side rendering, and more.

Library — A collection of reusable code written by someone else that you can import into your project. Smaller in scope than a framework — a library solves one specific problem.

Framer Motion is a library specifically for animations. You import it, call its functions, and get animation behaviour without writing it yourself.

Package — A bundled piece of code (often a library or tool) that you can install into a project. Packages are shared publicly and downloaded via a package manager.

Installing the 'date-fns' package gives you a set of functions for formatting and manipulating dates.

Syntax — The rules that govern how code must be written — similar to grammar in a spoken language. A single missing bracket or comma can break an entire file.

In JavaScript, a function must be written as: function myFunction() { } — deviating from that structure causes a syntax error.

Function — A named, reusable block of code that performs a specific task. You define it once and call it by name whenever you need it.

A function called formatDate() might take a raw timestamp and return it formatted as 'April 2026'.

Variable — A named container that stores a value. The value can change as the program runs.

let userName = 'Hendri' stores the text 'Hendri' under the name userName, which can then be referenced throughout the code.

Bug — An error or unintended behaviour in code. Finding and fixing bugs is called debugging.

A button that submits a form twice because an event listener was accidentally attached twice is a bug.

PRD (Product Requirements Document) — A written spec that defines what a feature or product should do, for whom, and why. Not strictly a dev term — it's a product/design artefact — but referenced constantly in dev conversations.

Before a sprint starts, the PM shares a PRD describing the login flow. Designers use it to create mocks; developers use it to estimate and build.

2. Your Machine

The tools you run locally — your code editor, terminal, and project files

IDE (Integrated Development Environment) — The application where you write, run, and debug code. It's the Figma of the dev world — everything you need in one place. The most popular today is VS Code. AI-enhanced editors like Cursor build on top of it.

You open Cursor, it shows your project files on the left, a code editor in the middle, and a terminal at the bottom. You can chat with AI directly inside the editor.

VS Code (Visual Studio Code) — The most widely used code editor in the world, made by Microsoft. Free, fast, and extensible with thousands of plugins. Many AI coding tools are built as extensions for VS Code.

GitHub Copilot, Cursor, and Claude Code all work within or alongside VS Code.

Terminal / CLI (Command Line Interface) — A text-based interface for controlling your computer by typing commands. Most dev tooling runs through the terminal. On a Mac, this is the Terminal app.

Typing npm install in the terminal downloads all the packages a project needs. Typing npm run dev starts your local development server.

Localhost — Running your project on your own computer so only you can see it. The URL is usually something like http://localhost:3000. Nothing you do here affects any live version.

You run npm run dev, open a browser, and go to localhost:3000 to see your prototype running.

npm / yarn (Node Package Manager) — Tools for installing and managing packages in your project. You'll use one of these constantly.

npm install framer-motion downloads the Framer Motion library. npm run build triggers the build process.

Node.js — A runtime that lets JavaScript run outside the browser. Most modern frontend tooling requires Node.js to be installed.

Before starting any JavaScript project, you need Node.js installed. Once it's there, you rarely think about it — it just enables everything else.

.env file (Environment Variables) — A hidden file that stores sensitive values — API keys, passwords, database URLs — outside of your code. These are never shared or committed to a repo.

Your .env file might contain NOTION_API_KEY=secret123. Your code reads that key without it ever being visible in the codebase.

Config file — A file that stores settings for a tool or framework. Common examples: tailwind.config.js, next.config.js.

In a Next.js project, a config file tells the framework which domains are allowed for images, or which paths to treat as static pages.

Linter — A tool that automatically scans your code for errors and style inconsistencies — like Grammarly for code.

ESLint might warn you that you declared a variable but never used it, or that you're missing a required dependency.

Boilerplate / scaffold — A starter template that gives you a working project structure out of the box.

npx create-next-app scaffolds an entire Next.js project in seconds — folder structure, config files, and a working home page all ready to go.

3. GitHub & Version Control

How code is tracked, shared, and collaborated on across teams

Git — The most widely used system for tracking changes to code over time. It lets you save snapshots of your project and see the full history of every change.

Git is like a very detailed version history — you can go back to exactly what your code looked like two weeks ago, or see who changed a specific line and why.

GitHub — A platform for hosting Git repositories online. Think of it as Figma for code — a shared, cloud-based home for the project.

Your developer pushes their code to GitHub. You can open the repository in a browser and see every file, every change, and every comment.

Repository (Repo) — The project folder — but with complete version history attached. Every file, every change ever made, and every discussion about that code lives in the repo.

When a developer says 'I'll share the repo with you,' they're giving you access to the project on GitHub so you can view the code or contribute.

Branch — A parallel copy of the codebase where you can make changes without affecting the main version. Like duplicating a Figma file to experiment — you work on the copy, and merge it back when ready.

A developer creates a branch called feature/login-redesign, builds the new login flow there, and merges it into main once it's tested and approved.

Main / Master — The primary branch — the official, production-ready version of the code. Most teams protect it so nothing gets merged in without a review.

Code only reaches 'main' after it's been reviewed, tested, and approved. What's on main is typically what's live in production.

Behind / Ahead — Numbers shown on the GitHub branches screen that tell you how out of sync a branch is with main. "1 Behind" means main has 1 commit this branch hasn't received yet. "2 Ahead" means this branch has 2 commits that haven't been merged into main.

You see your branch is "1 Behind, 2 Ahead" — meaning you have 2 new commits ready to merge, but you're also missing 1 recent change that landed on main.

Commit — A saved snapshot of your changes, with a short message describing what changed. Like a version history entry in Figma.

After updating button styles, a developer commits with the message: 'Update CTA button to use new brand colour.'

Push / Pull — Push sends your local commits up to GitHub. Pull downloads the latest changes from GitHub to your local machine.

You finish a change on your machine (push), your colleague downloads your changes to their machine (pull), and continues building on top of them.

Fork — A personal copy of someone else's repository. You fork a repo to experiment or build on it independently.

You find an open-source component on GitHub you want to customise. You fork the repo, make your changes, and use your own version.

Clone — Downloading a copy of a repository to your local machine so you can work on it.

git clone [url] in the terminal copies the entire repository — all files and history — to a folder on your machine.

Pull Request (PR) — A formal proposal to merge changes from one branch into another. It triggers a review process — teammates can comment, approve, or request changes.

A developer finishes a feature and opens a PR. You might be tagged to review it, leave a comment, and then approve it.

Merge Request (MR) — The same concept as a Pull Request, but the term used on GitLab instead of GitHub. Functionally identical — the name difference is just platform convention.

If your team uses GitLab, they'll say 'I'll open an MR for this.' On GitHub, the same thing is called a PR.

Merge — The act of combining changes from one branch into another. Once a PR is approved, the branch gets merged.

After the PR is approved, the developer merges the feature branch into main. The new feature is now part of the official codebase.

Conflict — What happens when two branches have made different changes to the same part of the same file, and Git can't automatically decide which version to keep.

Two developers both edited the same line in a component file. Git flags the conflict; one of them opens the file, sees both versions, and decides what the final version should be.

Issue / Ticket — A tracked unit of work on GitHub describing a bug, feature, or task.

You file an issue: 'Dropdown menu closes when hovering between items.' A developer picks it up and closes it when fixed.

README — A markdown file (README.md) in the root of a repo that explains what the project is, how to set it up, and how to use it.

Before running a new project, a developer reads the README to find the setup instructions.

In practice — the Git workflow

Day-to-day, you don't need to think about Git much. When you hit a good milestone — finished a screen, happy with a feature — run:

git push

git push

git push

That's it. That snapshot is now on GitHub as a fallback. If you ever need to roll back, GitHub has every committed version in the history and you can restore any of them.

For bigger experiments or risky changes, create a branch first:

git checkout -b experiment/new-home-screen

git checkout -b experiment/new-home-screen

git checkout -b experiment/new-home-screen

Work on it, commit as you go, then push the branch:

git push -u origin experiment/new-home-screen

git push -u origin experiment/new-home-screen

git push -u origin experiment/new-home-screen

This keeps main as your stable, known-good version. If the experiment works, merge it in. If not, delete the branch and nothing is lost.

4. The Terminal — Commands Decoded

What those commands actually mean, word by word

Terminal commands follow a simple pattern: tool action target. Once you recognise the parts, they stop feeling like magic spells.

cd (change directory) — Navigate into a folder. Everything after cd is the path.

cd /Users/hendri/swissborg-wallet — move into the swissborg-wallet project folder. Same as double-clicking into it in Finder, but in text.

cd .. — Go up one folder level.

You're inside /components and need to get back to the project root: cd ..

ls (list) — Show everything in the current folder.

Type ls and you'll see all the files and folders in your current directory — useful for checking you're in the right place.

pwd (print working directory) — Show your exact current location.

If you're lost in the terminal, type pwd and it prints the full path of where you are: /Users/hendri/swissborg-wallet

npm install — Download and install all the packages the project needs. Usually the first thing you run after cloning a repo.

The project's package.json file lists every dependency. npm install reads that list and downloads everything.

npm run dev — Start the local development server so you can preview your project at localhost.

After running this, open your browser and go to http://localhost:3000 to see your app running locally.

npx [tool] [command] — Run a tool on the fly without installing it permanently. Three parts: npx (the runner), the tool name, and the command to pass it.

npx expo start — npx runs expo, expo receives the instruction 'start', and your React Native dev server launches.

git add . — Stage all your current changes, marking them as ready to be committed. The . means "everything."

Before committing, you stage your changes: git add . tells Git: include everything I've changed in the next snapshot.

git commit -m "message" — Save a snapshot of your staged changes with a label describing what changed.

git commit -m "Add filter to bookmarks page" — the -m flag means 'message', followed by your description in quotes.

git push — Send your committed snapshots up to GitHub.

Once you've committed, git push uploads those commits so they're backed up and visible to your team.

git checkout -b branch-name — Create a new branch and switch to it immediately. The -b flag means 'new branch'.

git checkout -b experiment/dark-mode creates a new branch called experiment/dark-mode and moves you onto it.

git push -u origin branch-name — Push a brand new branch up to GitHub for the first time. The -u origin part sets up the connection between your local branch and GitHub.

You only need this the first time you push a new branch. After that, just git push works.

5. The Browser

What happens when your code runs — and the tools built into every browser to inspect it

DOM (Document Object Model) — A live, structured representation of everything on a webpage. The browser builds the DOM from your HTML, and JavaScript can read or modify it in real time.

When you click a button and a modal appears, JavaScript found that button in the DOM, listened for the click, and added a new element — all without reloading the page.

HTML (HyperText Markup Language) — The language that defines the structure and content of a webpage. It describes what things are — headings, paragraphs, images, buttons — but not how they look.

<button>Submit</button> is HTML. It creates a button element. CSS would style it; JavaScript would make it do something.

CSS (Cascading Style Sheets) — The language that controls how HTML elements look — colours, fonts, spacing, layout, animation.

button { background: blue; border-radius: 8px; } tells the browser to render all buttons with a blue background and rounded corners.

JavaScript (JS) — The programming language of the web. It makes pages interactive — responding to clicks, fetching data, updating the DOM, running logic.

When you type in a search box and results appear without the page reloading, JavaScript is fetching and displaying those results in real time.

DevTools (Browser Developer Tools) — A built-in panel in every browser (right-click anywhere → Inspect) that lets you examine the DOM, edit styles live, debug JavaScript, and monitor network requests.

You notice a component has the wrong spacing. You open DevTools, click on the element, and see the CSS applied — then tweak the values live to find the right fix.

Console — One tab within DevTools that displays messages printed by JavaScript — errors, warnings, and custom log messages. If something is broken, the console is the first place to look.

You open the console and see: 'TypeError: Cannot read properties of undefined.' Paste that into Claude and you'll usually get the fix.

Network tab — A tab in DevTools that shows every request the browser makes — fetching images, loading fonts, calling APIs.

You open the network tab and see a call to your Notion API returning a 401 error. That tells you it's an authentication problem, not a code bug.

Responsive design — Building interfaces that adapt to different screen sizes. Handled in code with CSS media queries or a utility framework like Tailwind.

A sidebar that shows on desktop collapses into a hamburger menu on mobile. That layout shift is controlled by responsive CSS rules.

API call / fetch — A request your frontend makes to a backend or external service to get or send data. The browser sends a request to a URL, and the server responds — usually with JSON.

When your Framer site loads bookmarks from Notion, it makes an API call to Notion's endpoint. Notion responds with JSON, and your frontend displays it.

JSON (JavaScript Object Notation) — A lightweight, human-readable format for structuring data. APIs almost universally send and receive data as JSON.

{ "title": "Bookmarks", "tags": ["Design", "Tools"] } is JSON. Your frontend reads those keys to populate a card's title and filter tags.

CORS (Cross-Origin Resource Sharing) — A browser security rule that blocks requests made from one domain to another, unless the server explicitly allows it.

Your Framer site tries to call your backend API. The browser blocks it with a CORS error unless the API is configured to allow requests from your domain.

6. Build & Deploy

How code goes from your machine to a live URL

Build — The process of transforming your source code into an optimised, browser-ready format.

Running npm run build takes your React project and outputs a single optimised /dist folder ready to upload to a server.

Deploy — Pushing your built code to a server so it's accessible at a live URL.

After approving a PR, it merges into main, which automatically triggers a deploy to Vercel. Two minutes later, the changes are live.

Production — The live environment — what real users see. Code in production has been tested, reviewed, and deployed.

'Don't push that directly to production' means: don't deploy untested code to the live site.

Staging — A live but private environment that mirrors production — used for testing before changes go live.

Before launching a redesigned checkout flow, you deploy to staging and share the link with the team for sign-off.

Vercel / Netlify — Hosting platforms built for modern frontend projects. They connect to your GitHub repo, detect changes, build your project, and deploy it automatically.

You push a commit to GitHub. Vercel detects the push and within minutes your site is updated at its live URL.

CI/CD (Continuous Integration / Continuous Deployment) — Automated pipelines that run every time code is pushed. CI runs tests. CD deploys the code if tests pass.

A developer pushes a change. CI runs tests — if any fail, the deploy is blocked. If all pass, CD deploys automatically.

Environment — The context in which code runs: local (your machine), staging (test server), or production (live site).

In your local environment, you might use a test Notion database. In production, the same code points to the real one — controlled by environment variables.

API endpoint — A specific URL that a server exposes for a particular action.

POST /api/bookmarks tells the server to create a new bookmark. GET /api/bookmarks returns a list of all existing ones.

CDN (Content Delivery Network) — A global network of servers that caches and delivers your static files from a location close to the user.

Your portfolio's images are served from a CDN. A visitor in Tokyo gets them from a server in Tokyo; a visitor in London from one in London.

7. AI-Assisted Building

Terms you'll encounter specifically when using AI to write and understand code

Prompt — The instruction or question you give to an AI to get a result. Specificity matters — include what you want built, the context, any constraints, and ideally an expected output.

'Add a filter button to the bookmarks page' is weak. 'Add a filter button that shows only bookmarks tagged Design. The tag data is in the tags field as an array.' is strong.

LLM (Large Language Model) — The AI technology behind tools like Claude, ChatGPT, and GitHub Copilot. Trained on vast amounts of text and code, LLMs can generate, explain, debug, and refactor code through conversation.

When you paste an error message into Claude and ask what it means, the LLM interprets the error, understands your context, and suggests a fix in plain language.

Context window — The total amount of text an AI can process in a single conversation. When a project exceeds this limit, the AI loses awareness of earlier content.

If you paste an entire large codebase into a conversation, the AI may not 'remember' things from the beginning. Breaking work into smaller, focused sessions helps.

Hallucination — When an AI confidently generates something that is incorrect — a function that doesn't exist, a library with a made-up name, or wrong syntax.

Claude suggests importing from 'react-scroll-snap' — but that package doesn't exist. Always verify AI-generated code actually runs.

Component — A reusable, self-contained piece of UI. The coding equivalent of a Figma component. In React, every piece of the interface is a component.

A <BookmarkCard /> component receives a title, URL, and tag as inputs and renders a styled card. Drop it into any page, pass different data, get a different card.

Props (Properties) — The inputs passed into a component — similar to how you override text or colour in a Figma component instance.

<Button label='Save' colour='blue' /> and <Button label='Delete' colour='red' /> are the same component with different props.

State — Data that can change over time and causes the UI to update when it does. A toggle being on or off, a modal being open — all of these are state.

When a user types in a search input, the search term is held in state. Every keystroke updates the state, which triggers the component to re-render with filtered results.

Refactor — Rewriting existing code to improve its structure or readability without changing what it does.

A 200-line component doing too many things gets refactored into three smaller, focused components — same behaviour, much easier to read and maintain.

Token — The unit an LLM uses to measure text — roughly one word or part of a word. Context windows and pricing are measured in tokens.

Sharing an entire codebase in a single prompt might use 50,000 tokens — potentially hitting the model's context limit.