القائمة
Generate websites with Claude Code and deploy to Vercel in one command. Supports static HTML, Next.js, React, Vue. Triggers: deploy website, vercel deploy, 部署网站, 生成网站
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Deploy static sites to GitHub Pages or Mac Mini hosting. Triggers: mofa publish, deploy site, publish website, 发布网站, 部署网页, github pages, deploy to mini, host website, 上线, push to pages, mofa deploy, 发布到GitHub.
Build or scaffold websites from content using Quarto, Astro, Next.js, or React/Vite. Triggers: mofa site, build website, make a website, 建网站, 做个网站, generate site, mofa web, create website, 生成网页, build lesson site, build docs site, 做个教程网站.
Shared CLI binary for all mofa skills (slides, cards, comic, infographic, video). Not a user-facing skill.
AI-generated greeting cards as PNG images. Triggers: greeting card, 贺卡, mofa card, mofa 贺卡, make a card, CNY card, New Year card, 新年贺卡, ink-wash card. Generates full-bleed AI artwork via Gemini in various Chinese art styles.
AI-generated comic strips and illustrations. Triggers: comic, manga, xkcd, 漫画, comic strip, 四格漫画, panel comic, illustration strip, snoopy. Generates multi-panel comics via Gemini with optional Qwen-Edit refinement, stitched into a single image.
AI-generated infographics and visual posters. Triggers: infographic, poster, 信息图, 海报, data poster, visual summary, mofa infographic. Generates multi-section infographic via Gemini with optional Qwen-Edit refinement, stitched into a single tall image.
| name | mofa-vercel-web |
| description | Generate websites with Claude Code and deploy to Vercel in one command. Supports static HTML, Next.js, React, Vue. Triggers: deploy website, vercel deploy, 部署网站, 生成网站 |
| requires_bins | git, npm |
| requires_env | VERCEL_TOKEN |
| always | false |
让 Claude Code 根据你的需求生成网站代码，并自动部署到 Vercel，获得在线访问链接。
npm install -g vercel
方式 A：命令行登录（推荐）
vercel login
# 按提示完成浏览器授权
方式 B：手动获取 Token
export VERCEL_TOKEN="your_vercel_token_here"
或永久配置：
echo 'export VERCEL_TOKEN="your_token"' >> ~/.zshrc
source ~/.zshrc
vercel --version
# 应显示版本号
告诉 Claude 你的需求，它会：
你: "帮我生成一个个人博客网站，深色主题，有文章列表和关于页面"
Claude:
好的！我来为你创建一个深色主题的个人博客。
计划：
- 技术栈: Next.js + Tailwind CSS
- 功能: 首页文章列表、关于页面、响应式设计
- 部署: Vercel
开始生成代码...
✓ 创建项目结构
✓ 编写首页组件
✓ 编写关于页面
✓ 配置深色主题
✓ 本地预览通过
✓ 部署到 Vercel
🎉 部署成功！
访问链接: https://your-blog.vercel.app
| 技术栈 | 适用场景 | 部署方式 |
|---|---|---|
| 静态 HTML | 简单页面、展示型网站 | 直接部署 |
| Next.js | 博客、营销页、全栈应用 | Vercel 原生支持 |
| React (Vite) | 单页应用、交互式网站 | 构建后部署 |
| Vue (Vite) | 轻量级网站、快速原型 | 构建后部署 |
| Astro | 内容型网站、文档站 | 静态生成 |
Claude 生成的项目应遵循以下结构：
my-website/
├── README.md # 项目说明
├── package.json # 依赖配置
├── vercel.json # Vercel 配置（可选）
├── public/ # 静态资源
│ └── images/
├── src/ # 源码
│ ├── components/ # 组件
│ ├── pages/ # 页面（Next.js）
│ ├── App.jsx # 根组件（React/Vue）
│ └── styles/ # 样式文件
└── .gitignore
单文件优先（简单网站）
index.html框架项目（复杂网站）
样式规范
性能优化
# 进入项目目录
cd my-website
# 基础部署（简单情况）
vercel --token $VERCEL_TOKEN --yes
# 完整部署（避免踩坑版）
vercel --token $VERCEL_TOKEN --yes --scope your-team-name --force
# 输出示例:
# 🔗 Production: https://my-website.vercel.app
# 创建临时目录
cd /tmp
mkdir my-static-site
cd my-static-site
# 生成 index.html（Claude 会帮你完成）
# ...
# 直接部署（静态站点无需构建）
export VERCEL_TOKEN="your_token_here"
vercel --token $VERCEL_TOKEN --yes --scope your-team-name --force
# 成功后返回链接如：https://my-static-site-xxx.vercel.app
# 初始化 git
git init
git add .
git commit -m "Initial commit"
# 连接 Vercel（首次需要交互）
vercel --token $VERCEL_TOKEN
# 后续推送自动部署
git push
# 创建部署
curl -X POST "https://api.vercel.com/v13/deployments" \
-H "Authorization: Bearer $VERCEL_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"name": "my-website",
"files": [...],
"projectSettings": {
"framework": "nextjs"
}
}'
需求: "一个产品落地页，展示 AI 写作工具，有定价表格"
生成代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Writer - 智能写作助手</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-b from-gray-900 to-gray-800 text-white">
<!-- Hero Section -->
<header class="container mx-auto px-6 py-20 text-center">
<h1 class="text-5xl font-bold mb-6">AI Writer</h1>
<p class="text-xl text-gray-300 mb-8">让 AI 帮你写出专业内容</p>
<button class="bg-blue-600 px-8 py-3 rounded-full hover:bg-blue-700">
免费试用
</button>
</header>
<!-- Pricing -->
<section class="container mx-auto px-6 py-16">
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-800 p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4">免费版</h3>
<p class="text-3xl font-bold mb-4">¥0</p>
<ul class="space-y-2 text-gray-300">
<li>✓ 每月 1000 字</li>
<li>✓ 基础模板</li>
</ul>
</div>
<!-- 更多定价... -->
</div>
</section>
</body>
</html>
部署:
vercel --token $VERCEL_TOKEN --yes
需求: "一个个人博客，支持 Markdown 文章，深色主题"
生成项目:
# 初始化
npx create-next-app@latest my-blog --typescript --tailwind --eslint --app --src-dir
# 安装依赖
cd my-blog
npm install gray-matter react-markdown
# 生成页面组件、样式、配置文件...
# (Claude 会完成这些)
# 构建
npm run build
# 部署
vercel --token $VERCEL_TOKEN --prod
# 添加域名
vercel domains add my-website.com
# 配置 DNS 后
vercel --token $VERCEL_TOKEN
# 设置环境变量
vercel env add API_KEY
vercel env add DATABASE_URL
{
"version": 2,
"name": "my-website",
"builds": [
{
"src": "package.json",
"use": "@vercel/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/$1"
}
],
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=3600"
}
]
}
]
}
| 问题 | 解决方案 |
|---|---|
VERCEL_TOKEN not found | 检查环境变量是否设置 |
vercel: command not found | 运行 npm install -g vercel |
| 部署失败 | 检查 package.json 和构建脚本 |
| 404 错误 | 检查路由配置或文件路径 |
| 样式丢失 | 确认构建输出目录正确 |
现象：
{
"status": "action_required",
"reason": "missing_scope",
"message": "Provide --scope or --team explicitly..."
}
解决：
# 添加 --scope 参数，值为你的 team name
vercel --token $VERCEL_TOKEN --yes --scope your-team-name
获取 team name：
现象： 提示选择 remote URL，进入交互模式：
? Which remote do you want to connect?
❯ git@github.com:xxx/xxx.git (origin)
https://github.com/xxx/xxx.git (upstream)
解决：
# 清理已存在的 .vercel 配置
rm -rf .vercel
# 或用 --force 强制重新链接
vercel --token $VERCEL_TOKEN --yes --scope your-team --force
现象：
The "--name" option is deprecated (https://vercel.link/name-flag)
解决：
不指定 --name，Vercel 会自动从目录名创建项目。如需指定名称：
# 直接修改目录名
mv my-old-name my-new-name
cd my-new-name
vercel --token $VERCEL_TOKEN --yes
现象： 框架检测失败，提示 "No framework detected"
解决： 这是正常的！静态 HTML 不需要框架。确保目录结构正确：
my-website/
├── index.html # 入口文件必须存在
├── css/
├── js/
└── images/
Vercel 会自动识别为静态站点，无需额外配置。
解决：
# 完整命令，避免任何交互
vercel deploy \
--token $VERCEL_TOKEN \
--yes \
--scope your-team \
--force \
--prod # 如果是生产部署
参数说明：
--yes：跳过确认提示--scope：指定团队--force：强制重新链接项目--prod：部署到生产环境现象：
Error: You do not have permission to access this resource
解决：
组合使用:
mofa-firecrawl: 获取参考网站内容
分析设计思路
mofa-vercel-web: 生成类似网站并部署
组合使用:
mofa-research-2.0: 研究最佳网站设计实践
mofa-vercel-web: 按照最佳实践生成网站
区别:
| 项目 | 费用 |
|---|---|
| Vercel Hobby 计划 | 免费（个人项目） |
| 自定义域名 | ¥50-100/年 |
| Pro 计划 | $20/月（团队） |
Hobby 计划包含：
从简单开始
明确需求
迭代优化
性能优先
场景： 将生成的静态 HTML 网站部署到 Vercel
完整流程：
# 1. 确保 Vercel CLI 已安装
npm install -g vercel
# 2. 进入网站目录
cd /tmp/mofa-showcase
ls -la
# index.html
# 3. 清理可能存在的旧配置（避免冲突）
rm -rf .vercel .git
# 4. 设置 Token 并部署
export VERCEL_TOKEN="your_token_here"
vercel --token $VERCEL_TOKEN --yes --scope bh3geis-projects --force
# 5. 查看输出
# Production: https://mofa-showcase-xxx.vercel.app
遇到的坑：
--scope，报错 missing_scope.git 配置，提示选择 remote → 用 rm -rf .git 清理--name 参数已弃用 → 直接靠目录名识别最终结果：