القائمة
Extract frames from a reference video at precise timestamps to analyze opening animation timing and visual style before building a HyperFrames composition.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Direct browser control via CDP. Use when the user wants to automate, scrape, test, or interact with web pages. Connects to the user's already-running Chrome.
Convert any input into a modern editorial black-and-white line-art character illustration system and produce PNG image-generation outputs by default. Use when the user asks to turn text, images, brand names, product ideas, UI concepts, or campaigns into minimalist geometric character illustrations, editorial layouts, website hero visuals, mobile UI mockups, packaging, magazine spreads, or PNG visuals in the specified monochrome line-art plus pastel accent style.
Debug red border/rectangle overlays appearing on Chinese text in HyperFrames HTML on macOS Chrome — caused by images with baked-in borders, not CSS.
Typeset professional documents: resumes, one-pagers, white papers, letters, portfolios, slide decks. Warm parchment, ink-blue accent, serif-led hierarchy. CN uses TsangerJinKai02, EN uses Charter, JA uses YuMincho (best-effort). Triggers on "做 PDF / 排版 / 一页纸 / 白皮书 / 作品集 / 简历 / PPT / slides", or "build me a resume / make a one-pager / design a slide deck / turn this into a PDF / make this presentable".
Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.
用户在讨论创业融资规模、追求"大张旗鼓发布会"策略、或者用资金替代产品验证时激活。 信号词: "我们有盛大发布会"、"融到钱就安全了"、"18亿美元"、"大厂都这么做"。 不适用于: 已验证PMF后的合理扩张、非创业场景的普通融资需求。
| name | hyperframes-video-frame-analysis |
| description | Extract frames from a reference video at precise timestamps to analyze opening animation timing and visual style before building a HyperFrames composition. |
| category | hyperframes |
在开始写 HyperFrames HTML 之前，先用 ffmpeg 提取参考视频的关键帧，理解其：
ffmpeg — 提取帧python3 + PIL — 像素分析（文件大小、颜色采样）cd /path/to/project
# Nano Banana 类：0-3s 每 0.1s 提取一次（10fps）
for t in 0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0 1.2 1.5 1.8 2.0 2.5 3.0; do
ffmpeg -i "reference_video.mp4" -vf "scale=960:540" -ss $t -frames:v 1 -update 1 "nb_t${t}.png" 2>/dev/null
done
# 稍长间隔用于后续场景（3-10s）
for t in 3.0 4.0 5.0 6.0 7.0 8.0; do
ffmpeg -i "reference_video.mp4" -vf "scale=960:540" -ss $t -frames:v 1 -update 1 "nb_scene1_t${t}.png" 2>/dev/null
done
文件大小直接反映画面复杂度（内容越多越大，纯黑屏最小）：
ls -la *.png | awk '{print $5, $9}' | sort -n
用 open 命令在 Preview 中查看，和视频时间轴对应：
open nb_t0.0.png nb_t0.3.png nb_t0.6.png nb_t1.0.png
from PIL import Image
import numpy as np
img = Image.open('nb_t0.5.png')
arr = np.array(img)
w, h = img.size
# 采样四角和中心
for label, y, x in [('tl', 10, 10), ('ctr', h//2, w//2), ('br', h-10, w-10)]:
r, g, b = arr[y, x, :3]
print(f"{label}: #{r:02x}{g:02x}{b:02x}")
根据文件大小变化曲线，总结出：
→ 用于确定 GSAP timeline 的关键时间点
scale=960:540 用于分析，输出到 HTML 时用原始分辨率 scale=1920:1080-update 1 覆盖同一文件，不用每次改输出名open 在 Preview 查看，不要只靠像素数据