Getting Started

Evergreen is an agentic design framework that runs inside Claude Code. You can start a new project with it or add the skills to an existing one.

Prerequisites

Claude Code — Evergreen requires Claude Code. Install it if you haven't already, then verify with claude --version.
Node.js 18+ — download from nodejs.org if you don't have it. Run node --version to check.
Git — most systems have this pre-installed. Run git --version to check.

Option A: New project

Start fresh with Evergreen as your foundation. Run these commands in your terminal.

1. Clone and install

Clone the Evergreen repo and install dependencies:

git clone https://github.com/bobbydotdesign/evergreen.git my-project
cd my-project
npm install

Replace my-project with whatever you want to name your project.

2. Start Claude Code

This is where you'll use the built-in skills to design and build:

claude

You may be asked to trust the project folder — select "Yes, I trust this folder"to continue. You're now talking to Claude inside your project. It can see all your files, understands the design system, and knows about the built-in skills.

3. Start building

Try your first skill. Type this in Claude Code:

/ev-prd

Claude will ask you to describe what you want to build. Tell it your idea in plain language — even a single sentence works. Claude generates a structured PRD and renders it as an interactive page at /ev/prd.

Next, try generating your first prototype:

/ev-wireframe

Claude will read your PRD and create interactive wireframe screens.

When you're ready to preview, just ask Claude to start the dev server — it runs in the background so you can keep working. Open http://localhost:3000 in your browser to see your work.

Option B: Existing project

Already have a project with Claude Code? Add the Evergreen skills and configuration without changing your existing stack. Run these commands in your terminal from your project folder.

1. Copy the skills

From the root of your existing project:

git clone https://github.com/bobbydotdesign/evergreen.git /tmp/evergreen
cp -r /tmp/evergreen/.claude .claude
rm -rf /tmp/evergreen

This adds the .claude/skills/ directory and settings to your codebase.

2. Add the Evergreen section to CLAUDE.md

If you already have a CLAUDE.md, copy the content between the  and  markers from the template CLAUDE.md into yours. Your existing instructions go below the end marker.

If you don't have a CLAUDE.md yet, copy the whole file:

cp /tmp/evergreen/CLAUDE.md CLAUDE.md

3. Open Claude Code

Start Claude Code in your project:

claude

All skills (/ev-prd, /ev-research, /ev-design, /ev-wireframe, /ev-ship, etc.) are immediately available. Add your project-specific instructions below the  marker in CLAUDE.md.

What's next

Now that you're set up, learn how all the skills connect together:

View the Workflow Explore Skills