Website Builder Setup for Claude Code

The installation provides three core toolsets to enhance Claude's web design capabilities:

• UI/UX Pro Max: Provides 50+ design styles, 161 color palettes, and 57 font pairings to ensure professional aesthetics.
• Framer Motion: Enables smooth animations including page transitions, hover effects, and scroll reveals.
• 21st.dev Magic: Provides access to 100+ production-ready React components (buttons, navbars, hero sections, cards, footers, etc.).

To use this skill, you must have the following installed:

• Claude Code
• Node.js (LTS version)

To use the 21st.dev component library, you must add its MCP server to your Claude Code configuration (~/.claude.json).

1. Get an API Key

1. Visit https://21st.dev/magic/console.
2. Sign up or log in.
3. Copy your API key.

2. Update Claude Config

Add the following object to the mcpServers section in your ~/.claude.json file, replacing THEIR_KEY_HERE with your actual API key:

"21st-dev-magic": {
  "command": "npx",
  "args": ["-y", "@21st-dev/magic@latest"],
  "env": {
    "API_KEY": "THEIR_KEY_HERE"
  }
}

Note: You must restart Claude Code for the 21st.dev connection to take effect.

Install the UI/UX Pro Max design system globally and initialize it for Claude using the following commands:

1. Install the CLI:

   npm install -g uipro-cli 2>&1

2. Initialize for Claude:

   uipro init --ai claude 2>&1

To enable professional animations in your websites, install the framer-motion package in your project directory:

npm install framer-motion 2>&1

You can install this skill in Claude Code using two methods:

Method 1: Automated (Easiest)

Open Claude Code and provide the following prompt: Install this skill for me: https://github.com/tenfoldmarc/website-builder-setup

Method 2: Manual Git Clone

Clone the repository directly into your Claude commands directory.

Mac/Linux:

git clone https://github.com/tenfoldmarc/website-builder-setup.git ~/.claude/commands/website-builder-setup

Windows:

git clone https://github.com/tenfoldmarc/website-builder-setup.git %USERPROFILE%\.claude\commands\website-builder-setup

After installation, initiate the setup by typing /website-builder-setup in Claude Code.

This setup installs three core tools to enable professional, animated website generation with Claude Code:

1. UI/UX Pro Max: Provides a design library of 50+ styles, 161 color palettes, and 57 font pairings.
2. Framer Motion: Enables smooth animations like page transitions, hover effects, and scroll reveals.
3. 21st.dev Magic: Connects to a library of 100+ production-quality React components (buttons, navbars, hero sections, etc.).

Before installing the website builder stack, ensure Node.js and npm are installed on your system. You can verify this by running:

node --version 2>&1 && npm --version 2>&1

If Node.js is not installed, download the LTS version from https://nodejs.org, install it, restart your terminal, and then proceed with the setup.

Once the setup is complete, you can trigger website generation by describing your requirements to Claude. You should specify the purpose, target audience, theme, and desired effects.

Example Prompt:

Build me a landing page for my consulting business targeting small business owners.
Dark theme, modern, with animations.