内容
# 使用Claude代码构建惊艳的网站
> YouTube视频中的完整设置指南 — 复制并粘贴所有您需要的。
无需学习框架。无需设计技能。只需Claude代码 + 正确的工具连接。
---
## 您将安装的内容
| 工具 | 功能 |
|------|-------------|
| **UI/UX Pro Max** | 为Claude提供庞大的设计系统：67种样式、96种调色板、57种字体配对 |
| **21st.dev Magic MCP** | 让Claude可以提取100+精致、生产就绪的React组件 |
| **Playwright MCP** | 让Claude可以截取实时网站的截图并自动修复视觉问题 |
---
## 先决条件
您需要安装 **Node.js** 和 **Claude Code**。
- Node.js: https://nodejs.org (下载LTS版本)
- Claude Code: https://claude.ai/code
验证Node是否已安装：
```bash
node --version
npm --version
```
---
## 步骤 1 — 安装UI/UX Pro Max
这为Claude提供了一个专业的词汇设计。没有它，Claude会默认使用通用字体Inter + 蓝色按钮。
```bash
npm install -g uipro-cli
uipro init --ai claude
```
完成。Claude现在可以在每个项目中访问完整的设计库。
---
## 步骤 2 — 设置21st.dev Magic MCP
这将Claude连接到一个精致的UI组件库，以便在构建网站时可以提取。
**2a. 获取您的免费API密钥**
1. 访问 https://21st.dev/magic/console
2. 注册（免费）
3. 复制您的API密钥
**2b. 将其添加到Claude Code**
在任意文本编辑器中打开 `~/.claude.json`，并在 `"mcpServers"` 对象中添加以下内容：
```json
"21st-dev-magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "YOUR_API_KEY_HERE"
}
}
```
如果 `mcpServers` 尚不存在，则您的完整 `~/.claude.json` 应如下所示：
```json
{
"mcpServers": {
"21st-dev-magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "YOUR_API_KEY_HERE"
}
}
}
}
```
**保存后重启Claude Code**。
---
## 步骤 3 — 安装Playwright MCP
这让Claude可以在无头浏览器中打开已部署的网站，截取截图，并自动修复视觉错误 — 无需手动审查。
在 `~/.claude.json` 中将以下内容添加到 `"mcpServers"`（与21st.dev条目一起）：
```json
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
```
**保存后重启Claude Code**。
您的最终 `~/.claude.json` 应包含两个条目：
```json
{
"mcpServers": {
"21st-dev-magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "YOUR_API_KEY_HERE"
}
},
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
```
---
## 步骤 4 — 主构建提示
将整个提示复制到Claude Code中。填写括号部分，然后发送。
```
为我构建一个完整、生产就绪的网站。以下是详细信息：
**项目：**
[业务/项目做什么？ 1-2 句话]
**目标受众：**
[针对谁？]
**所需页面/部分：**
[例如：英雄、服务、定价、关于、联系 — 或只需“标准登陆页面”]
**氛围/美学：**
[例如：黑暗&极简、粗犷&色彩鲜明、豪华、活泼、公司、野蛮、编辑]
**技术栈：**
[Next.js + Tailwind + shadcn/ui（默认）— 或纯HTML（如果您想要单个文件）]
**颜色或参考：**
[任何特定的颜色、字体或网站以获取灵感 — 可选]
---
设计要求（请严格遵循）：
- 使用UI/UX Pro Max选择特定的美学风格、色彩调色板和字体配对。
绝不使用通用字体如Inter、Roboto、Open Sans或Lato。
选择适合氛围的字体。
- 在从头开始编写任何部分之前，请在21st.dev Magic中搜索用于英雄、导航和功能/服务卡的精致组件。
- 每个页面必须包括：
1. 英雄部分的交错进入动画（Framer Motion：不透明度 + translateY，0.1s交错）
2. 所有部分的滚动触发显示（whileInView，viewport once：true）
3. 卡片的悬停提升（translateY -4px，box-shadow）
4. 英雄部分中至少一个环境背景动画（浮动渐变球体或网格渐变）
5. 使用AnimatePresence的页面过渡
- 网站必须看起来是专门为该项目设计的 — 而不是模板。
完全致力于所选的风格。不要半途而废。
- 编写所有文件。没有TODO，没有占位符，没有“稍后实现”注释。
```
---
## 截图审查的工作原理
一旦网站部署（到Vercel、Netlify、Surge等），请在您的提示中添加以下内容：
```
导航到 [YOUR_LIVE_URL]，截取完整页面的截图，检查是否有任何视觉问题
（损坏的字体、布局溢出、低对比度、部分未对齐），一次性修复所有问题，
重新部署，并再次截取截图以确认。
```
Claude将在无头浏览器中打开实时网址，截取截图，诊断问题，修复
HTML/代码，重新部署，并通过截图验证 — 自动完成。
---
## 快速参考
| 内容 | 命令/位置 |
|------|-------------------|
| UI/UX Pro Max安装 | `npm install -g uipro-cli && uipro init --ai claude` |
| MCP配置文件 | `~/.claude.json` → `mcpServers` |
| 21st.dev API密钥 | https://21st.dev/magic/console |
| 重启Claude Code | 关闭并重新打开应用程序或终端 |
---
## 故障排除
**"uipro: command not found"**
再次运行 `npm install -g uipro-cli`。如果在Mac/Linux上，您可能需要 `sudo`。
**21st.dev 组件未出现**
确保在编辑 `~/.claude.json` 后重启了Claude Code。检查密钥是否正确
（无额外空格或引号）。
**Playwright截图无法工作**
某些环境会阻止无头浏览器。作为备用方案，请部署网站并手动粘贴网址
— Claude仍然可以在没有截图的情况下读取和修复代码。
---
使用Claude Code构建 · github.com/[your-handle]/claude-web-stack-guide
