AI 角色落地页制作

为任意 AI 助手 / 虚拟角色制作可展示的单页落地站：GitHub Pages 可部署、强动效、原生对话接入、脸或视频 Hero。本 skill 是通用配方，不绑定某一品牌或仓库。

何时使用

用户说：做角色落地页 / AI 形象站 / 虚拟人展示页 / 脸是主角的单页 / 带对话的 GitHub Pages Demo
需要：Vite 单页 + 动效 +（可选）Three / 视频循环 + 原生聊天 + Pages 部署
不要用于：普通企业官网模板、纯文档站、多路由后台、直接改用户已标明「备份勿动」的仓库

硬规则（不可破）

新建仓库，永不覆盖备份
- 每个新角色 / 新版本 → 新建公开仓库（如 character-landing、character-landing-face）。
- 用户若指定某个仓库为「备份 / 勿动」，禁止 push、改 workflow、改 Pages、改 secret。
- 旧仓库的 Actions secrets 不会自动复制到新仓库；新建后必须重新添加。
设计先行
- 先出一页设计 brief（情绪、色板、区块节奏、Hero 形态：静帧脸 / 视频循环 / 3D），再写代码。
- 相邻区块版式节奏不得重复（特写 / 双栏 / 横滑 / 通栏叙事 / 规格表 / 收束……轮换）。
通用、无密钥、无私人路径
- 配方与示例代码禁止写入真实 API Key、绝对本机路径、个人邮箱。
- Key 只进 .env.local（gitignore）或 GitHub Actions secret；公开 Pages 会暴露所有 VITE_*，作业 Demo 可接受但须在 README 标明并建议轮换。
单页
- 只有 / 一个路由。详情用抽屉 / 浮层 / 滚动锚点，禁止二级页面。

技术栈（默认）

层	选择
构建	Vite + TypeScript（`strict`）
动效	GSAP + ScrollTrigger + Lenis
3D（可选）	Three.js（imageRig / 简单 plate 优先于重模型）
样式	CSS 变量 + 少量模块；玻璃拟态要控对比度
部署	GitHub Pages（`base: './'` 或 `base: '/<repo>/'`）
对话	原生 UI（禁止 iframe 嵌官方聊天）→ Dify app-key →（可选）厂商 API → fakeBrain

Node ≥ 20。先 pnpm view / npm view 确认稳定版，勿凭记忆写死版本号。

工作流程

Phase 0 — 澄清与仓库

角色名、气质、合规（成年虚拟形象；禁止真人肖像复刻；禁止色情化）。
Hero 形态：静帧脸 / 即梦（Jimeng）视频循环 / 轻量 3D。
是否接真对话（Dify app-key / 厂商 Ark 类 API / 仅假智能）。
gh repo create <owner>/<new-name> --public --clone（或等价）；确认未指向备份仓。
写入 .gitignore：node_modules/、dist/、.env.local、.preview-out/。

Phase 1 — 骨架

<repo>/
  index.html
  package.json
  vite.config.ts          # base 适配 Pages
  .env.example            # 仅占位名，无真值
  public/img/…            # 角色资产
  src/main.ts
  src/sections/…
  src/ui/askbar.ts        # 原生对话条
  src/lib/difyClient.ts
  src/lib/fakeBrain.ts
  src/three/…             # 可选
  src/styles/
  .github/workflows/deploy.yml
  README.md

Lenis + 单一滚动进度 p ∈ [0,1]（或章节锚点）驱动动效；跟随类用弹簧，不用廉价 lerp。
角色层 position: fixed（或等价），内容层透明绕行。

Phase 2 — Hero：脸禁区 + 凝视

脸部禁区（Face Forbidden Zone）

首屏中央留给脸 / 视频；禁止把双对话框、重 HUD、大标题叠在五官上。
文案与 CTA 放安全边距（顶/底/角）；能力气泡可漂在边缘，不得压住眼睛与嘴。
捏脸 / 指针反馈仅在面部代理区域；滚动时锁定冲突（同一 pointer 一条逻辑）。

Scroll-freeze gaze（滚动冻结凝视）

指针移动 → 眼神跟随（弹簧 + deadzone + 偶发 saccade）。
用户滚动时冻结 gaze 目标（或大幅降权），避免滚轮时眼球狂抖。
说话 / 聆听 / 思考态可覆盖 gaze；松手回中。
prefers-reduced-motion：关闭跟随与大动效。

Phase 3 — 视频循环（即梦 Jimeng）

用即梦（或同类）生成短循环：同一角色、稳定构图、无水印优先；导出后转 webp/mp4。
<video muted playsinline loop autoplay>；备静帧 poster。
移动端可降级为静帧；注意文件体积与 LCP。
配方中只写「用视频生成工具做 idle loop」，不写具体账号或本机路径。

