Recommended setup
Our recommended setup for designers and PMs to get started with AI-assisted development.
IDE
We recommend using one of these two editors:
- VSCode — free, widely used, great extension ecosystem
- Cursor — built on VSCode with AI built in, I have included this as this is familiar to many designers
Starter repository (recommended)
If you need a design system or want to follow along with the lessons in this section, we recommend cloning this starter repository:
git clone https://github.com/amarneethi/aidesignsystemclass.gitcd aidesignsystemclassnpm installnpm run devThis gives you a pre-configured project with a design system already in place. Once you run npm run dev, you should see something like this. Go to the url that says Local: in your terminal.
> aidesignsystemv1@0.1.0 dev
> next dev
⚠ Port 3000 is in use by process 97042, using available port 3001 instead.
▲ Next.js 16.1.6 (Turbopack)
- Local: http://localhost:3001
- Network: http://192.168.0.11:3001
✓ Starting...
✓ Ready in 492msCreate a new Next.js project
If you prefer to start from scratch instead, open a folder in VSCode or Cursor, then open the terminal in your editor and run:
npx create-next-app@latest ./When prompted, select No, customize settings to choose your own preferences, then use these options:
Would you like to use TypeScript? No
Which linter would you like to use? None
Would you like to use React Compiler? No
Would you like to use Tailwind CSS? Yes
Would you like your code inside a 'src/' directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the import alias ('@/*' by default)? NoInstall Lucide icons
Lucide is a clean, consistent icon library that works well with React and Tailwind.
npm i lucide-reactStart the dev server
npm run devThis gives you a pre-configured project, but doesn't have a design system. Once you run npm run dev, you should see something like this. Go to the url that says Local: in your terminal.
> foldernamewithversion dev
> next dev
⚠ Port 3000 is in use by process 97042, using available port 3001 instead.
▲ Next.js 16.1.6 (Turbopack)
- Local: http://localhost:3001
- Network: http://192.168.0.11:3001
✓ Starting...
✓ Ready in 492msYou're ready
Your project is running. The main file you'll be editing is src/app/page.js (or page.tsx if you picked TypeScript).