Menu

Individual skill

html-product-showcase

0upvotes

根据产品特点、目标用户与真实功能证据设计 HTML/CSS/SVG 产品展示动画，选择合适的动效与分镜，交付可 seek 的网页、MP4 和可复用项目；支持横竖屏重新编排与配音字幕。

templates/product-demo/html-product-showcase/SKILL.md

Read pinned source

Source commit 47cc68e1fe7a04213eb9aa53db9f08cb9a06d317

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
9
Repository last updated
Sep 18, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# HTML 产品展示动画

交付目标：围绕产品实际价值的一支展示动画，以及可编辑 HTML、时间线、资产清单和视频。先理解产品，再选择动画手法；示例只演示技术，不作为固定片头、布局或分镜。

## 1. 理解产品与任务

从用户描述、提供的产品文档、可访问页面或代码中确认：面向谁、解决什么问题、最值得展示的 1–3 个特点、可以展示的证据。只查与当前产品有关的资料。缺少产品本身或核心信息时补问；其他可选参数用合理默认并记录。

默认中文、1920×1080、30fps、约 20–30 秒、无声，无固定角色贴纸。用户指定平台时按其比例与观看场景重排；3:4、9:16 和16:9分别设计。新建版本目录，保存需求、素材来源与哈希，保留已接受版本。

区分真实界面录制、演示状态和概念解释。演示数值不能冒充性能测试；未确认功能不编成卖点。实体产品没有可用照片/模型时，提供清晰标注的示意结构，不能把 CSS 假3D说成精确产品建模。

## 2. 把特点变成分镜
Back to top