Setup Guide — Animated Website Builder Pipeline

• Node.js v18+ installed — nodejs.org
• Python 3.10+ installed — required by the UI UX Pro Max skill's design system scripts
• Claude Code installed and working
• Windows users: All MCP servers using npx need the cmd /c wrapper (shown in commands below)
• macOS/Linux users: You do not need the cmd /c wrapper. Wherever you see "command":"cmd","args":["/c","npx","-y","package-name"], replace with "command":"npx","args":["-y","package-name"]
• For Tool 5 (Nano Banana 2): You will need Git Bash or WSL on Windows to run the install script. Git Bash comes with Git for Windows.

MCP servers are external tools that Claude Code connects to. You add them with claude mcp add-json.

What it does: Generates full UI screens (HTML/CSS) from text prompts using Gemini 3.1 Pro.

Prerequisites for Stitch:

• A Google Cloud account with billing enabled — console.cloud.google.com. Billing is required for the Stitch API to function, even with an API key.

Available Stitch Tools

Step 1 — Install Google Cloud CLI

On Windows: Open PowerShell as Administrator and run:

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:TEMP\GoogleCloudSDKInstaller.exe"); & "$env:TEMP\GoogleCloudSDKInstaller.exe"

Alternatively, download the installer manually from cloud.google.com/sdk/docs/install.

Follow the installer prompts, then close and reopen your terminal.

On macOS/Linux: Follow the instructions at cloud.google.com/sdk/docs/install.

Verify it installed:

gcloud --version

If you get a “not recognized” error, the installer may not have added gcloud to your PATH. Close all terminals and try again.

Step 2 — Configure Google Cloud

gcloud init

• Sign in with your Google account (a browser window will open).
• Select an existing project or create a new one.
• Skip setting a default region if prompted (not required for Stitch).

Verify your project is set and save your Project ID:

gcloud config get-value project

This will output something like my-project-123456.

Step 3 — Enable the Stitch API

1. Go to console.developers.google.com/apis/api/stitch.googleapis.com (make sure the correct project is selected in the top dropdown).
2. Click Enable.
3. Wait a few minutes for the change to propagate before testing.

Step 4 — Get your Stitch API key

1. Go to stitch.withgoogle.com.
2. Sign in with your Google account.
3. Click your profile picture (top-right corner).
4. Select Stitch Settings.
5. Scroll down and click Create Key.
6. Copy the API key — you will need it in Step 6.

Step 5 — Verify the Stitch MCP package

npx -y stitch-mcp@latest --help

If this prints usage info or exits cleanly, you're good to go. If it hangs or starts a server, press Ctrl+C to stop it — that's still a pass (the package installed correctly).

Step 6 — Add to Claude Code

Run in your regular terminal (not inside Claude Code):

On Windows:

claude mcp add-json stitch "{\"command\":\"cmd\",\"args\":[\"/c\",\"npx\",\"-y\",\"stitch-mcp@latest\"],\"env\":{\"STITCH_API_KEY\":\"YOUR_STITCH_API_KEY\",\"GOOGLE_CLOUD_PROJECT\":\"YOUR_PROJECT_ID\"}}" --scope user

On macOS/Linux:

claude mcp add-json stitch '{"command":"npx","args":["-y","stitch-mcp@latest"],"env":{"STITCH_API_KEY":"YOUR_STITCH_API_KEY","GOOGLE_CLOUD_PROJECT":"YOUR_PROJECT_ID"}}' --scope user

Step 7 — Restart and Verify

1. Restart Claude Code completely (close it and reopen).
2. Type /mcp inside Claude Code.
3. Look for stitch in the server list — it should show a green checkmark (✓).
4. Test it by asking: List my Stitch projects.

Your Final Config

Your Claude config file should contain the Stitch entry:

