Vibe code anything

A beginner’s guide to the art/science of vibe coding

Let’s get started

This may seem like a lot of step but its going to be worth it. I promise 😇

Install Xcode CLI Tools

Open your Terminal App and paste the command below and run it by pressing enter


xcode-select --install

This will install Developer tools on your Mac

Install NodeJS

Download from here and Install. This will allow you to build web apps and also run Claude Code.

Install Claude Code

Open your Terminal App and paste the command below and run it by pressing enter


curl -fsSL https://claude.ai/install.sh | bash

Install additional tools (optional but recommended)

VS Code - Download from code.visualstudio.com . A powerful code editor that works great with Claude Code.
Figma - Download from figma.com . Useful for designing UI/UX before coding.
Android Studio - Download from developer.android.com/studio (for Android Development only)
Xcode - Download from the Mac App Store (for iOS development only)

Verify your setup

After installing everything, verify Claude Code is working:


claude --version

You should see the version number displayed.

Set Up Figma MCP (Optional)

Figma MCP lets Claude Code read your Figma designs directly, so you can build UI that matches your designs.

Add the Figma MCP server:


claude mcp add --transport http figma https://mcp.figma.com/mcp

Authenticate with Figma:

Open Claude Code and type /mcp
Select figma from the list
Choose Authenticate
Click Allow Access when prompted
You should see: “Authentication successful. Connected to figma”

Start vibe coding!

Now you’re ready to start building. Simply navigate to your project folder and run:


claude

This starts an interactive session where you can describe what you want to build, and Claude Code will help you create it. The “vibe” is about describing your vision naturally and letting Claude translate that into working code.

With Figma MCP set up, you can say things like:


"Build this page from my Figma design: https://figma.com/file/..."