diff --git a/docs/marketing/frontagent-douyin-video.md b/docs/marketing/frontagent-douyin-video.md
new file mode 100644
index 00000000..060a915f
--- /dev/null
+++ b/docs/marketing/frontagent-douyin-video.md
@@ -0,0 +1,76 @@
+# FrontAgent Douyin Promo Video
+
+## Positioning
+
+FrontAgent is an open-source frontend engineering agent. The video sells one idea: AI coding only becomes production-ready when the agent is constrained by specs, controlled tools, repository context, browser awareness, and quality gates.
+
+## Target Viewer
+
+Chinese-speaking frontend engineers, full-stack engineers, independent developers, and technical founders who have tried AI coding tools and hit hallucinated files, broken imports, context drift, or inconsistent project conventions.
+
+## 30-Second Voiceover
+
+AI 编程最大的问题，不是不会写代码。
+是它会乱猜。
+
+编不存在的路径，调不存在的 API，绕过你的工程规范。
+
+FrontAgent 不是聊天式代码助手。
+它是一个前端工程 Agent。
+
+先用 SDD 定边界：技术栈、目录结构、禁止改动、质量规则。
+再用 MCP 控制感知和执行：读文件、打补丁、看浏览器、跑校验。
+
+交付前，先过 lint、typecheck、test。
+失败就回到计划，重新修。
+
+FrontAgent，把 AI 编程关进工程护栏。
+开源可试。
+
+## On-Screen Captions
+
+1. AI 编程最大的问题
+2. 不是不会写代码
+3. 是它会乱猜
+4. 不存在的路径
+5. 不存在的 API
+6. 绕过工程规范
+7. FrontAgent
+8. 前端工程 Agent
+9. SDD 先定边界
+10. MCP 控制感知与执行
+11. 交付前跑门禁
+12. 失败回到计划
+13. 把 AI 编程关进工程护栏
+14. GitHub: ceilf6/FrontAgent
+
+## Storyboard
+
+| Time | Beat | Visual | Caption |
+| --- | --- | --- | --- |
+| 0-3s | Hook | Broken paths, red terminal errors, unstable imports | AI 会乱猜 |
+| 3-8s | Product reveal | FrontAgent logo resolves from code fragments | 前端工程 Agent |
+| 8-15s | SDD | Blueprint panel locks project rules into place | 先有规格，再让 AI 动手 |
+| 15-22s | MCP | Files, Browser, Shell, Git rails feed a protected pipeline | 不靠猜，靠工具确认 |
+| 22-26s | Quality gates | Validation rows pass in sequence, with failed checks looping back to the plan | 过了门禁再交付 |
+| 26-30s | CTA | Logo, repo name, npm install command | 开源可试 |
+
+## Douyin Post Copy
+
+AI 编程不是不能用，问题是不能让它乱猜。FrontAgent 用 SDD、MCP、浏览器感知、RAG 上下文和质量门禁，把前端 AI Agent 放进真实工程约束里。
+
+## Titles
+
+1. AI 编程真正缺的不是模型，是工程护栏
+2. 让 AI 写前端代码前，先把边界定死
+3. FrontAgent：面向真实工程的前端 AI Agent
+
+## Hashtags
+
+#AI编程 #前端开发 #开源项目 #MCP #Agent #TypeScript #程序员
+
+## Production Notes
+
+- Render as 9:16 vertical, 1080x1920, 30 fps.
+- Keep captions large enough for mobile viewing.
+- BGM is an original local synth bed stored with the HyperFrames source.
diff --git a/docs/superpowers/plans/2026-06-17-frontagent-hyperframes-douyin-video.md b/docs/superpowers/plans/2026-06-17-frontagent-hyperframes-douyin-video.md
new file mode 100644
index 00000000..4cffd005
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-17-frontagent-hyperframes-douyin-video.md
@@ -0,0 +1,401 @@
+# FrontAgent HyperFrames Douyin Video Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a 30-second 9:16 HyperFrames promo video project for FrontAgent and a matching Douyin marketing script/storyboard.
+
+**Architecture:** Keep the work isolated from product runtime code. The marketing document owns copy, captions, and publishing metadata; the HyperFrames folder owns video source files, reusable styles, local assets, and render output. The rendered MP4 is treated as a local artifact because repository `.gitignore` already ignores `dist/`.
+
+**Tech Stack:** Markdown, HTML, CSS keyframe animation, HyperFrames CLI via `npx hyperframes`, FFmpeg, GitNexus diff inspection.
+
+---
+
+## File Structure
+
+- Create `docs/marketing/frontagent-douyin-video.md`
+  - Owns final Chinese copy, narration, subtitle sequence, storyboard, Douyin title, description, and hashtags.
+- Create `marketing/hyperframes/frontagent-douyin-promo/meta.json`
+  - Owns project metadata, dimensions, fps, and duration.
+- Create `marketing/hyperframes/frontagent-douyin-promo/index.html`
+  - Owns the full 30-second root HyperFrames composition and all visual beats.
+- Create `marketing/hyperframes/frontagent-douyin-promo/assets/icon.png`
+  - Project-local copy of `assets/branding/icon.png` so the video project renders from its own directory.
+- Create `marketing/hyperframes/frontagent-douyin-promo/README.md`
+  - Owns local preview, lint, render, and verification commands.
+- Generated local artifact: `marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4`
+  - Do not commit unless maintainers explicitly approve committing generated binary output.
+
+## Task 1: Marketing Script And Storyboard
+
+**Files:**
+- Create: `docs/marketing/frontagent-douyin-video.md`
+
+- [ ] **Step 1: Create the marketing docs directory**
+
+Run:
+
+```bash
+mkdir -p docs/marketing
+```
+
+Expected: command exits with status `0`.
+
+- [ ] **Step 2: Write the Douyin video script**
+
+Create `docs/marketing/frontagent-douyin-video.md` with these sections:
+
+```markdown
+# FrontAgent Douyin Promo Video
+
+## Positioning
+
+FrontAgent is an open-source frontend engineering agent. The video sells one idea: AI coding only becomes production-ready when the agent is constrained by specs, tools, repository knowledge, and quality gates.
+
+## Target Viewer
+
+Chinese-speaking frontend engineers, full-stack engineers, independent developers, and technical founders who have tried AI coding tools and hit hallucinated files, broken imports, context drift, or inconsistent project conventions.
+
+## 30-Second Voiceover
+
+AI 编程最大的问题，不是不会写代码。
+是它会乱猜。
+
+编不存在的路径，调不存在的 API，绕过你的工程规范。
+
+FrontAgent 不是聊天式代码助手。
+它是一个前端工程 Agent。
+
+先用 SDD 定边界：技术栈、目录结构、禁止改动、质量规则。
+再用 MCP 控制感知和执行：读文件、打补丁、看浏览器、跑校验。
+
+交付前，先过 lint、typecheck、test。
+失败就回到计划，重新修。
+
+FrontAgent，把 AI 编程关进工程护栏。
+开源可试。
+
+## On-Screen Captions
+
+1. AI 编程最大的问题
+2. 不是不会写代码
+3. 是它会乱猜
+4. 不存在的路径
+5. 不存在的 API
+6. 绕过工程规范
+7. FrontAgent
+8. 前端工程 Agent
+9. SDD 先定边界
+10. MCP 控制感知与执行
+11. 交付前跑门禁
+12. 失败回到计划
+13. 把 AI 编程关进工程护栏
+14. GitHub: ceilf6/FrontAgent
+
+## Storyboard
+
+| Time | Beat | Visual | Caption |
+| --- | --- | --- | --- |
+| 0-3s | Hook | Broken paths, red terminal errors, unstable imports | AI 会乱猜 |
+| 3-8s | Product reveal | FrontAgent logo resolves from code fragments | 前端工程 Agent |
+| 8-15s | SDD | Blueprint panel locks project rules into place | 先有规格，再让 AI 动手 |
+| 15-22s | MCP | Files, Browser, Shell, Git rails feed a protected pipeline | 不靠猜，靠工具确认 |
+| 22-26s | Quality gates | Validation rows pass in sequence, with failed checks looping back to the plan | 过了门禁再交付 |
+| 26-30s | CTA | Logo, repo name, npm install command | 开源可试 |
+
+## Douyin Post Copy
+
+AI 编程不是不能用，问题是不能让它乱猜。FrontAgent 用 SDD、MCP、浏览器感知、RAG 上下文和质量门禁，把前端 AI Agent 放进真实工程约束里。
+
+## Titles
+
+1. AI 编程真正缺的不是模型，是工程护栏
+2. 让 AI 写前端代码前，先把边界定死
+3. FrontAgent：面向真实工程的前端 AI Agent
+
+## Hashtags
+
+#AI编程 #前端开发 #开源项目 #MCP #Agent #TypeScript #程序员
+
+## Production Notes
+
+- Render as 9:16 vertical, 1080x1920, 30 fps.
+- Keep captions large enough for mobile viewing.
+- Do not bundle copyrighted music in the repository.
+- Choose background music from Douyin's licensed music library after export.
+```
+
+Expected: the document exists and contains `## 30-Second Voiceover`.
+
+- [ ] **Step 3: Verify the marketing document**
+
+Run:
+
+```bash
+rg -n "FrontAgent|SDD|MCP|RAG|Douyin" docs/marketing/frontagent-douyin-video.md
+```
+
+Expected: output includes lines from the positioning, storyboard, and post copy sections.
+
+## Task 2: HyperFrames Project Source
+
+**Files:**
+- Create: `marketing/hyperframes/frontagent-douyin-promo/meta.json`
+- Create: `marketing/hyperframes/frontagent-douyin-promo/index.html`
+- Create: `marketing/hyperframes/frontagent-douyin-promo/assets/icon.png`
+- Create: `marketing/hyperframes/frontagent-douyin-promo/assets/bgm.m4a`
+- Create: `marketing/hyperframes/frontagent-douyin-promo/assets/bgm-captions.vtt`
+- Create: `marketing/hyperframes/frontagent-douyin-promo/README.md`
+
+- [ ] **Step 1: Create project directories**
+
+Run:
+
+```bash
+mkdir -p marketing/hyperframes/frontagent-douyin-promo/assets
+```
+
+Expected: command exits with status `0`.
+
+- [ ] **Step 2: Copy the project-local logo asset**
+
+Run:
+
+```bash
+cp assets/branding/icon.png marketing/hyperframes/frontagent-douyin-promo/assets/icon.png
+```
+
+Expected: `file marketing/hyperframes/frontagent-douyin-promo/assets/icon.png` reports `PNG image data`.
+
+- [ ] **Step 3: Create HyperFrames metadata**
+
+Create `marketing/hyperframes/frontagent-douyin-promo/meta.json`:
+
+```json
+{
+  "name": "frontagent-douyin-promo",
+  "id": "frontagent-douyin-promo",
+  "width": 1080,
+  "height": 1920,
+  "fps": 30,
+  "duration": 30,
+  "entry": "index.html"
+}
+```
+
+Expected: `node -e "JSON.parse(require('fs').readFileSync('marketing/hyperframes/frontagent-douyin-promo/meta.json','utf8')); console.log('ok')"` prints `ok`.
+
+- [ ] **Step 4: Create the HTML composition**
+
+Create `marketing/hyperframes/frontagent-douyin-promo/index.html` as one root composition with:
+
+- `data-composition-id="frontagent-douyin-promo"`
+- `data-width="1080"`
+- `data-height="1920"`
+- `data-duration="30"`
+- six `.scene.clip` sections with `data-start` and `data-duration`
+- CSS-only seek-safe visual design
+- no external network assets
+- project-local image reference `assets/icon.png`
+- project-local audio reference `assets/bgm.m4a`
+- project-local audio caption cue `assets/bgm-captions.vtt`
+
+Required scene timing:
+
+```text
+hook: 0-3s
+product: 3-8s
+sdd: 8-15s
+mcp: 15-22s
+quality-gates: 22-26s
+cta: 26-30s
+```
+
+Expected: the file contains `AI 会乱猜`, `SDD 先定边界`, `MCP 控制感知与执行`, `Quality Gates`, and `npm install -g frontagent`.
+
+- [ ] **Step 5: Create the project README**
+
+Create `marketing/hyperframes/frontagent-douyin-promo/README.md`:
+
+```markdown
+# FrontAgent Douyin Promo HyperFrames Project
+
+Source for the 30-second vertical FrontAgent Douyin promo video.
+
+## Requirements
+
+- Node.js 22+
+- FFmpeg
+- Network access for `npx hyperframes` on first run
+
+## Commands
+
+```bash
+npx hyperframes lint
+npx hyperframes preview
+npx hyperframes render --output dist/frontagent-douyin-promo.mp4
+```
+
+Run commands from this directory:
+
+```bash
+cd marketing/hyperframes/frontagent-douyin-promo
+```
+
+The rendered MP4 is a local artifact under `dist/`. Repository `.gitignore` ignores `dist/`, so the MP4 is not committed by default.
+```
+
+Expected: the README includes `npx hyperframes render --output dist/frontagent-douyin-promo.mp4`.
+
+- [ ] **Step 6: Verify source files**
+
+Run:
+
+```bash
+rg -n "data-composition-id|data-duration|AI 会乱猜|GitHub: ceilf6/FrontAgent" marketing/hyperframes/frontagent-douyin-promo
+```
+
+Expected: output includes matches from `index.html`.
+
+## Task 3: Local HyperFrames Validation And Render
+
+**Files:**
+- Read: `marketing/hyperframes/frontagent-douyin-promo/index.html`
+- Generated: `marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4`
+
+- [ ] **Step 1: Check runtime dependencies**
+
+Run:
+
+```bash
+node --version
+ffmpeg -version | head -n 1
+```
+
+Expected:
+
+- Node.js major version is `v22` or newer.
+- FFmpeg prints a version line.
+
+If Node.js is older than 22 or FFmpeg is missing, record the exact output and skip render while keeping source files complete.
+
+- [ ] **Step 2: Run HyperFrames lint**
+
+Run:
+
+```bash
+cd marketing/hyperframes/frontagent-douyin-promo && npx hyperframes lint
+```
+
+Expected: command exits with status `0`, or prints actionable composition issues to fix.
+
+- [ ] **Step 3: Render the MP4**
+
+Run:
+
+```bash
+cd marketing/hyperframes/frontagent-douyin-promo && npx hyperframes render --output dist/frontagent-douyin-promo.mp4
+```
+
+Expected: command exits with status `0` and creates `dist/frontagent-douyin-promo.mp4`.
+
+- [ ] **Step 4: Inspect media properties**
+
+Run:
+
+```bash
+ffprobe -v error -select_streams v:0 -show_entries stream=width,height,r_frame_rate,duration -of default=noprint_wrappers=1 marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4
+```
+
+Expected:
+
+- `width=1080`
+- `height=1920`
+- `r_frame_rate=30/1`
+- duration is approximately `30` seconds
+
+- [ ] **Step 5: Capture representative frames**
+
+Run:
+
+```bash
+mkdir -p marketing/hyperframes/frontagent-douyin-promo/dist/frames
+ffmpeg -y -ss 1 -i marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4 -frames:v 1 marketing/hyperframes/frontagent-douyin-promo/dist/frames/hook.png
+ffmpeg -y -ss 16 -i marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4 -frames:v 1 marketing/hyperframes/frontagent-douyin-promo/dist/frames/mcp.png
+ffmpeg -y -ss 28 -i marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4 -frames:v 1 marketing/hyperframes/frontagent-douyin-promo/dist/frames/cta.png
+```
+
+Expected: three PNG frame captures exist and are non-empty. Visually inspect them before finalizing.
+
+## Task 4: Repository Checks And Commit
+
+**Files:**
+- Stage: `docs/marketing/frontagent-douyin-video.md`
+- Stage: `marketing/hyperframes/frontagent-douyin-promo/meta.json`
+- Stage: `marketing/hyperframes/frontagent-douyin-promo/index.html`
+- Stage: `marketing/hyperframes/frontagent-douyin-promo/assets/icon.png`
+- Stage: `marketing/hyperframes/frontagent-douyin-promo/README.md`
+- Do not stage: `.gitnexus/lbug`
+- Do not stage: `.gitnexus/meta.json`
+- Do not stage: `marketing/hyperframes/frontagent-douyin-promo/dist/`
+
+- [ ] **Step 1: Inspect working tree**
+
+Run:
+
+```bash
+git status --short
+```
+
+Expected: source files are untracked or modified; `.gitnexus/lbug` and `.gitnexus/meta.json` may remain modified and must not be staged.
+
+- [ ] **Step 2: Run GitNexus change detection before staging**
+
+Run via MCP:
+
+```text
+detect_changes(repo="FrontAgent", scope="unstaged")
+```
+
+Expected: marketing/docs files show no code-symbol blast radius or only low-risk file additions.
+
+- [ ] **Step 3: Stage only source deliverables**
+
+Run:
+
+```bash
+git add docs/marketing/frontagent-douyin-video.md \
+  marketing/hyperframes/frontagent-douyin-promo/meta.json \
+  marketing/hyperframes/frontagent-douyin-promo/index.html \
+  marketing/hyperframes/frontagent-douyin-promo/assets/icon.png \
+  marketing/hyperframes/frontagent-douyin-promo/README.md
+```
+
+Expected: `git diff --cached --name-status` lists exactly those five paths.
+
+- [ ] **Step 4: Run GitNexus change detection on staged diff**
+
+Run via MCP:
+
+```text
+detect_changes(repo="FrontAgent", scope="staged")
+```
+
+Expected: low risk, no runtime execution flows affected.
+
+- [ ] **Step 5: Commit implementation source**
+
+Run:
+
+```bash
+git commit -m "docs: add FrontAgent HyperFrames Douyin promo"
+```
+
+Expected: commit succeeds. If pre-commit runs full quality gates, record the result. If it fails on unrelated existing lint info, report the exact failure before changing unrelated code.
+
+## Self-Review Checklist
+
+- The plan covers the approved spec deliverables: marketing script, HyperFrames source project, local logo asset, render attempt, and GitNexus final diff check.
+- The plan avoids runtime FrontAgent code changes.
+- The plan keeps generated MP4 output local because `dist/` is ignored.
+- The plan names exact files and commands.
+- The plan includes fallback behavior for missing Node.js 22 or FFmpeg.
diff --git a/docs/superpowers/specs/2026-06-17-frontagent-hyperframes-douyin-video-design.md b/docs/superpowers/specs/2026-06-17-frontagent-hyperframes-douyin-video-design.md
new file mode 100644
index 00000000..5fdc93e1
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-17-frontagent-hyperframes-douyin-video-design.md
@@ -0,0 +1,274 @@
+# FrontAgent HyperFrames Douyin Promo Video Design
+
+Date: 2026-06-17
+Branch: `feature/hyperframes-video`
+Status: Approved for implementation planning
+
+## Summary
+
+Create a 30-second vertical Douyin promo video for FrontAgent using HyperFrames. The video should position FrontAgent as an open-source frontend engineering agent that turns AI coding from uncontrolled guessing into a constrained, inspectable engineering workflow.
+
+The work has two deliverables:
+
+- A marketing script and storyboard document at `docs/marketing/frontagent-douyin-video.md`.
+- A HyperFrames video project at `marketing/hyperframes/frontagent-douyin-promo/`, rendering to `marketing/hyperframes/frontagent-douyin-promo/dist/frontagent-douyin-promo.mp4`.
+
+## Audience And Goal
+
+The target audience is Chinese-speaking frontend engineers, full-stack engineers, independent developers, and technical founders browsing Douyin. They may already know AI coding tools, but they are skeptical because generated code often invents paths, ignores project rules, or fails after one error.
+
+The video should make one idea memorable:
+
+> AI coding is useful only when it is constrained by real engineering context. FrontAgent adds SDD, MCP, browser awareness, repository memory, and quality gates around the agent loop.
+
+The expected viewer action is to remember the project name and visit GitHub, npm, or the README later. The video is not expected to explain every feature or prove every benchmark.
+
+## Chosen Approach
+
+Use a 9:16, 1080x1920, 30 fps, approximately 30-second kinetic technical explainer.
+
+This approach was selected over a longer product explainer or live demo recording because Douyin rewards immediate hooks, short beats, strong captions, and a single sharp takeaway. A first version should sell the positioning before trying to show a full terminal workflow.
+
+## Source Positioning
+
+The creative direction is based on the existing repository materials:
+
+- `README.md` and `docs/README-CN.md`: FrontAgent is an open-source frontend AI coding agent with CLI, VS Code, Desktop, MCP server, RAG planning, browser-aware automation, SDD guardrails, self-healing, and quality gates.
+- `docs/FrontAgent-Introduction.md`: the main product pain points are hallucinated paths and APIs, context drift, weak error recovery, weak engineering constraints, and brittle JSON planning.
+- `docs/design.md` and `docs/architecture.md`: the core technical thesis is SDD as a hard control layer, MCP as the trusted interface, and hallucination prevention through planning, execution, validation, and memory layers.
+
+HyperFrames implementation assumptions are based on the official HyperFrames README and quickstart:
+
+- HyperFrames turns HTML, CSS, media, and seekable animations into deterministic MP4 output.
+- Local projects can be scaffolded and run with `npx hyperframes init`, `npx hyperframes preview`, `npx hyperframes lint`, and `npx hyperframes render`.
+- Local rendering requires Node.js 22+ and FFmpeg.
+- HyperFrames compositions are HTML-native and use `data-*` attributes for timed clips and tracks, with seekable animation support through CSS, GSAP, Lottie, Three.js, Anime.js, WAAPI, or custom adapters.
+
+## Video Format
+
+- Platform: Douyin
+- Aspect ratio: 9:16 vertical
+- Resolution: 1080x1920
+- Frame rate: 30 fps
+- Duration: 30 seconds target, with a tolerance of plus or minus 1 second
+- Language: Simplified Chinese
+- Audio: no bundled copyrighted background music in the repository; use silent render or simple generated non-copyright click/sweep effects if practical. Background music can be chosen inside Douyin after export.
+- Voiceover: optional. The first implementation may rely on large captions and motion instead of generated voiceover to avoid TTS quality and licensing issues.
+
+## Narrative Structure
+
+### Beat 1: Hook, 0-3s
+
+Message: "AI 编程最大的问题，不是不会写代码。是它会乱猜。"
+
+Visuals:
+
+- Fast glitch-style stack of fake broken file paths, red terminal errors, and crossed-out package imports.
+- Big center caption: "AI 会乱猜"
+- Small supporting terms: "不存在的文件", "错误路径", "绕过规范"
+
+Purpose: stop scroll immediately with a familiar pain.
+
+### Beat 2: Reframe, 3-8s
+
+Message: "FrontAgent 不是聊天式代码助手，而是前端工程 Agent。"
+
+Visuals:
+
+- FrontAgent logo resolves from noisy terminal fragments.
+- Three labeled surfaces orbit or slide in: CLI, VS Code, Desktop.
+- Caption: "前端工程 Agent"
+
+Purpose: establish category and product name.
+
+### Beat 3: Control Layer, 8-15s
+
+Message: "SDD 先定边界：技术栈、目录结构、禁止改动、质量规则。"
+
+Visuals:
+
+- A blueprint-like SDD panel drops over the chaotic code.
+- Tokens lock into place: `tech_stack`, `module_boundaries`, `protected_files`, `quality_gates`.
+- Caption: "先有规格，再让 AI 动手"
+
+Purpose: communicate why FrontAgent differs from prompt-only tools.
+
+### Beat 4: Trusted Execution, 15-22s
+
+Message: "MCP 让感知和执行可控：读文件、打补丁、看浏览器、跑校验。"
+
+Visuals:
+
+- Four tool rails animate into a protected pipeline: Files, Browser, Shell, Git.
+- A browser card shows a simplified accessibility tree rather than a generic screenshot.
+- Caption: "不靠猜，靠工具确认"
+
+Purpose: connect MCP to practical engineering reliability.
+
+### Beat 5: Quality Gates, 22-26s
+
+Message: "质量门禁检查结果，失败就回到计划修复。"
+
+Visuals:
+
+- Quality gate rows light up in sequence.
+- Failed-check repair loop is visible as a controlled workflow.
+- Caption: "过了门禁再交付"
+
+Purpose: show production workflow credibility.
+
+### Beat 6: Call To Action, 26-30s
+
+Message: "FrontAgent：把 AI 编程关进工程护栏。开源可试。"
+
+Visuals:
+
+- Final lockup with logo, GitHub URL text, npm package name, and short command `npm install -g frontagent`.
+- Caption: "开源前端工程 Agent"
+
+Purpose: leave one product phrase and one action.
+
+## On-Screen Copy
+
+Primary caption sequence:
+
+1. AI 编程最大的问题
+2. 不是不会写代码
+3. 是它会乱猜
+4. FrontAgent
+5. 前端工程 Agent
+6. SDD 先定边界
+7. MCP 控制感知与执行
+8. 浏览器感知 + 最小补丁 + 质量门禁
+9. 交付前跑门禁
+10. 失败回到计划
+11. 把 AI 编程关进工程护栏
+12. GitHub: ceilf6/FrontAgent
+
+The captions should be short and punchy. They must not cover the CTA or logo in the final 4 seconds.
+
+## Visual Direction
+
+The visual tone should be technical, sharp, and controlled. Avoid generic cyberpunk neon, oversized gradients, or decorative blobs. The design should look like a serious frontend engineering tool translated into a social video.
+
+Recommended palette:
+
+- Background: near-black charcoal, `#0b0f14`
+- Primary accent: FrontAgent cyan/blue sampled or approximated from `assets/branding/icon.png`
+- Reliability accent: green for passed checks
+- Risk accent: red only for the opening broken-state hook
+- Text: white and cool gray
+
+Typography:
+
+- Use system Chinese sans-serif fallback stacks for broad rendering reliability.
+- Use large, high-contrast captions with stable safe margins for Douyin UI overlays.
+- Avoid small paragraphs. Use short labels and code-like tokens.
+
+Motion:
+
+- Fast cuts in the first 3 seconds.
+- Snap-to-grid transitions for SDD and MCP beats.
+- Smooth gate illumination for the quality beat.
+- Final CTA should hold long enough to read.
+
+## HyperFrames Project Design
+
+The implementation should create a self-contained HyperFrames project:
+
+```text
+marketing/hyperframes/frontagent-douyin-promo/
+  meta.json
+  index.html
+  compositions/
+    01-hook.html
+    02-product.html
+    03-sdd.html
+    04-mcp.html
+    05-quality-gates.html
+    06-cta.html
+  assets/
+    icon.png
+    bgm.m4a
+    bgm-captions.vtt
+  dist/
+    frontagent-douyin-promo.mp4
+```
+
+The root `index.html` should orchestrate the six beats as timed sub-compositions. Each sub-composition should be understandable on its own, with one visual responsibility and one section of copy.
+
+The project should copy or reference `assets/branding/icon.png` in a way that keeps the video project portable. Referencing the existing source asset is acceptable during development, but the final project should include its own `assets/icon.png` copy so rendering works from the project directory.
+
+## Animation Architecture
+
+Use plain HTML/CSS for the first implementation unless a specific beat clearly requires GSAP. CSS keyframes and HyperFrames timing attributes should be enough for:
+
+- Broken-code glitch text
+- Logo reveal
+- SDD blueprint cards
+- MCP tool rails
+- Quality gate rows pulse
+- CTA lockup
+
+If GSAP is used, the timeline must be paused and registered for deterministic seekable rendering according to HyperFrames expectations. Avoid wall-clock-only animations that could preview differently from rendered frames.
+
+## Data And Asset Flow
+
+Input assets:
+
+- `assets/branding/icon.png`
+- Existing README and docs for accurate product copy
+
+Generated assets:
+
+- `docs/marketing/frontagent-douyin-video.md`
+- HyperFrames HTML/CSS files
+- Project-local `assets/icon.png`
+- Project-local original BGM `assets/bgm.m4a`
+- Project-local BGM caption cue `assets/bgm-captions.vtt`
+- Rendered MP4 in `dist/`
+
+No generated binary should be committed until size and repository policy are checked. If the MP4 is large, keep it as a local artifact and commit only the source project plus docs.
+
+## Error Handling
+
+Implementation should handle common local setup failures explicitly:
+
+- If Node.js is older than 22, report that HyperFrames cannot render locally and leave the project source ready.
+- If FFmpeg is missing, report that preview/lint may work but render cannot complete locally.
+- If `npx hyperframes` fails due to network or package resolution, keep the manually authored project files and document the exact command failure.
+- If rendering succeeds but visual inspection shows blank or misframed output, iterate before claiming completion.
+
+## Verification Plan
+
+Minimum verification before implementation is considered complete:
+
+1. Check Node.js and FFmpeg availability.
+2. Run HyperFrames lint if available.
+3. Run HyperFrames preview or an equivalent static composition inspection.
+4. Render a draft or final MP4 with HyperFrames.
+5. Inspect the video output or at least capture representative frames at the hook, midpoint, and CTA.
+6. Confirm the video is vertical 1080x1920, approximately 30 seconds, and nonblank.
+7. Run GitNexus `detect_changes` before committing implementation work.
+
+Repository-wide gates such as `pnpm quality:precommit` should be run before final review when feasible. If they are skipped because the work is marketing-only or the environment lacks video dependencies, the reason must be stated.
+
+## Non-Goals
+
+- Do not add new product features to FrontAgent.
+- Do not modify runtime agent, CLI, VS Code, desktop, MCP, or GitNexus code.
+- Do not add comment-triggered automation, training-camp workflow claims, score labels, or OSS workflow changes.
+- Do not bundle copyrighted music or third-party media without a clear license.
+- Do not make a long-form Bilibili explainer in this first version.
+- Do not depend on a live website or external API at render time.
+
+## Acceptance Criteria
+
+The work is complete when:
+
+- The marketing script and storyboard exist in `docs/marketing/frontagent-douyin-video.md`.
+- The HyperFrames source project exists in `marketing/hyperframes/frontagent-douyin-promo/`.
+- A local render command has been attempted and its result is reported.
+- If rendering succeeds, the MP4 path and basic media properties are reported.
+- If rendering cannot complete locally, the source project remains runnable and the missing dependency or command failure is documented.
+- Existing `.gitnexus` working tree changes are not reverted, staged, or committed unless explicitly requested by the maintainer.
diff --git a/marketing/hyperframes/frontagent-douyin-promo/README.md b/marketing/hyperframes/frontagent-douyin-promo/README.md
new file mode 100644
index 00000000..66540b63
--- /dev/null
+++ b/marketing/hyperframes/frontagent-douyin-promo/README.md
@@ -0,0 +1,27 @@
+# FrontAgent Douyin Promo HyperFrames Project
+
+Source for the 30-second vertical FrontAgent Douyin promo video.
+
+## Requirements
+
+- Node.js 22+
+- FFmpeg
+- Network access for `npx hyperframes` on first run
+
+## Commands
+
+```bash
+npx hyperframes lint
+npx hyperframes preview
+npx hyperframes render --output dist/frontagent-douyin-promo.mp4
+```
+
+The composition includes an original local BGM asset at `assets/bgm.m4a`; HyperFrames should render it into the MP4 audio track. `assets/bgm-captions.vtt` provides the required media caption cue for the background music.
+
+Run commands from this directory:
+
+```bash
+cd marketing/hyperframes/frontagent-douyin-promo
+```
+
+The rendered MP4 is a local artifact under `dist/`. Repository `.gitignore` ignores `dist/`, so the MP4 is not committed by default.
diff --git a/marketing/hyperframes/frontagent-douyin-promo/assets/bgm-captions.vtt b/marketing/hyperframes/frontagent-douyin-promo/assets/bgm-captions.vtt
new file mode 100644
index 00000000..f647f691
--- /dev/null
+++ b/marketing/hyperframes/frontagent-douyin-promo/assets/bgm-captions.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:30.000
+原创电子背景音乐
diff --git a/marketing/hyperframes/frontagent-douyin-promo/assets/bgm.m4a b/marketing/hyperframes/frontagent-douyin-promo/assets/bgm.m4a
new file mode 100644
index 00000000..c030c3b5
Binary files /dev/null and b/marketing/hyperframes/frontagent-douyin-promo/assets/bgm.m4a differ
diff --git a/marketing/hyperframes/frontagent-douyin-promo/assets/icon.png b/marketing/hyperframes/frontagent-douyin-promo/assets/icon.png
new file mode 100644
index 00000000..d660db43
Binary files /dev/null and b/marketing/hyperframes/frontagent-douyin-promo/assets/icon.png differ
diff --git a/marketing/hyperframes/frontagent-douyin-promo/index.html b/marketing/hyperframes/frontagent-douyin-promo/index.html
new file mode 100644
index 00000000..3b164d87
--- /dev/null
+++ b/marketing/hyperframes/frontagent-douyin-promo/index.html
@@ -0,0 +1,1191 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>FrontAgent Douyin Promo</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #0b0f14;
+        --panel: rgba(15, 24, 34, 0.92);
+        --panel-strong: rgba(20, 34, 48, 0.96);
+        --line: rgba(126, 231, 255, 0.28);
+        --blue: #49d9ff;
+        --blue-strong: #00b7ff;
+        --green: #45f39a;
+        --red: #ff4d5d;
+        --amber: #f3c44d;
+        --text: #f6fbff;
+        --muted: #9eb4c4;
+        --code: #cdeeff;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background: var(--bg);
+        overflow: hidden;
+        font-family: sans-serif;
+      }
+
+      body {
+        display: grid;
+        place-items: center;
+      }
+
+      #stage {
+        position: relative;
+        width: 1080px;
+        height: 1920px;
+        overflow: hidden;
+        background:
+          linear-gradient(rgba(73, 217, 255, 0.08) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(73, 217, 255, 0.06) 1px, transparent 1px),
+          #0b0f14;
+        background-size:
+          72px 72px,
+          72px 72px,
+          100% 100%;
+      }
+
+      #stage::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(180deg, rgba(6, 11, 18, 0.12), rgba(6, 11, 18, 0.88)),
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, 0.035),
+            rgba(255, 255, 255, 0.035) 1px,
+            transparent 1px,
+            transparent 5px
+          );
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      .scene {
+        position: absolute;
+        inset: 0;
+        padding: 132px 86px 148px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: var(--text);
+        opacity: 0;
+        z-index: 2;
+      }
+
+      .safe-bottom {
+        position: absolute;
+        left: 86px;
+        right: 86px;
+        bottom: 120px;
+        z-index: 4;
+      }
+
+      .eyebrow {
+        width: max-content;
+        max-width: 100%;
+        padding: 14px 22px;
+        border: 1px solid var(--line);
+        background: rgba(73, 217, 255, 0.08);
+        color: var(--blue);
+        font-size: 28px;
+        font-weight: 800;
+        letter-spacing: 0;
+        text-transform: uppercase;
+      }
+
+      .headline {
+        margin: 34px 0 0;
+        font-size: 94px;
+        line-height: 1.02;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      .headline .accent {
+        color: var(--blue);
+      }
+
+      .subtitle {
+        margin: 32px 0 0;
+        color: var(--muted);
+        font-size: 34px;
+        line-height: 1.42;
+        font-weight: 700;
+      }
+
+      .caption {
+        display: inline-flex;
+        align-items: center;
+        width: max-content;
+        max-width: 100%;
+        min-height: 82px;
+        padding: 0 30px;
+        border: 1px solid rgba(246, 251, 255, 0.18);
+        background: rgba(7, 13, 20, 0.82);
+        color: var(--text);
+        box-shadow: 0 20px 64px rgba(0, 0, 0, 0.28);
+        font-size: 38px;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .code-card,
+      .panel {
+        border: 1px solid rgba(126, 231, 255, 0.26);
+        background: var(--panel);
+        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
+      }
+
+      .code-card {
+        padding: 28px;
+        font-family: monospace;
+        color: var(--code);
+        font-size: 28px;
+        line-height: 1.5;
+      }
+
+      .code-line {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        white-space: nowrap;
+      }
+
+      .code-line + .code-line {
+        margin-top: 16px;
+      }
+
+      .status-dot {
+        width: 16px;
+        height: 16px;
+        border-radius: 999px;
+        background: var(--red);
+        box-shadow: 0 0 22px rgba(255, 77, 93, 0.75);
+        flex: 0 0 auto;
+      }
+
+      .status-dot.ok {
+        background: var(--green);
+        box-shadow: 0 0 22px rgba(69, 243, 154, 0.75);
+      }
+
+      .status-dot.warn {
+        background: var(--amber);
+        box-shadow: 0 0 22px rgba(243, 196, 77, 0.65);
+      }
+
+      .hook {
+        animation: scene-hook 30s linear both;
+      }
+
+      .product {
+        animation: scene-product 30s linear both;
+      }
+
+      .sdd {
+        animation: scene-sdd 30s linear both;
+      }
+
+      .mcp {
+        animation: scene-mcp 30s linear both;
+      }
+
+      .gates {
+        animation: scene-gates 30s linear both;
+      }
+
+      .cta {
+        animation: scene-cta 30s linear both;
+      }
+
+      .hook-stack {
+        display: grid;
+        gap: 22px;
+        transform: rotate(-2deg);
+        animation: glitch-in 2.4s ease both;
+      }
+
+      .hook .headline {
+        color: var(--red);
+        text-shadow: 0 0 32px rgba(255, 77, 93, 0.52);
+        animation: punch 0.55s ease both 1.15s;
+      }
+
+      .hook .code-card:nth-child(2) {
+        margin-left: 52px;
+      }
+
+      .hook .code-card:nth-child(3) {
+        margin-left: 104px;
+      }
+
+      .product-logo-row {
+        display: flex;
+        align-items: center;
+        gap: 34px;
+        animation: rise 0.9s ease both 3.18s;
+      }
+
+      .product-logo {
+        width: 172px;
+        height: 172px;
+        object-fit: contain;
+        filter: drop-shadow(0 0 36px rgba(73, 217, 255, 0.38));
+      }
+
+      .brand-name {
+        font-size: 96px;
+        font-weight: 950;
+        line-height: 1;
+      }
+
+      .surface-row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+        margin-top: 76px;
+      }
+
+      .surface {
+        min-height: 168px;
+        padding: 28px 24px;
+        border: 1px solid rgba(126, 231, 255, 0.24);
+        background: rgba(73, 217, 255, 0.07);
+        animation: tile-pop 0.65s ease both;
+      }
+
+      .surface:nth-child(1) {
+        animation-delay: 3.9s;
+      }
+
+      .surface:nth-child(2) {
+        animation-delay: 4.15s;
+      }
+
+      .surface:nth-child(3) {
+        animation-delay: 4.4s;
+      }
+
+      .surface strong {
+        display: block;
+        font-size: 38px;
+      }
+
+      .surface span {
+        display: block;
+        margin-top: 18px;
+        color: var(--muted);
+        font-size: 24px;
+        font-weight: 700;
+      }
+
+      .blueprint {
+        display: grid;
+        gap: 22px;
+        margin-top: 64px;
+      }
+
+      .rule {
+        display: grid;
+        grid-template-columns: 292px 1fr 92px;
+        column-gap: 24px;
+        align-items: center;
+        min-height: 92px;
+        padding: 0 28px;
+        border: 1px solid rgba(126, 231, 255, 0.24);
+        background: rgba(8, 18, 27, 0.84);
+        font-size: 28px;
+        font-weight: 850;
+        animation: lock-row 0.6s ease both;
+      }
+
+      .rule:nth-child(1) {
+        animation-delay: 8.65s;
+      }
+
+      .rule:nth-child(2) {
+        animation-delay: 8.95s;
+      }
+
+      .rule:nth-child(3) {
+        animation-delay: 9.25s;
+      }
+
+      .rule:nth-child(4) {
+        animation-delay: 9.55s;
+      }
+
+      .rule code {
+        color: var(--blue);
+        font-family: monospace;
+        font-size: 24px;
+        white-space: nowrap;
+      }
+
+      .lock {
+        justify-self: end;
+        color: var(--green);
+      }
+
+      .pipeline {
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 20px;
+        margin-top: 58px;
+      }
+
+      .rail {
+        display: grid;
+        grid-template-columns: 160px 1fr 74px;
+        align-items: center;
+        min-height: 104px;
+        padding: 0 26px;
+        border: 1px solid rgba(126, 231, 255, 0.22);
+        background: rgba(10, 19, 28, 0.86);
+        animation: rail-slide 0.6s ease both;
+      }
+
+      .rail:nth-child(1) {
+        animation-delay: 15.6s;
+      }
+
+      .rail:nth-child(2) {
+        animation-delay: 15.9s;
+      }
+
+      .rail:nth-child(3) {
+        animation-delay: 16.2s;
+      }
+
+      .rail:nth-child(4) {
+        animation-delay: 16.5s;
+      }
+
+      .rail-label {
+        color: var(--blue);
+        font-size: 32px;
+        font-weight: 950;
+      }
+
+      .rail-action {
+        color: var(--text);
+        font-size: 28px;
+        font-weight: 800;
+      }
+
+      .rail-check {
+        color: var(--green);
+        font-size: 36px;
+        font-weight: 950;
+      }
+
+      .tree-card {
+        margin-top: 34px;
+        padding: 26px 28px;
+        border-left: 4px solid var(--blue);
+        background: rgba(73, 217, 255, 0.06);
+        color: var(--muted);
+        font-family: monospace;
+        font-size: 24px;
+        line-height: 1.5;
+        animation: fade-up 0.7s ease both 17.2s;
+      }
+
+      .gate-stack {
+        display: grid;
+        gap: 20px;
+        margin-top: 58px;
+      }
+
+      .gate-step {
+        display: grid;
+        grid-template-columns: 92px 1fr 116px;
+        column-gap: 26px;
+        align-items: center;
+        min-height: 124px;
+        padding: 0 28px;
+        border: 1px solid rgba(69, 243, 154, 0.35);
+        background:
+          linear-gradient(90deg, rgba(69, 243, 154, 0.14), transparent 42%),
+          rgba(8, 18, 27, 0.88);
+        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
+      }
+
+      .step-index {
+        color: var(--green);
+        font-family: monospace;
+        font-size: 30px;
+        font-weight: 950;
+      }
+
+      .step-copy strong,
+      .step-copy span {
+        display: block;
+      }
+
+      .step-copy strong {
+        color: var(--text);
+        font-size: 34px;
+        font-weight: 950;
+      }
+
+      .step-copy span {
+        margin-top: 10px;
+        color: var(--muted);
+        font-size: 24px;
+        font-weight: 800;
+      }
+
+      .gate-status {
+        justify-self: end;
+        color: var(--green);
+        font-size: 26px;
+        font-weight: 950;
+      }
+
+      .cta {
+        text-align: center;
+        align-items: center;
+      }
+
+      .cta-card {
+        width: 100%;
+        padding: 80px 60px 72px;
+        border: 1px solid rgba(126, 231, 255, 0.26);
+        background: rgba(8, 16, 24, 0.88);
+        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
+        animation: final-lock 0.8s ease both 26.1s;
+      }
+
+      .cta-logo {
+        display: block;
+        width: 196px;
+        height: 196px;
+        margin: 0 auto 34px;
+        background: url("assets/icon.png") center / contain no-repeat;
+        filter: drop-shadow(0 0 44px rgba(73, 217, 255, 0.38));
+      }
+
+      .cta-title {
+        font-size: 84px;
+        font-weight: 950;
+        line-height: 1.02;
+      }
+
+      .cta-copy {
+        margin: 30px auto 0;
+        max-width: 780px;
+        color: var(--muted);
+        font-size: 34px;
+        line-height: 1.38;
+        font-weight: 800;
+      }
+
+      .install {
+        margin: 46px auto 0;
+        width: max-content;
+        max-width: 100%;
+        padding: 24px 30px;
+        border: 1px solid rgba(126, 231, 255, 0.36);
+        background: rgba(73, 217, 255, 0.08);
+        color: var(--blue);
+        font-family: monospace;
+        font-size: 30px;
+        font-weight: 850;
+      }
+
+      .repo {
+        margin-top: 28px;
+        color: var(--text);
+        font-size: 31px;
+        font-weight: 900;
+      }
+
+      .timeline-driven .scene,
+      .timeline-driven .hook-stack,
+      .timeline-driven .hook .headline,
+      .timeline-driven .product-logo-row,
+      .timeline-driven .surface,
+      .timeline-driven .rule,
+      .timeline-driven .rail,
+      .timeline-driven .tree-card,
+      .timeline-driven .gate-step,
+      .timeline-driven .cta-card {
+        animation: none;
+      }
+
+      @keyframes scene-hook {
+        0%,
+        9.9% {
+          opacity: 1;
+        }
+        10%,
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes scene-product {
+        0%,
+        9.9% {
+          opacity: 0;
+        }
+        10%,
+        26.5% {
+          opacity: 1;
+        }
+        26.6%,
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes scene-sdd {
+        0%,
+        26.5% {
+          opacity: 0;
+        }
+        26.6%,
+        49.9% {
+          opacity: 1;
+        }
+        50%,
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes scene-mcp {
+        0%,
+        49.9% {
+          opacity: 0;
+        }
+        50%,
+        73.2% {
+          opacity: 1;
+        }
+        73.3%,
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes scene-gates {
+        0%,
+        73.2% {
+          opacity: 0;
+        }
+        73.3%,
+        86.5% {
+          opacity: 1;
+        }
+        86.6%,
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes scene-cta {
+        0%,
+        86.5% {
+          opacity: 0;
+        }
+        86.6%,
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes glitch-in {
+        0% {
+          opacity: 0;
+          transform: translateX(-70px) rotate(-4deg);
+          filter: blur(8px);
+        }
+        38% {
+          opacity: 1;
+          transform: translateX(28px) rotate(-1deg);
+          filter: blur(0);
+        }
+        55% {
+          transform: translateX(-18px) rotate(-3deg);
+        }
+        100% {
+          transform: translateX(0) rotate(-2deg);
+        }
+      }
+
+      @keyframes punch {
+        from {
+          transform: scale(0.92);
+        }
+        to {
+          transform: scale(1);
+        }
+      }
+
+      @keyframes rise {
+        from {
+          opacity: 0;
+          transform: translateY(48px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes tile-pop {
+        from {
+          opacity: 0;
+          transform: translateY(44px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes lock-row {
+        from {
+          opacity: 0;
+          transform: translateX(-54px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes rail-slide {
+        from {
+          opacity: 0;
+          transform: translateX(64px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes fade-up {
+        from {
+          opacity: 0;
+          transform: translateY(24px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes node-pulse {
+        0%,
+        100% {
+          box-shadow: 0 0 20px rgba(73, 217, 255, 0.16);
+        }
+        50% {
+          box-shadow: 0 0 42px rgba(73, 217, 255, 0.48);
+        }
+      }
+
+      @keyframes edge-light {
+        from {
+          opacity: 0;
+          clip-path: inset(0 100% 0 0);
+        }
+        to {
+          opacity: 0.76;
+          clip-path: inset(0 0 0 0);
+        }
+      }
+
+      @keyframes final-lock {
+        from {
+          opacity: 0;
+          transform: translateY(50px) scale(0.98);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="stage"
+      data-composition-id="frontagent-douyin-promo"
+      data-start="0"
+      data-duration="30"
+      data-width="1080"
+        data-height="1920"
+        data-fps="30"
+      >
+      <audio
+        id="bgm-track"
+        class="clip"
+        src="assets/bgm.m4a"
+        data-start="0"
+        data-duration="30"
+        data-media-start="0"
+        data-volume="0.16"
+        data-track-index="0"
+        preload="auto"
+      >
+        <track
+          kind="captions"
+          src="assets/bgm-captions.vtt"
+          srclang="zh-CN"
+          label="BGM cue"
+          default
+        />
+      </audio>
+
+      <section
+        id="scene-hook"
+        class="scene clip hook"
+        data-start="0"
+        data-duration="3"
+        data-track-index="1"
+      >
+        <div class="hook-stack">
+          <div class="code-card">
+            <div class="code-line">
+              <span class="status-dot"></span>
+              import Button from "@/ui/ButtonGhost"
+            </div>
+          </div>
+          <div class="code-card">
+            <div class="code-line">
+              <span class="status-dot"></span>
+              fetch("/api/agent/unknown-route")
+            </div>
+          </div>
+          <div class="code-card">
+            <div class="code-line">
+              <span class="status-dot"></span>
+              writeFile("src/random/path.tsx")
+            </div>
+          </div>
+        </div>
+        <h1 class="headline">AI 会乱猜</h1>
+        <p class="subtitle">不存在的路径 / 不存在的 API / 绕过工程规范</p>
+        <div class="safe-bottom">
+          <div class="caption">AI 编程最大的问题，不是不会写代码</div>
+        </div>
+      </section>
+
+      <section
+        id="scene-product"
+        class="scene clip product"
+        data-start="3"
+        data-duration="5"
+        data-track-index="2"
+      >
+        <div class="product-logo-row">
+          <img class="product-logo" src="assets/icon.png" alt="FrontAgent" />
+          <div>
+            <div class="eyebrow">Open Source</div>
+            <div class="brand-name">FrontAgent</div>
+          </div>
+        </div>
+        <h2 class="headline">前端工程 <span class="accent">Agent</span></h2>
+        <p class="subtitle">不是聊天式代码助手，是规划、执行、验证、修复的一套工程流。</p>
+        <div class="surface-row">
+          <div class="surface">
+            <strong>CLI</strong>
+            <span>fa run / fa init</span>
+          </div>
+          <div class="surface">
+            <strong>VS Code</strong>
+            <span>侧边栏任务台</span>
+          </div>
+          <div class="surface">
+            <strong>Desktop</strong>
+            <span>可视化执行控制</span>
+          </div>
+        </div>
+        <div class="safe-bottom">
+          <div class="caption">FrontAgent：前端工程 Agent</div>
+        </div>
+      </section>
+
+      <section
+        id="scene-sdd"
+        class="scene clip sdd"
+        data-start="8"
+        data-duration="7"
+        data-track-index="3"
+      >
+        <div class="eyebrow">Specification Driven Development</div>
+        <h2 class="headline">SDD 先定边界</h2>
+        <p class="subtitle">让 AI 动手前，先把项目规则变成硬约束。</p>
+        <div class="blueprint panel">
+          <div class="rule">
+            <code>tech_stack</code>
+            <span>React / TypeScript / Vite</span>
+            <span class="lock">LOCK</span>
+          </div>
+          <div class="rule">
+            <code>module_boundaries</code>
+            <span>组件、Hooks、工具函数边界</span>
+            <span class="lock">LOCK</span>
+          </div>
+          <div class="rule">
+            <code>protected_files</code>
+            <span>关键配置需要显式确认</span>
+            <span class="lock">LOCK</span>
+          </div>
+          <div class="rule">
+            <code>quality_gates</code>
+            <span>lint / typecheck / test</span>
+            <span class="lock">LOCK</span>
+          </div>
+        </div>
+        <div class="safe-bottom">
+          <div class="caption">先有规格，再让 AI 动手</div>
+        </div>
+      </section>
+
+      <section
+        id="scene-mcp"
+        class="scene clip mcp"
+        data-start="15"
+        data-duration="7"
+        data-track-index="4"
+      >
+        <div class="eyebrow">Model Context Protocol</div>
+        <h2 class="headline">MCP 控制感知与执行</h2>
+        <p class="subtitle">不靠猜，所有关键动作都走可检查工具。</p>
+        <div class="pipeline">
+          <div class="rail">
+            <div class="rail-label">Files</div>
+            <div class="rail-action">read_file / apply_patch / minimal diff</div>
+            <div class="rail-check">OK</div>
+          </div>
+          <div class="rail">
+            <div class="rail-label">Browser</div>
+            <div class="rail-action">DOM / accessibility tree / interaction</div>
+            <div class="rail-check">OK</div>
+          </div>
+          <div class="rail">
+            <div class="rail-label">Shell</div>
+            <div class="rail-action">typecheck / tests / local gates</div>
+            <div class="rail-check">OK</div>
+          </div>
+          <div class="rail">
+            <div class="rail-label">Git</div>
+            <div class="rail-action">diff / branch / commit / PR workflow</div>
+            <div class="rail-check">OK</div>
+          </div>
+        </div>
+        <div class="tree-card">
+          accessibility-tree<br />
+          ├─ button: "Run task"<br />
+          ├─ input: "Browser URL"<br />
+          └─ status: "quality gates passing"
+        </div>
+        <div class="safe-bottom">
+          <div class="caption">不靠猜，靠工具确认</div>
+        </div>
+      </section>
+
+      <section
+        id="scene-gates"
+        class="scene clip gates"
+        data-start="22"
+        data-duration="4"
+        data-track-index="5"
+      >
+        <div class="eyebrow">Quality Gates</div>
+        <h2 class="headline">交付前跑门禁</h2>
+        <p class="subtitle">不是说完成就完成，验证结果必须过线。</p>
+        <div class="gate-stack">
+          <div class="gate-step">
+            <span class="step-index">01</span>
+            <div class="step-copy">
+              <strong>计划对齐</strong>
+              <span>SDD / 文件边界 / 最小改动</span>
+            </div>
+            <span class="gate-status">CHECK</span>
+          </div>
+          <div class="gate-step">
+            <span class="step-index">02</span>
+            <div class="step-copy">
+              <strong>本地校验</strong>
+              <span>lint / typecheck / test</span>
+            </div>
+            <span class="gate-status">PASS</span>
+          </div>
+          <div class="gate-step">
+            <span class="step-index">03</span>
+            <div class="step-copy">
+              <strong>失败回修</strong>
+              <span>把错误反馈给计划，再生成补丁</span>
+            </div>
+            <span class="gate-status">LOOP</span>
+          </div>
+        </div>
+        <div class="safe-bottom">
+          <div class="caption">lint / typecheck / test，过了再交付</div>
+        </div>
+      </section>
+
+      <section
+        id="scene-cta"
+        class="scene clip cta"
+        data-start="26"
+        data-duration="4"
+        data-track-index="6"
+      >
+        <div class="cta-card">
+          <div class="cta-logo" aria-label="FrontAgent"></div>
+          <div class="cta-title">FrontAgent</div>
+          <div class="cta-copy">把 AI 编程关进工程护栏</div>
+          <div class="install">npm install -g frontagent</div>
+          <div class="repo">GitHub: ceilf6/FrontAgent</div>
+        </div>
+        <div class="safe-bottom">
+          <div class="caption">开源前端工程 Agent</div>
+        </div>
+      </section>
+    </div>
+    <script>
+      (() => {
+        const duration = 30;
+        const stage = document.getElementById("stage");
+        stage.classList.add("timeline-driven");
+
+        const sceneSpecs = [
+          ["scene-hook", 0, 3],
+          ["scene-product", 3, 8],
+          ["scene-sdd", 8, 15],
+          ["scene-mcp", 15, 22],
+          ["scene-gates", 22, 26],
+          ["scene-cta", 26, 30],
+        ].map(([id, start, end]) => ({
+          id,
+          start,
+          end,
+          el: document.getElementById(id),
+        }));
+
+        const query = (selector) => Array.from(document.querySelectorAll(selector));
+        const clamp = (value, min = 0, max = 1) =>
+          Math.max(min, Math.min(max, value));
+        const ease = (value) => 1 - (1 - clamp(value)) ** 3;
+        const reveal = (time, start, span) => ease((time - start) / span);
+        const set = (el, styles) => {
+          if (!el) return;
+          Object.assign(el.style, styles);
+        };
+        const setMany = (items, stylesForItem) => {
+          items.forEach((item, index) => {
+            set(item, stylesForItem(index));
+          });
+        };
+
+        function setSceneVisibility(time) {
+          sceneSpecs.forEach((scene) => {
+            const visible = time >= scene.start && time < scene.end;
+            set(scene.el, {
+              opacity: visible ? "1" : "0",
+              visibility: visible ? "visible" : "hidden",
+            });
+          });
+        }
+
+        function drawHook(time) {
+          const stack = reveal(time, 0.1, 0.8);
+          const title = reveal(time, 0.65, 0.55);
+          const subtitle = reveal(time, 1.4, 0.6);
+          const exit = time > 2.58 ? 1 - clamp((time - 2.58) / 0.42) : 1;
+          set(document.querySelector(".hook-stack"), {
+            opacity: String(stack * exit),
+            transform: `translateX(${(1 - stack) * -70}px) rotate(${-4 + stack * 2}deg)`,
+            filter: `blur(${(1 - stack) * 8}px)`,
+          });
+          set(document.querySelector(".hook .headline"), {
+            opacity: String(title * exit),
+            transform: `scale(${0.92 + title * 0.08})`,
+          });
+          set(document.querySelector(".hook .subtitle"), {
+            opacity: String(subtitle * exit),
+            transform: `translateY(${(1 - subtitle) * 24}px)`,
+          });
+          set(document.querySelector(".hook .caption"), {
+            opacity: String(reveal(time, 0.2, 0.45) * exit),
+            transform: `translateY(${(1 - reveal(time, 0.2, 0.45)) * 26}px)`,
+          });
+        }
+
+        function drawProduct(time) {
+          const logo = reveal(time, 3.15, 0.8);
+          const title = reveal(time, 3.55, 0.7);
+          set(document.querySelector(".product-logo-row"), {
+            opacity: String(logo),
+            transform: `translateY(${(1 - logo) * 48}px)`,
+          });
+          set(document.querySelector(".product .headline"), {
+            opacity: String(title),
+            transform: `translateY(${(1 - title) * 36}px)`,
+          });
+          set(document.querySelector(".product .subtitle"), {
+            opacity: String(reveal(time, 3.85, 0.7)),
+          });
+          setMany(query(".surface"), (index) => {
+            const item = reveal(time, 3.9 + index * 0.25, 0.55);
+            return {
+              opacity: String(item),
+              transform: `translateY(${(1 - item) * 44}px)`,
+            };
+          });
+        }
+
+        function drawSdd(time) {
+          const title = reveal(time, 8.25, 0.55);
+          set(document.querySelector(".sdd .eyebrow"), {
+            opacity: String(reveal(time, 8.1, 0.45)),
+          });
+          set(document.querySelector(".sdd .headline"), {
+            opacity: String(title),
+            transform: `translateY(${(1 - title) * 32}px)`,
+          });
+          set(document.querySelector(".sdd .subtitle"), {
+            opacity: String(reveal(time, 8.45, 0.55)),
+          });
+          setMany(query(".rule"), (index) => {
+            const item = reveal(time, 8.65 + index * 0.3, 0.45);
+            return {
+              opacity: String(item),
+              transform: `translateX(${(1 - item) * -54}px)`,
+            };
+          });
+        }
+
+        function drawMcp(time) {
+          const title = reveal(time, 15.25, 0.55);
+          set(document.querySelector(".mcp .eyebrow"), {
+            opacity: String(reveal(time, 15.1, 0.45)),
+          });
+          set(document.querySelector(".mcp .headline"), {
+            opacity: String(title),
+            transform: `translateY(${(1 - title) * 32}px)`,
+          });
+          set(document.querySelector(".mcp .subtitle"), {
+            opacity: String(reveal(time, 15.45, 0.55)),
+          });
+          setMany(query(".rail"), (index) => {
+            const item = reveal(time, 15.6 + index * 0.3, 0.45);
+            return {
+              opacity: String(item),
+              transform: `translateX(${(1 - item) * 64}px)`,
+            };
+          });
+          const tree = reveal(time, 17.2, 0.7);
+          set(document.querySelector(".tree-card"), {
+            opacity: String(tree),
+            transform: `translateY(${(1 - tree) * 24}px)`,
+          });
+        }
+
+        function drawGates(time) {
+          set(document.querySelector(".gates .eyebrow"), {
+            opacity: String(reveal(time, 22.1, 0.45)),
+          });
+          set(document.querySelector(".gates .headline"), {
+            opacity: String(reveal(time, 22.25, 0.55)),
+            transform: `translateY(${(1 - reveal(time, 22.25, 0.55)) * 30}px)`,
+          });
+          set(document.querySelector(".gates .subtitle"), {
+            opacity: String(reveal(time, 22.45, 0.55)),
+          });
+          setMany(query(".gate-step"), (index) => {
+            const item = reveal(time, 22.7 + index * 0.28, 0.46);
+            return {
+              opacity: String(item),
+              transform: `translateX(${(1 - item) * 54}px)`,
+            };
+          });
+        }
+
+        function drawCta(time) {
+          const card = reveal(time, 26.1, 0.7);
+          set(document.querySelector(".cta-card"), {
+            opacity: String(card),
+            transform: `translateY(${(1 - card) * 50}px) scale(${0.98 + card * 0.02})`,
+          });
+          set(document.querySelector(".cta .caption"), {
+            opacity: String(reveal(time, 27.2, 0.5)),
+          });
+        }
+
+        const state = {
+          currentTime: 0,
+          isPaused: true,
+        };
+
+        function seekTo(value) {
+          const time = clamp(Number(value) || 0, 0, duration);
+          state.currentTime = time;
+          setSceneVisibility(time);
+          drawHook(time);
+          drawProduct(time);
+          drawSdd(time);
+          drawMcp(time);
+          drawGates(time);
+          drawCta(time);
+        }
+
+        const timeline = {
+          duration: () => duration,
+          totalDuration: () => duration,
+          time(value) {
+            if (typeof value === "number") {
+              seekTo(value);
+              return this;
+            }
+            return state.currentTime;
+          },
+          seek(value) {
+            seekTo(value);
+            return this;
+          },
+          pause() {
+            state.isPaused = true;
+            return this;
+          },
+          play() {
+            state.isPaused = false;
+            return this;
+          },
+          paused(value) {
+            if (typeof value === "boolean") {
+              state.isPaused = value;
+              return this;
+            }
+            return state.isPaused;
+          },
+        };
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["frontagent-douyin-promo"] = timeline;
+        seekTo(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/marketing/hyperframes/frontagent-douyin-promo/meta.json b/marketing/hyperframes/frontagent-douyin-promo/meta.json
new file mode 100644
index 00000000..12b708a9
--- /dev/null
+++ b/marketing/hyperframes/frontagent-douyin-promo/meta.json
@@ -0,0 +1,9 @@
+{
+  "name": "frontagent-douyin-promo",
+  "id": "frontagent-douyin-promo",
+  "width": 1080,
+  "height": 1920,
+  "fps": 30,
+  "duration": 30,
+  "entry": "index.html"
+}