{
  "mcpServers": {
    "stitch": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "stitch-mcp@latest"],
      "env": {
        "STITCH_API_KEY": "YOUR_STITCH_API_KEY",
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Stitch Troubleshooting

Server shows “✘ failed” in /mcp? Run the server manually to see the actual error:

cmd.exe:

set STITCH_API_KEY=YOUR_STITCH_API_KEY && set GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID && npx -y stitch-mcp@latest

PowerShell:

$env:STITCH_API_KEY="YOUR_STITCH_API_KEY"; $env:GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_ID"; npx -y stitch-mcp@latest

Git Bash / macOS / Linux:

STITCH_API_KEY="YOUR_STITCH_API_KEY" GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_ID" npx -y stitch-mcp@latest

Common Errors

To remove and re-add:

claude mcp remove stitch --scope user

Then repeat Step 6.

To check debug logs:

claude --debug

Then type /mcp and select the stitch server to see detailed error output.

What it does: Fetches and generates UI components (hero sections, backgrounds, etc.) from the 21st.dev library.

Step 1 — Get your API key

1. Go to 21st.dev.
2. Create an account / sign in.
3. Click your profile icon (top right) → Settings → API Keys.
4. Click Generate API Key and copy it.

Step 2 — Add to Claude Code

On Windows:

claude mcp add-json magic "{\"type\":\"stdio\",\"command\":\"cmd\",\"args\":[\"/c\",\"npx\",\"-y\",\"@21st-dev/magic@latest\"],\"env\":{\"API_KEY\":\"YOUR_21ST_DEV_API_KEY\"}}" --scope user

On macOS/Linux:

claude mcp add-json magic '{"type":"stdio","command":"npx","args":["-y","@21st-dev/magic@latest"],"env":{"API_KEY":"YOUR_21ST_DEV_API_KEY"}}' --scope user

Step 3 — Verify

Restart Claude Code, then type /mcp to verify magic shows a green checkmark.

What it does: Scrapes websites to extract content, brand identity, design patterns, etc.

Step 1 — Get your API key

1. Go to firecrawl.dev.
2. Create an account / sign in.
3. Go to your Dashboard and copy your API key (starts with fc-).

Step 2 — Add to Claude Code

On Windows:

claude mcp add-json firecrawl-mcp "{\"type\":\"stdio\",\"command\":\"cmd\",\"args\":[\"/c\",\"npx\",\"-y\",\"firecrawl-mcp\"],\"env\":{\"FIRECRAWL_API_KEY\":\"YOUR_FIRECRAWL_API_KEY\"}}" --scope user

On macOS/Linux:

claude mcp add-json firecrawl-mcp '{"type":"stdio","command":"npx","args":["-y","firecrawl-mcp"],"env":{"FIRECRAWL_API_KEY":"YOUR_FIRECRAWL_API_KEY"}}' --scope user

Step 3 — Verify

Restart Claude Code, then type /mcp to verify firecrawl-mcp shows a green checkmark.

Skills are prompt files that teach Claude Code how to use a tool or follow a workflow. They are installed via Claude Code's skill/plugin system.

What it does: Generates design systems — color palettes, typography, spacing tokens, button styles, and more. This is the only required tool in the pipeline — the design system it produces drives all other steps.

Source: GitHub — nextlevelbuilder/ui-ux-pro-max-skill

Step 1 — Register the skill marketplace source

This adds the GitHub repo as a known skill source in Claude Code. Run in your terminal:

claude settings set extraKnownMarketplaces.ui-ux-pro-max-skill '{"source":{"source":"github","repo":"nextlevelbuilder/ui-ux-pro-max-skill"}}'

This writes the following to your ~/.claude/settings.json:

{
  "extraKnownMarketplaces": {
    "ui-ux-pro-max-skill": {
      "source": {
        "source": "github",
        "repo": "nextlevelbuilder/ui-ux-pro-max-skill"
      }
    }
  }
}

Step 2 — Enable the skill in your project

Open Claude Code in your project directory and run:

/skills

Find ui-ux-pro-max in the list and enable it. This will:

• Download the SKILL.md, data files (CSV), and Python scripts into .claude/skills/ui-ux-pro-max/
• Add the plugin entry to .claude/settings.local.json:

{
  "enabledPlugins": {
    "ui-ux-pro-max@ui-ux-pro-max-skill": true
  }
}

Step 3 — Verify

Type /ui-ux-pro-max in Claude Code — it should load the skill prompt. You should also see the following files in your project:

.claude/skills/ui-ux-pro-max/
├── SKILL.md
├── data/          (CSV files for colors, typography, styles, etc.)
└── scripts/       (Python scripts for design system generation)

If the .claude/skills/ui-ux-pro-max/ directory is empty or missing files, disable and re-enable the skill via /skills.

What it does: Generates images using Gemini 3.1 Flash via the inference.sh CLI.

Step 1 — Install the inference.sh CLI

This project includes install.sh, which is a Linux/macOS-style bash script. On Windows, open Git Bash (search for it in your Start menu — it comes with Git for Windows) and run:

cd /c/Users/$USER/Documents/_SPRING_2026/CIS240/week_10/animated-website
bash install.sh

This installs the CLI to ~/.local/bin/. The installer creates two equivalent commands: inferencesh (full name) and infsh (shorthand alias). You can use either one — they do the same thing.

Step 2 — Verify it installed

inferencesh --version

If the command is not found, you may need to add ~/.local/bin to your PATH:

export PATH="$HOME/.local/bin:$PATH"

Then try again.

Step 3 — Install the skill file

The Nano Banana 2 skill needs to live at the user level so it's available across all projects. Create the directory and download the skill:

mkdir -p ~/.claude/skills/nano-banana-2

If the skill file is not already present, copy it from the skill repository:

curl -o ~/.claude/skills/nano-banana-2/SKILL.md \
  https://raw.githubusercontent.com/inference-sh/skills/main/tools/image/nano-banana-2/SKILL.md

Step 4 — Verify

Type /nano-banana-2 in Claude Code — it should load the skill prompt. You can also confirm the CLI works by running infsh --version in your terminal.

The pipeline command ties all 5 tools together into the /animated-website workflow. It lives in the project's .claude/commands/ directory.

What it does: When you type /animated-website in Claude Code, it launches a 7-step pipeline that uses all the tools above to generate a complete animated single-page website from a text brief.

Step 1 — Create the commands directory

mkdir -p .claude/commands

Step 2 — Create the pipeline command file

Create the file .claude/commands/animated-website.md with the pipeline instructions. This file is already included in this project's repository. If it's missing, you can copy it from .claude/skills/animated-website/SKILL.md.

Step 3 — Verify

Type /animated-website in Claude Code — it should respond with:

After everything is installed, restart Claude Code and check:

After installation, use the pipeline:

/animated-website

Site name: Slice of Heaven
Purpose: Pizza shop
Style: warm, rustic, inviting. Red and gold with a dark background.
Sections: Hero, About, Menu, Reviews, Visit Us, Footer
Reference URL: https://example-pizza-site.com
Image descriptions:
  - Hero: a steaming wood-fired pizza on a rustic wooden board, warm lighting
  - Menu: overhead shot of four different pizzas on a checkered tablecloth

The pipeline will automatically:

1. UI UX Pro Max — Generate your design system (colors, fonts, spacing)
2. Firecrawl — Scrape the reference site for brand/layout inspiration
3. 21st.dev Magic — Generate hero component (if prompt provided)
4. Google Stitch — Generate UI screens for each section
5. Nano Banana 2 — Generate images for the site
6. Assembly — Combine everything into a single animated HTML file
7. Review — Verify all sections, animations, and responsive design