用视频与三维素材，搭出电影感首屏

看懂电影感首屏怎样组成

有了视频或立体素材，网页仍可能像把素材放进模板。MotionSites Web Builder 会先读相近设计范例、看素材图选材，再确定文字、画面层次和动画的具体规格，完成后截图改稿。

上方是作者约 13 秒的网页作品合集。留意三个关系：

• 素材与留白：大幅角色、产品或视频占据视觉中心，文字放在主体之外。
• 文字与层次：超大标题和主体前后穿插，页面其他信息保持克制。
• 动效与内容：素材运动、文字入场和交互共同突出一个主要画面。

免费包包含 40 个设计范例、视频与透明素材的缩略图，以及动效代码配方。它既能制作网页，也能输出给其他 AI 建站工具使用的详细提示词。

和站内同类怎么选

• MotionSites Web Builder：适合以视频、立体素材和动效为中心的首屏；先选素材，再写具体设计规格并看图调整。
• Hallmark：适合按页面用途选择视觉主题，也能单独检查或改版已有页面。
• landing-page-design：适合先梳理受众、卖点、文案和主要动作，再逐段制作落地页。

安装技能并准备截图工具

下面用 Claude Code、macOS 或 Linux 终端、Python 3 和本机 Chrome，制作旅行摄影师作品集的首屏：画面缓慢移动的风景视频配标题与预约按钮。Chrome 用于检查视频播放；Playwright 是控制浏览器截图和检查页面的工具。

1. 在 Claude Code 中依次输入这两条插件命令：

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

2. 重开会话，要求“读取 motionsites-web-builder，确认能找到 examples/INDEX.md、media/MEDIA.md、references/spec-template.md 和 scripts/shoot.py”。AI 应能读到这些文件并概括先选材、再写规格、最后截图修改的流程。
3. 新建网页工作目录，在该目录的终端准备独立 Python 环境：

python3 -m venv .venv
source .venv/bin/activate
python -m pip install playwright
python -m playwright install chromium

安装命令正常结束后，保留 .venv/。后面的截图请求会明确让 AI 使用这个环境中的 Python。

把需求变成设计规格

1. 在工作目录新建 brief.md，写入摄影师名称、拍摄方向、目标客户、主要标题含义和真实预约地址。
2. 将作品、标志或视频放进 assets/。没有合适视频时，让 AI 从技能的素材架中看图选择；素材架是带缩略图和准确链接的素材清单。
3. 在 Claude Code 打开这个工作目录，发送下面的本站练习请求：

使用 motionsites-web-builder，为 brief.md 中的旅行摄影师制作作品集首屏。
只做首屏，输出单个 index.html。受众是寻找旅行与户外拍摄服务的客户，主要动作是打开 brief.md 中的预约地址。
氛围：安静、开阔、有电影感。以一段画面缓慢移动的风景视频为主要视觉，文字放在画面留白处。
先检查 assets/，再读最接近的 2–3 个设计范例；需要素材架时，查看缩略图并使用清单中的准确链接。
先给设计规格：最终使用的文案、素材来源和裁切位置、字体与字号、颜色、标题和按钮的位置，以及入场动画的触发、时长和缓动。
说明手机上的裁切与排版、减少动态效果时的显示方式。先让我确认规格，再写代码。

看规格时，先确认“谁提供什么服务、按钮点到哪里”，再看素材主体会不会和文字争位置。动画选一个主要效果即可，例如标题逐行进入；其余元素配合它出现。

页面上看似三维的主体，也可能来自预渲染视频或透明图片。若要让访客实际旋转物体，应另行选择真实三维模型与 Three.js 路线，规格里写明模型文件和交互方式。

完成首屏并看图改稿

确认规格后，继续发送：

按已确认规格完成 index.html，使用固定版本的 CDN 依赖。
从本次加载的 motionsites-web-builder 找到 scripts/shoot.py，使用项目 .venv/bin/python 运行，检查 index.html，截图保存到项目 shots/。
打开桌面、手机和页面初始画面的截图，并阅读脚本输出的检查报告；检查视频、字体、按钮、文字遮挡和手机横向溢出。
按技能评审规则找出最弱的三处并修改，再截图比较；最多三轮。
交付页面与截图的实际路径、打开方法，以及最终仍需处理的问题。

脚本属于技能安装目录，网页和 .venv/ 属于你的工作目录。让 AI 按两处的实际路径运行，并给出可重跑的命令。

结果	你要看什么
shots/desktop.png	标题、主体和预约按钮是否形成清楚的阅读顺序
shots/mobile.png	素材裁切是否合适，标题和按钮是否完整可见
shots/desktop-early.png	页面刚出现时的背景和文字状态
脚本输出的报告	请求失败、字体、视频状态和横向溢出

报告打印在运行输出中。它能帮助定位加载和布局问题；实际观看时还要打开 index.html，播放完整视频循环、点击预约按钮，并启用系统“减少动态效果”检查静态呈现。

局部修改，再换成自己的项目

例如，手机截图中的标题挡住了风景主体，可以这样改：

只调整手机端：把标题移到视频留白区，重新设置视频裁切位置，保证预约按钮完整可见。
保留桌面布局、现有文案、字体和主色。先返回修改前后的手机截图，再确认桌面没有受到影响。

视频裁切和文字位置要一起看；替换素材后，原先的留白位置可能已经改变。换用透明立体图片时，还要重新确定前后层次和图片尺寸。

使用自己的资料继续制作时，替换下面的方括号：

使用 motionsites-web-builder，制作 [品牌/作品集/产品] 的 [首屏/完整落地页]。
资料与素材：[brief 文件、标志、照片、视频或模型路径]。
受众与主要动作：[谁来看、希望点击哪里，附真实地址]。
氛围：[三个描述词]。主要视觉或交互：[只选一个重点]。
输出：[单文件 HTML/已有项目技术栈/仅供 Lovable 等工具使用的提示词]。
先选相近范例和素材，再给具体规格。
输出网页时，确认后制作，并检查桌面、手机与减少动态效果；仅提示词时，按目标工具整理规格后交付。

延伸整页时，列出作品、服务介绍、联系等所需版块，沿用首屏字体和颜色。选择“仅提示词”时，交付物是按目标工具组织的设计规格，之后再粘贴到相应工具制作。

指令、参考和脚本采用 MIT 许可；范例与素材可用于通过本技能制作的网站，包括客户项目，不能另行作为提示词或素材合集转售、分发。具体范围见仓库许可。