Pre-Course Prep - AI-Assisted Frontend Coding for Designers

Step 1: Accounts and Applications (macOS)

You'll need a couple of accounts and a key application installed before you begin the terminal setup. Please complete these steps first.

Create a GitHub Account

• A GitHub account is essential for managing your code and collaborating.
• If you don't already have one, go to github.com/join and create a free account.
• Action: Send your GitHub username to [email protected] so we can give you access to course files.

Install and Log in to Cursor IDE

• A Cursor Pro account is required for this workshop.
• Download from cursor.com/download, install, and log in.
• New to Cursor? A free 14-day Pro trial is offered on first signup.
• Some courses span more than 14 days. If your sessions extend beyond the trial, start a monthly Pro subscription. You can cancel anytime.

Figma

• This course uses Figma Slides. If you'd like to use a different email than you registered with to access them, email [email protected].
• Figma MCP Server and Figma Make demos require a paid Figma plan and the desktop app (Education plans include the MCP Server but not Figma Make).
• Don't have a paid plan? No problem. You won't be able to do the hands-on demo for part of one module, but nothing built with these tools is required later.

Step 2: Open Your Terminal

• You'll perform all these installations in your Mac's Terminal.
• You can find it in Applications > Utilities > Terminal.
• Alternatively, use Spotlight Search (Cmd + Space) and type “Terminal.”

Step 3: Verify / Install Git

Git is essential for managing code changes. Your Mac might already have it!

Check for Git:

In your Terminal, type the following command and press Enter:

git --version

What to expect:

• If you see a version number (e.g., git version 2.39.2): Great! Git is already installed, and you likely have the Xcode Command Line Tools. Proceed directly to Step 4.
• If a pop-up window appears asking you to “Install Command Line Developer Tools”: Click “Install” and follow all the on-screen prompts. This process will download and install Git along with other necessary tools. This can take 15-60+ minutes depending on your internet speed. Please wait for it to complete entirely.

Step 4: Verify / Install Homebrew (brew)

Homebrew is a package manager that helps install other developer tools easily on a Mac.

Check for Homebrew:

In your Terminal, type:

brew --version

What to expect:

• If you see a version number (e.g., Homebrew 4.0.0): Great! Homebrew is already installed. Proceed directly to Step 5.
• If you see command not found: brew: Install Homebrew by running this command in your Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow instructions the installer prints in the Terminal. Close and reopen Terminal once the installation is complete.

Step 5: Verify / Install Node.js

Node.js is the runtime environment for JavaScript outside the browser, and it includes npm (Node Package Manager).

Check your Node version

node -v

• If it shows v20.x or higher: Great! Continue to the next step.
• If it is not found or shows an older version: Install the latest version of Node.js.

Install Node.js

brew install node

Verify after install

node -v

• If it shows v20.x or higher now: Great! Continue to the next step.
• If it shows an older version: Fix the Node link.

Fix Node Link

brew link --overwrite node

node -v

(Node version should be v20.x or higher now.)

Step 6: Quick Verify Checklist

Run each line separately; expect versions for all.

brew -v
git --version
node -v # OK if v20.x or higher
npm -v

If you're on a work-managed or school-managed computer and can't install software, please email us early so we can help with alternatives.

If you have any trouble with setup reach out to [email protected] for assistance.