website-builder-setup

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Website Builder Setup

网站构建工具安装教程

This skill walks you through installing everything you need to build professional, animated websites with Claude Code. No coding experience required.

本技能将引导你完成所有必要工具的安装，可借助Claude Code构建专业的带动效的网站，无需编码经验。

What Gets Installed

安装内容清单

Tool	What it does
UI/UX Pro Max	Gives Claude access to 50+ design styles, 161 color palettes, 57 font pairings. Your sites look designed, not generated.
Framer Motion	Adds smooth animations — page transitions, hover effects, scroll reveals. Makes sites feel alive.
21st.dev Magic	A library of 100+ polished React components Claude can pull from. Production-quality building blocks.

工具	功能
UI/UX Pro Max	为Claude提供50+设计风格、161套配色方案、57组字体搭配，让你的网站是专业设计水准，而非AI生成的通用内容。
Framer Motion	添加流畅动画效果——页面转场、悬停动效、滚动显隐，让网站更具生命力。
21st.dev Magic	包含100+打磨成熟的React组件库，可供Claude直接调用，是生产级的开发积木。

Workflow

工作流程

When this skill is triggered, walk the user through each step one at a time. Be encouraging and clear — assume they have zero coding experience. If any step fails, don't stop. Acknowledge it, give them the manual command, and keep moving.

触发本技能后，请一步步引导用户完成操作，语气友好清晰，默认用户无任何编码经验。如果某一步安装失败不要终止流程，告知用户问题，提供手动执行命令后继续推进后续步骤。

Step 1: Check Prerequisites

步骤1：检查前置依赖

Before we start, let me make sure you have what we need.

Run this silently:

bash

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

If Node.js is installed → say "You're good — Node.js is installed. Let's go."
If NOT installed → say:

You need Node.js first. Go to https://nodejs.org and download the LTS version. Install it, restart your terminal, then come back and run
/website-builder-setup
again. Takes 2 minutes.

Stop here if Node is missing.

开始前我们先确认你已准备好必要的环境。

静默执行以下命令：

bash

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

如果已安装Node.js → 告知："环境没问题，Node.js已安装，我们开始吧。"
如果未安装 → 告知：

你需要先安装Node.js，前往https://nodejs.org下载LTS版本，安装完成后重启终端，再回来执行`/website-builder-setup`命令即可，全程仅需2分钟。

如果缺少Node.js则在此终止流程。

Step 2: Install UI/UX Pro Max

步骤2：安装UI/UX Pro Max

Step 1 of 3: UI/UX Pro Max

This gives me a massive design library — 50+ styles, 161 color palettes, 57 font pairings. When you ask me to build a website, I'm pulling from a real design system instead of guessing. This is why the output won't look like generic AI slop.

Installing now...

Run:

bash

npm install -g uipro-cli 2>&1

Then:

bash

uipro init --ai claude 2>&1

On success → "UI/UX Pro Max is installed. Your design stack is ready."
On failure → "Hit a snag. You can try manually later:
```
npm install -g uipro-cli && uipro init --ai claude
```
. Let's keep going."

第1步（共3步）：安装UI/UX Pro Max

这将为我提供庞大的设计库——50+设计风格、161套配色方案、57组字体搭配。当你要求我搭建网站时，我会调用成熟的设计系统而非随机生成内容，这就是最终产出不会是千篇一律的AI生成内容的原因。

正在安装中...

执行命令：

bash

npm install -g uipro-cli 2>&1

然后执行：

bash

uipro init --ai claude 2>&1

安装成功 → 告知："UI/UX Pro Max已安装完成，你的设计技术栈已就绪。"
安装失败 → 告知："遇到小问题，你可以稍后手动执行命令安装：
```
npm install -g uipro-cli && uipro init --ai claude
```
，我们继续下一步。"

Step 3: Install Framer Motion Skill

步骤3：安装Framer Motion技能

Step 2 of 3: Framer Motion

This teaches me how to add real animations to your websites — smooth page transitions, hover effects, scroll-triggered reveals. The stuff that makes a $500 site look like a $10,000 site.

Installing now...

Run:

bash

claude install-skill https://github.com/secondsky/claude-skills -- --name motion 2>&1

On success → "Framer Motion is installed. Your sites will have real animations now."
On failure → try the backup approach:

bash

