Antigravity 做“高端”动效网站+语音客服(Antigravity+claude code +n8n+MCP)
1431 次观看 · 2026-01-24
动效设计
大多数 AI 做出来的网站，看起来都 一样、像模板、没灵魂。而在这支视频里，我会完整展示：
👉 如何用 AI，做出真正「高端、专业、设计师级」的网站
💥 这支视频你会看到什么？
我从 0 到 1，用 Antigravity + Gemini + Claude Code，做了一个：
* ❌ 不像 AI 模板
* ✅ 极简 Brutal 风格
* ✅ 大字号 Condensed Fonts
* ✅ GSAP 滚动叙事 + 高视觉动效
* ✅ 真正有设计意图的布局
* ✅ 酷炫Mega Menu
而且不只是网站外观
🤖 高级 AI Chat Widget（重点）
我还在这个网站里，嵌入了一个高级 AI Chat Widget：
* ✨ 同时支持 文字 + 语音输入
* 🔊 AI 可以 文字回复 + 语音回复
* 🧠 背后不是简单 API，而是：
* Claude Code
* n8n MCP
* n8n Skills
* 自定义 AI Chatbot Workflow
我直接让 Claude Code 帮我设计 & 实现整个 n8n 工作流，并且 把这个 Workflow 无缝接入到网站的 Chat Widget 里。
🧠 视频里我会详细讲：
* 如何用 Antigravity 设计一个「有审美」的网站，而不是 AI 模板
* 如何用 Gemini 3 Pro nano banana pro 辅助生成符合视觉风格的素材
* GSAP 如何用在：
* Scroll storytelling
* Section reveal
* 高级 hover / micro animation
* 如何设计一个 设计师级 AI Chat Widget（不是那种默认浮窗）
* Claude Code + n8n MCP 是如何：
* 设计 AI Chat 工作流
* 支持文字 & 语音
* 真正“像产品一样工作”
0:00 intro
3:08 分析如何实现
4:49 安装N8N mcp
8:11 安装 n8n skill
11:00 创建 Claude Code , Claude.MD file
11:31 Claude code 计划工作流
14:39 n8n 工作流链接API
18:17 Antigravity 制作落地页
23:22 Antigravity 制作机器人客服
25:05 Claude code 链接工作流到机器人客服
视频里提到的网站:
https://antigravity.google/download
https://github.com/czlonkowski/n8n-mcp
https://github.com/czlonkowski/n8n-skills
N8N 托管服务 (最好使用的托管服务) 使用以下链接20% 折扣
https://www.hostinger.com/cart?product=vps%3Avps_kvm_2&period=12&referral_type=cart_link&REFERRALCODE=FFDYUYAMEQ9O&referral_id=019bf0fa-b4cd-7209-b3de-5e295397ac9e
安装Claude code,使用以下文档
https://code.claude.com/docs/en/setup
🎯 如果你是下面这些人，这支视频一定适合你：
* 想用 AI 做高质量产品，而不是 Demo
* 设计师 / 创作者 / Vibe Coder
* 不会写太多代码，但想做 专业级 AI 网站
* 对 Antigravity / Claude Code / n8n / GSAP 感兴趣
* 想把 AI 真正用在「可上线、可商用」的项目里
🔔 这是一个完整实战，不是概念介绍
我会把思路、设计判断、技术选择全部讲清楚。如果你想看到 AI + 设计 + 自动化 真正结合在一起的样子——这支视频一定要看完。
👉 如果你喜欢这种「不像 AI 的 AI 项目」内容，记得订阅，我会持续分享。
🔔 订阅频道，获取更多 AI × Design × App 构建教学！
欢迎👏加入我的设计师交流群
https://discord.gg/WEuhP33f9P
我是谁：我是yuya , 热衷于UI/UX设计 和网页设计, 每周我都会分享很多好用的资源, 工具,和设计方面的一些小教程, 希望能跟志同道合的小伙伴一起分享
本视频描述中的部分链接为联盟（Affiliate）链接。如果你通过这些链接购买产品，我可能会获得少量佣金，但不会增加你的任何额外费用。感谢你的支持 ❤️
👉 如何用 AI，做出真正「高端、专业、设计师级」的网站
💥 这支视频你会看到什么？
我从 0 到 1，用 Antigravity + Gemini + Claude Code，做了一个：
* ❌ 不像 AI 模板
* ✅ 极简 Brutal 风格
* ✅ 大字号 Condensed Fonts
* ✅ GSAP 滚动叙事 + 高视觉动效
* ✅ 真正有设计意图的布局
* ✅ 酷炫Mega Menu
而且不只是网站外观
🤖 高级 AI Chat Widget（重点）
我还在这个网站里，嵌入了一个高级 AI Chat Widget：
* ✨ 同时支持 文字 + 语音输入
* 🔊 AI 可以 文字回复 + 语音回复
* 🧠 背后不是简单 API，而是：
* Claude Code
* n8n MCP
* n8n Skills
* 自定义 AI Chatbot Workflow
我直接让 Claude Code 帮我设计 & 实现整个 n8n 工作流，并且 把这个 Workflow 无缝接入到网站的 Chat Widget 里。
🧠 视频里我会详细讲：
* 如何用 Antigravity 设计一个「有审美」的网站，而不是 AI 模板
* 如何用 Gemini 3 Pro nano banana pro 辅助生成符合视觉风格的素材
* GSAP 如何用在：
* Scroll storytelling
* Section reveal
* 高级 hover / micro animation
* 如何设计一个 设计师级 AI Chat Widget（不是那种默认浮窗）
* Claude Code + n8n MCP 是如何：
* 设计 AI Chat 工作流
* 支持文字 & 语音
* 真正“像产品一样工作”
0:00 intro
3:08 分析如何实现
4:49 安装N8N mcp
8:11 安装 n8n skill
11:00 创建 Claude Code , Claude.MD file
11:31 Claude code 计划工作流
14:39 n8n 工作流链接API
18:17 Antigravity 制作落地页
23:22 Antigravity 制作机器人客服
25:05 Claude code 链接工作流到机器人客服
视频里提到的网站:
https://antigravity.google/download
https://github.com/czlonkowski/n8n-mcp
https://github.com/czlonkowski/n8n-skills
N8N 托管服务 (最好使用的托管服务) 使用以下链接20% 折扣
https://www.hostinger.com/cart?product=vps%3Avps_kvm_2&period=12&referral_type=cart_link&REFERRALCODE=FFDYUYAMEQ9O&referral_id=019bf0fa-b4cd-7209-b3de-5e295397ac9e
安装Claude code,使用以下文档
https://code.claude.com/docs/en/setup
🎯 如果你是下面这些人，这支视频一定适合你：
* 想用 AI 做高质量产品，而不是 Demo
* 设计师 / 创作者 / Vibe Coder
* 不会写太多代码，但想做 专业级 AI 网站
* 对 Antigravity / Claude Code / n8n / GSAP 感兴趣
* 想把 AI 真正用在「可上线、可商用」的项目里
🔔 这是一个完整实战，不是概念介绍
我会把思路、设计判断、技术选择全部讲清楚。如果你想看到 AI + 设计 + 自动化 真正结合在一起的样子——这支视频一定要看完。
👉 如果你喜欢这种「不像 AI 的 AI 项目」内容，记得订阅，我会持续分享。
🔔 订阅频道，获取更多 AI × Design × App 构建教学！
欢迎👏加入我的设计师交流群
https://discord.gg/WEuhP33f9P
我是谁：我是yuya , 热衷于UI/UX设计 和网页设计, 每周我都会分享很多好用的资源, 工具,和设计方面的一些小教程, 希望能跟志同道合的小伙伴一起分享
本视频描述中的部分链接为联盟（Affiliate）链接。如果你通过这些链接购买产品，我可能会获得少量佣金，但不会增加你的任何额外费用。感谢你的支持 ❤️