mcpField
W
website-builder-setup

website-builder-setup

github.com/tenfoldmarc设计与 UI373586 次安装28 周前更新
代码仓库

关于 website-builder-setup

为 Claude Code 引导安装网站构建所需工具的技能，面向没有编程经验的用户。流程涵盖设计资源、Framer Motion 动画库和 React 组件库，并配置 21st.dev Magic 的 MCP 服务。

主要功能

  1. 01检查 Node.js 与 npm
  2. 02安装 UI/UX Pro Max
  3. 03安装 Framer Motion
  4. 04配置 21st.dev Magic
  5. 05逐步引导安装并处理失败

适用场景

  1. 01为 Claude Code 准备网站设计工具
  2. 02为网站项目安装动画依赖
  3. 03配置 21st.dev Magic 组件服务
  4. 04按步骤完成构建环境设置

MCP 相关

该技能将 21st.dev Magic 配置为 Claude Code 中的 MCP 服务，并通过 API key 连接组件库。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tenfoldmarc/website-builder-setup --skill website-builder-setup

安装后在 Claude Code 中输入/website-builder-setup确认已加载。

详细介绍

网站构建器设置

本技能将引导你安装使用 Claude Code 构建专业动画网站所需的一切。无需编程经验。

将安装的内容

工具功能
UI/UX Pro Max让 Claude 能够使用 50+ 种设计风格、161 种配色方案和 57 组字体搭配。你的网站看起来像精心设计的作品，而不是生成内容。
Framer Motion添加流畅动画——页面过渡、悬停效果、滚动显示。让网站充满活力。
21st.dev Magic一个包含 100+ 个精美 React 组件的库，Claude 可以从中选用。提供生产级构建模块。

工作流

触发此技能后，每次只引导用户完成一个步骤。保持鼓励和清晰——假设他们完全没有编程经验。如果任何步骤失败，不要停止。说明情况，提供手动命令，然后继续。

步骤 1：检查前置条件

开始之前，我先确认你是否具备所需条件。

静默运行：

node --version 2>&1 && npm --version 2>&1
  • 如果已安装 Node.js → 说：“一切就绪——已安装 Node.js。我们开始吧。”
  • 如果未安装 → 说：

你需要先安装 Node.js。访问 https://nodejs.org 并下载 LTS 版本。安装后，重启终端，然后回来再次运行 /website-builder-setup。只需 2 分钟。

如果缺少 Node.js，请在此处停止。

步骤 2：安装 UI/UX Pro Max

步骤 1，共 3 步：UI/UX Pro Max

这会为我提供一个庞大的设计库——50+ 种风格、161 种配色方案和 57 组字体搭配。当你让我构建网站时，我会采用真正的设计系统，而不是凭空猜测。这就是为什么生成结果不会像千篇一律的 AI 垃圾内容。

正在安装……

运行：

npm install -g uipro-cli 2>&1

然后：

uipro init --ai claude 2>&1
  • 成功时 → “UI/UX Pro Max 已安装。你的设计工具链已准备就绪。”
  • 失败时 → “遇到了一点问题。之后你可以手动尝试：npm install -g uipro-cli && uipro init --ai claude。我们继续。”
步骤 3：安装 Framer Motion

步骤 2，共 3 步：Framer Motion

这会教我如何为你的网站添加真实动画——流畅的页面过渡、悬停效果、滚动触发显示。这些效果能让价值 500 美元的网站看起来像价值 10,000 美元的网站。

正在安装……

运行：

npm install framer-motion 2>&1
  • 成功时 → “Framer Motion 已安装。你的网站现在会有真正的动画效果。”
  • 失败时 → “遇到了一点问题。之后你可以手动尝试：npm install framer-motion。继续下一步。”
步骤 4：设置 21st.dev Magic

步骤 3，共 3 步：21st.dev 组件

这会将我连接到一个包含 100+ 个精美设计 React 组件的库。我无需从头构建所有内容，而是从生产级构建模块中选用——按钮、导航栏、主视觉区域、卡片、页脚——这些组件都已预先设计好，可以直接使用。

这一步需要免费的 API 密钥。获取方法如下：

  1. 访问 https://21st.dev/magic/console
  2. 注册或登录（免费）
  3. 复制你的 API 密钥
  4. 在我询问时将它粘贴到这里

等待用户提供 API 密钥。

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

读取 ~/.claude.json，找到 mcpServers 对象，并添加：

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

写入配置后：

21st.dev Magic 已连接。要让它生效，你需要重启 Claude Code——完成后只需关闭并重新打开终端。

步骤 5：完成

一切就绪。 你刚刚安装了：

  • UI/UX Pro Max — 50 多种风格、161 种配色方案、57 组字体搭配
  • Framer Motion — 流畅、专业的动画效果
  • 21st.dev Magic — 100 多个可用于生产环境的组件

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

  • 你的业务是什么
  • 面向哪些用户
  • 想要什么风格（暗色、简约、大胆、活泼等）

剩下的交给我。试试这样说：

“为我的咨询业务构建一个着陆页，面向小型企业主。采用暗色主题，风格现代，并带有动画效果。”

重要： 先重启 Claude Code，让 21st.dev 加载。然后我们就开始构建吧。

规则

  • 一次只讲解一个步骤
  • 不要一次性给出所有说明
  • 如果安装失败，不要停下来——说明情况，提供手动命令，然后继续
  • 全程保持鼓励、随和的语气
  • 假设用户完全没有编程经验
  • 全部安装完成后，提示他们构建自己的第一个网站

评论

支持 Markdown