内容
# Higgsfield 网站技能 🎬
一款 Claude-Code 技能，根据简短描述构建**电影化滚动网站，配备 AI 生成的视频** — Higgsfield MCP（Seedance 2.0，GPT Image 2，Nano Banana），滚动-擦除/爆炸视图动画，自动浏览器 QA 测试和托管在一个流程中。适用于产品、投资组合、餐厅、房地产、电子商务、SaaS、健身房等。
## 🤖 代理优先：在一个提示中设置
将此提示复制到 **Claude Code** （或其他编码代理）- 它将安装所有内容：
```text
安装Higgsfield网站技能从 https://github.com/Arnie936/higgsfield-website-skill :
1. 获取技能并复制 "higgsfield-website" 文件夹到
".claude/skills/higgsfield-website" 在当前项目中。
（问我是否愿意在 "~/.claude/skills" 下全局安装。）
- 如果安装了 git：克隆存储库到临时目录。
- 如果没有：不要安装 git，而是下载 ZIP 文件并解压：
https://github.com/Arnie936/higgsfield-website-skill/archive/refs/heads/main.zip
（Windows：Invoke-WebRequest + Expand-Archive / macOS+Linux：curl -L + unzip）
2. 注册 MCP 服务器始终基于项目（--scope project），从不全局：
claude mcp add --scope project --transport http higgsfield https://mcp.higgsfield.ai/mcp
claude mcp add --scope project playwright -- npx @playwright/mcp@latest
3. 检查是否安装了 ffmpeg （ffmpeg -version）。如果没有，请根据
操作系统安装它（Windows：winget install Gyan.FFmpeg / macOS：brew install ffmpeg /
Linux：apt install ffmpeg）- 请先向我请求许可。
4. 如果我还没有 Higgsfield 帐户或 MCP 连接未授权：
请我通过此链接注册并授权连接：
https://higgsfield.ai/s/mcp-arnold-oberleiter-PGBQCb
5. 告诉我需要重启 Claude Code 以连接 MCP 服务器。
6. 确认安装并解释如何使用技能
（简单描述您想要的网站 - 技能将处理其余部分）。
```
> 注意：注册链接是我的推荐链接，谢谢 =)
## 技能功能
- **访谈代替提示拼凑：** 您想构建什么？生成自己的输入图像或英雄图像？高清或 4K？目标语言？目标设备（桌面/平板/移动）？
- **10 个模板 + 7 个滚动概念：** 豪华产品、旅程、投资组合、电子商务、餐厅、房地产、汽车、SaaS、机构、健身房 - 结合有意识选择的滚动行为（滚动擦除，**爆炸视图**，推入，滚动讲述等）。
- **控制成本：** 拍摄计划与信用估算和批准，然后再生成任何内容；英雄图像检查点，然后再创建昂贵的视频。
- **工艺而非 AI 外观：** 论点行，OKLCH 调色板，文案规则，AI 禁止列表，视频法律，适用于可擦除剪辑。
- **真正的 QA 环节：** 代理在浏览器中测试成品网站（Playwright）：滚动擦除，控制台，布局，选择的视口 - 然后才提出验收问题。
- **托管：** 如有需要，直接通过 Higgsfield MCP 进行托管。
## 手动安装
1. 将 `higgsfield-website/` 文件夹复制到项目中的 `.claude/skills/` （或全局的 `~/.claude/skills/`）。
2. 添加 Higgsfield MCP：`claude mcp add --scope project --transport http higgsfield https://mcp.higgsfield.ai/mcp`
3. 创建 Higgsfield 帐户/授权 MCP：https://higgsfield.ai/s/mcp-arnold-oberleiter-PGBQCb
4. 重启 Claude Code 并编写例如：*“为我的手表品牌创建一个电影化网站，带有爆炸视图效果。”*
## 要求
- Claude Code 和 Higgsfield 积分（Seedance 2.0）
- Higgsfield MCP + Playwright MCP（基于项目）和 ffmpeg - **如果缺少，技能会在设置检查时自行安装**；上面的设置提示也会设置所有内容
## 结构
```
higgsfield-website/
├── SKILL.md # 工作流程：访谈 → 成本批准 → 英雄检查点 →
│ # 视频 → 网站 → 浏览器 QA → 验收 → 托管
└── references/
├── templates.md # 10 个网站模板（镜头，章节，设计，文案）
└── craft.md # 7 个滚动概念，设计 DNA，视频法律，质量门控
```