Phase 4 — 原生对话（非 iframe）

禁止用 iframe 嵌官方 Web 聊天。自建 askbar：

输入框 + 消息列表 + 流式打字。
链路顺序建议：Dify（app-key）→ 可选厂商 API → fakeBrain。
无 Key 时 fakeBrain 必须完整可玩（意图库 + 产品知识 + 多轮记忆）。
说话时派发自定义事件（如 character:speaking）驱动嘴型 / halo；结束复位。

Dify app-key 路径

环境变量示例名：VITE_DIFY_API_KEY、VITE_DIFY_BASE_URL（默认官方 https://api.dify.ai/v1）。
本地：.env.local；Pages：Actions secret 在 build 时注入。
使用 app 类型 key 走 chat-messages SSE；处理 conversation_id 续聊。
失败自动降级 fakeBrain；CORS / 网络错误不得白屏。

Phase 5 — 视觉质量

Frosted contrast（毛玻璃对比度）

backdrop-filter: blur(...) 卡片必须保证文字对比度（浅字配够深的半透明底，或反之）。
能力区 meta / 标题条易「漂成看不清」——用实色或更高 alpha 托底，而不是纯透明模糊。
避免高频闪烁动画（color/opacity/shadow 的 infinite 往复）；循环动效周期宜 ≥ 4s。

Dual-dialog bug（双对话框）

常见事故：Hero 残留一套对话 UI，滚动舞台又有一套 → 挡脸、双输入、状态不同步。
全页只保留一个对话根节点；Hero 只用短问候气泡（只读）或完全无气泡。
迁移 askbar 时删除旧挂载点，并搜一遍重复 id / 重复监听。

Phase 6 — GitHub Pages

// vite.config.ts
export default defineConfig({
  base: './', // 或 '/<repo-name>/'
})

资源 URL 一律 import.meta.env.BASE_URL + 'img/...'，禁止写死 /img/...（子路径会 404）。
Workflow：actions/configure-pages + upload-pages-artifact + deploy-pages；permissions: pages: write, id-token: write。
首次需在仓库 Settings → Pages 允许 Actions 部署（或 workflow 内 enablement）。
永不改备份仓的 Pages / secret。

Phase 7 — 验收与交付

按 examples/checklist.md 逐条勾选。交付物：仓库 URL、Pages URL、README（安装、换脸/换视频、环境变量、降级说明）、已知问题表。

验收清单（摘要）

详见 examples/checklist.md。最低线：

首屏 0.5s 内见角色脸/视频，禁区无对话框挡脸
滚动时 gaze 不狂抖；捏脸/跟随手感正常
全页仅一个对话入口；假智能可完整体验
Dify/API 失败自动降级；无 Key 不白屏
毛玻璃区文字可读
pnpm build / npm run build 通过；Pages 资源无 404（BASE_URL）
未改动任何「备份勿动」仓库
无密钥、无私人路径提交进 git

常见失败表

症状	原因	处理
Pages 上图片/视频 404	写死绝对路径 `/img/...`	改用 `import.meta.env.BASE_URL`；检查 `base`
首屏两套输入框	双对话框残留	删旧挂载点；只留一个 askbar 根
脸被气泡/HUD 挡住	未设脸禁区	UI 退到安全边距；问候改短或下移到 chatStage
滚动时眼球抽搐	滚动未冻结 gaze	scroll 时 freeze / 降权 gazeTarget
毛玻璃字发灰看不清	对比度不足	提高底 alpha 或加实色托条
真对话本地 OK、Pages 挂	未注入 secret / CORS	Actions 注入 `VITE_*`；生产应后端反代
接了 Dify 仍假回复	key 类型错或 BASE_URL 错	用 app key；核对 `/v1/chat-messages`
改着改着把旧 Demo 弄坏	推到了备份仓	停手；从备份恢复；改去新仓库
视频不循环 / iOS 不播	缺 `muted playsinline`	补属性；备 poster 静帧
中文标题乱码动画	scramble 类效果拆字	中文禁用 scramble

对话与合规提醒

角色为原创成年虚拟形象；禁止复刻真实人物可识别特征。
禁止色情化、性暗示、隐私部位特写。
致敬型页面须显著免责：非官方、与原公司无关。
公开仓库勿提交生产密钥；作业用 VITE_ Demo key 需在 README 写明风险并建议交作业后轮换。

触发示例

用户说「给某某 AI 做个脸是主角的落地页，能聊天，挂到 GitHub Pages」→ 启用本 skill，从 Phase 0 开始。

suhongshuo6-cell/ai-character-landing-skill

What is ai-character-landing-skill?

Ask in your favorite AI

Documentation