npx -y @lobehub/market-cli skills install secondsky-claude-skills-motion --agent claude-code 2>&1

If both fail → "Couldn't install automatically. You can try manually:
```
claude install-skill https://github.com/secondsky/claude-skills -- --name motion
```
. Moving on."

第2步（共3步）：安装Framer Motion

这将教会我如何为你的网站添加专业动画效果——流畅的页面转场、悬停动效、滚动触发的显隐效果，能让价值500美元的网站达到1万美元的视觉水准。

正在安装中...

执行命令：

bash

claude install-skill https://github.com/secondsky/claude-skills -- --name motion 2>&1

安装成功 → 告知："Framer Motion已安装完成，你的网站现在可以添加专业动画效果了。"
安装失败 → 尝试备用方案：

bash

npx -y @lobehub/market-cli skills install secondsky-claude-skills-motion --agent claude-code 2>&1

如果两次都失败 → 告知："无法自动安装，你可以稍后手动执行命令安装：
```
claude install-skill https://github.com/secondsky/claude-skills -- --name motion
```
，我们继续下一步。"

Step 4: Set Up 21st.dev Magic

步骤4：配置21st.dev Magic

Step 3 of 3: 21st.dev Components

This connects me to a library of 100+ beautifully designed React components. Instead of building everything from scratch, I pull from production-quality building blocks — buttons, navbars, hero sections, cards, footers — all pre-designed and ready to use.

This one needs a free API key. Here's how to get it:

Go to https://21st.dev/magic/console

Sign up or log in (it's free)

Copy your API key

Paste it here when I ask for it

Wait for the user to provide their API key.

Once they provide it, add the MCP server to their Claude Code config:

Read

~/.claude.json

, find the

mcpServers

object, and add:

json

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

After writing the config:

21st.dev Magic is connected. You'll need to restart Claude Code for this one to kick in — just close and reopen your terminal after we're done.

第3步（共3步）：配置21st.dev组件库

这将对接包含100+精美设计的React组件库，我不需要从零开发所有内容，可直接调用生产级的开发积木——按钮、导航栏、首屏区域、卡片、页脚等，所有组件都已提前设计完成可直接使用。

该工具需要免费的API key，获取方式如下：

前往 https://21st.dev/magic/console

注册或登录账号（完全免费）

复制你的API key

我询问时将其粘贴在这里即可

等待用户提供API key。

用户提供后，将MCP服务添加到用户的Claude Code配置中：

读取

~/.claude.json

文件，找到

mcpServers

对象，添加以下内容：

json

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

写入配置后告知：

21st.dev Magic已对接完成，你需要重启Claude Code才能生效，等我们全部完成后关闭再重新打开终端即可。

Step 5: Done

步骤5：安装完成

You're all set. Here's what you just installed:

UI/UX Pro Max — 50+ styles, 161 palettes, 57 font pairings

Framer Motion — smooth, professional animations

21st.dev Magic — 100+ production-ready components

To build your first website, just tell me:

What your business does

Who it's for

What vibe you want (dark, minimal, bold, playful, etc.)

I'll handle the rest. Try something like:

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

Important: Restart Claude Code first so 21st.dev loads in. Then let's build something.

全部配置完成了，你刚刚安装的内容包括：

UI/UX Pro Max —— 50+设计风格、161套配色方案、57组字体搭配

Framer Motion —— 流畅的专业动画效果

21st.dev Magic —— 100+生产级可用组件

要搭建你的第一个网站，只需告诉我：

你的业务类型

目标受众是谁

想要的风格（深色、极简、醒目、活泼等）

剩下的交给我即可，你可以尝试输入类似的需求：

"帮我为面向小企业主的咨询业务搭建一个落地页，深色主题、现代风格、带动画效果。"

重要提示： 先重启Claude Code让21st.dev配置生效，之后我们就可以开始搭建网站了。

Rules

规则

Walk through each step ONE AT A TIME
Never dump all instructions at once
If any install fails, don't stop — acknowledge, give manual command, keep moving
Be encouraging and casual throughout
Assume zero coding experience
After everything is installed, prompt them to build their first site

每次只引导用户完成一个步骤
不要一次性抛出所有操作说明
如果任意安装步骤失败，不要停止流程，告知问题、提供手动命令后继续推进
全程语气友好随意
默认用户无任何编码经验
全部安装完成后，引导用户提出第一个网站搭建需求