目录
- 玩耍网址
- 效果呈现
- 做错的版本展现-为了抽奖贪了
- 怎么定需求的方法和提示词
- 设计的3d剪纸遇见的死胡同绕过方法（3d计算改2d计算）+trae宝
- 让solo一键输出带截图的总结网页，自己截图自己写html
- 分享了html空白模板-输出bug复盘，输出总结+成功演示，输出过程都好用，省心在ai帮你截图
- 制作动态视频首页的方法-视频好看首页就好看了。。。
- 、手机版不能玩，触屏不能识别
负一、畅玩网址-视频加载需要一点点时间-有动态降级可能看不见视频
https://traeou0spu1r.vercel.app/
http://118.145.113.209/papercut/
必看新手教程，剪纸点一次激活一次，我寻思这拖拽方便点
零、效果呈现
- 手机版镇楼
-
结合视频的动态网页
-
能准确处理各种运算的数字剪纸，trae宝倾情陪伴，缓慢的剪纸感受。
- -
trae宝剪纸
一 、旧版本首页
，旧版本最终失败原因：没有定义需求
这是旧方法设计的网页，后续迭代发现有问题，改用新方法重新设计。
二、进行【需求+skill】的获取-以定义我们到底想设计什么
我一开始尝试了，一键生成的网页+持续更新剪纸。发现剪纸效果很差。所以开始重新设计。
于是用到了这个方法：
先定需求+看看这个需求有哪些skill可以参考。
创建了一个脑暴助手：-提示词在文末
目标：多轮聊天
-
1.累积需求
-
2.累积需求所需的的skills
和Trae上的solo进行多轮沟通，最终获得一个如下的需求文档：
我要做的是：整理第 1 轮脑暴清单，并把你的“真实剪纸体验”拆成后续可持续累计的需求、知识点和 Skill 路线。
本轮新增需求：项目核心是“真实质感”的剪纸网站。
本轮新增需求：首页必须是简单商业级主页。
本轮新增需求：首页不能有过多入口。
本轮新增需求：首页只保留一个明确主入口“进入设计”。
本轮新增需求：设计页面必须以真实纸张作为核心交互对象。
本轮新增需求：用户进入设计页后要直接对纸张进行裁剪。
本轮新增需求：纸张折叠后必须出现明显的不平坦效果。
本轮新增需求：对折区域必须有明显褶皱。
本轮新增需求：剪切过程必须体现阻力感。
本轮新增需求：整体交互不能只是简单动画式数字模拟。
本轮新增需求：整体操作流程要尽量按真实世界剪纸步骤 1:1 映射。
本轮转译：我先把“不要模拟”落地为“不接受装饰性伪效果，必须有可感知的物理与材质反馈”。
本轮隐含需求：设计页不能做成传统表单式编辑器。
本轮隐含需求：纸张需要具备厚度、材质、折痕记忆和局部形变表现。
本轮隐含需求：剪切行为需要作用于真实几何结构或网格，而不是只显示一条装饰性裁剪线。
本轮隐含需求：折叠后的裁剪结果需要支持展开还原。
本轮隐含需求：交互过程需要实时反馈，不能出现明显延迟或跳变。
本轮隐含需求：设计页需要一套明确的纸张状态机。
本轮隐含需求：设计页第一优先级是“真实感”，不是功能堆砌。
本轮待确认：这里的“1:1”是指真实纸张尺寸比例 1:1，还是指真实操作流程 1:1。
本轮待确认：是否接受 3D 或 2.5D 呈现来实现折叠后的非平整效果。
本轮待确认：是否必须模拟剪刀开合动作，还是只要求剪切阻力与路径真实。
本轮待确认：是否只支持单张纸，还是支持多次折叠与更复杂折法。
本轮待确认：是否允许用户匿名直接进入设计页。
本轮待确认：是否需要保存、导出、分享成品。
本轮待确认：真实感的验收标准更偏“视觉逼真”，还是更偏“物理行为逼真”。
本轮涉及知识点：产品需求分析。
本轮涉及知识点：前端架构。
本轮涉及知识点：UI 设计。
本轮涉及知识点：UX 设计。
本轮涉及知识点：实时交互系统。
本轮涉及知识点：WebGL / Three.js / WebGPU 方向评估。
本轮涉及知识点：图形渲染。
本轮涉及知识点：材质与光照表现。
本轮涉及知识点：纸张着色与纹理。
本轮涉及知识点：几何变形。
本轮涉及知识点：折叠模拟。
本轮涉及知识点：褶皱生成。
本轮涉及知识点：物理模拟。
本轮涉及知识点：纸张物理建模方案评估。
本轮涉及知识点：质点-弹簧 / PBD / 有限元简化方案评估。
本轮涉及知识点：碰撞、约束与阻力建模。
本轮涉及知识点：计算几何。
本轮涉及知识点：网格拓扑更新。
本轮涉及知识点：展开还原算法。
本轮涉及知识点：交互状态机。
本轮涉及知识点：高帧率性能优化。
本轮 Skill 搜索规则：先用 npx skills find <query> 搜索，再决定安装；find-skills 官方说明就是用于发现和安装技能，并建议按具体领域关键词搜索。
本轮命令规范：后续统一优先使用 repo --skill skill-name 这种安装写法，CLI README 明确给出了这种形式。
本轮 Skill 搜索策略：不要直接搜“剪纸网站”，优先拆成 frontend、minimal landing、webgl、threejs、physics simulation、deformation、interaction 这类关键词。
本轮可搜索 Skill：极简首页与设计页视觉方向。
本轮 Skill 搜索命令：npx skills find frontend design landing page minimal ui
本轮可搜索 Skill：复杂前端应用外壳与多组件页面结构。
本轮 Skill 搜索命令：npx skills find frontend app react state routing
本轮可搜索 Skill：3D 交互、实时渲染与着色方向。
本轮 Skill 搜索命令：npx skills find webgl threejs shader interaction
本轮可搜索 Skill：折叠、形变、阻力、约束等物理方向。
本轮 Skill 搜索命令：npx skills find physics simulation deformation cloth constraints
本轮可搜索 Skill：交互动作与动效反馈方向。
本轮 Skill 搜索命令：npx skills find motion interaction design system
本轮可安装 Skill：find-skills。
本轮 Skill 安装命令：npx skills add vercel-labs/skills --skill find-skills。
本轮可安装 Skill：frontend-design，适合首页、极简商业视觉、设计页 UI 质感与整体前端界面实现。
本轮 Skill 安装命令：npx skills add anthropics/skills --skill frontend-design。
本轮可安装 Skill：web-artifacts-builder，适合后续快速搭建复杂多组件前端外壳、状态管理和页面骨架。
本轮 Skill 安装命令：npx skills add anthropics/skills --skill web-artifacts-builder。
本轮可安装 Skill：skill-creator，适合后续把“真实剪纸交互规范”沉淀成你自己的专用 skill。
本轮 Skill 安装命令：npx skills add anthropics/skills --skill skill-creator。
当前累计需求：做一个以真实纸张交互为核心的剪纸网站。
当前累计需求：首页采用简单商业级表达，不放置过多入口。
当前累计需求：首页只保留一个主入口“进入设计”。
当前累计需求：设计页允许直接对真实感纸张进行折叠与裁剪。
当前累计需求：折叠后必须可见不平坦、褶皱、折痕和局部形变。
当前累计需求：剪切时必须体现阻力与真实反馈。
当前累计需求：交互不接受低保真伪动画，目标是高拟真操作体验。
当前累计需求：整体流程尽量按真实世界剪纸操作 1:1 映射。
当前累计待确认：1:1 的定义、是否 3D/2.5D、是否匿名进入、是否需要保存导出、是否必须模拟剪刀开合。
当前累计知识点：前端、UI/UX、实时渲染、纸张材质、几何变形、折叠模拟、物理模拟、计算几何、展开还原、状态机、性能优化。
当前累计 Skill：find-skills、frontend-design、web-artifacts-builder、skill-creator。
当前累计 Skill：纸张物理模拟方向先不直接指定安装项，下一轮继续按 threejs / webgl / physics simulation / deformation 继续筛选更稳妥。
直接开做，-这个版本我改成了极简风，第一个版本剪纸图片虽好。但…
然后改了一版喜庆的
这部分是
设计前考虑什么？搜集一些什么信息？
- 想法
- 搜集想法对应的技术栈，比如在社区skills.sh中比较好的skill
二、新问题，物理计算失效。这个做好了。3D计算复杂导致的
就是折叠的计算总是有问题
所以有了：在2D维度计算 3D维度渲染的方法-所以经验是改bug改不好，可能就是bug外原因，一直在3D路上死磕是算不出来的。-技术路线错误的纠正
同步输出复盘网页：-注意可以让solo自己截图。我这里没有给精准命令截图到虚拟机-虚拟机没有渲染导致空白。
三、这一步还产生了一个复盘html模板，让ai自己截图输出-类似上一步那个。把经验+成功输出为一个html。让他直接截网页试试。
比如输出：
其中类似：
折叠、裁切、展开的交互逻辑
我们没有把这套交互写成一堆 if/else，而是显式做成了一台状态机。当前版本的核心状态包括： loading → idle → fold_armed → folding → fold_settle → cut_armed → cut_tracking → cut_solving → fragment_select → discard_anim → unfold_preview → saving
靠的就是第一步需求确定时写清楚，澄清一下，第一步中。skill的寻找是附带，我也没有切实感受到额外效果。
下面一个模板prompt-html版，可以用来生成这种总结网页 让ai自己截图展示之类的。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>技术复盘文章（空白模板 / 原版皮肤）</title>
<style>
:root {
--paper: #f3eee4;
--paper-strong: #ebe1d2;
--ink: #201b16;
--muted: #70655a;
--line: rgba(32, 27, 22, 0.1);
--accent: #bd261b;
--accent-soft: rgba(189, 38, 27, 0.1);
--olive: #47453d;
--shadow: 0 24px 60px rgba(43, 32, 18, 0.14);
}
* {
box-sizing: border-box;
}
html {
background:
radial-gradient(circle at top, rgba(189, 38, 27, 0.08), transparent 28%),
linear-gradient(180deg, #f8f4ec, #eee7da 68%, #e7e0d4);
color: var(--ink);
font-family:
"PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
}
body {
margin: 0;
min-height: 100vh;
}
.sheet {
width: min(1160px, calc(100vw - 48px));
margin: 32px auto 56px;
background: rgba(248, 243, 236, 0.86);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 28px;
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
overflow: hidden;
}
.hero {
position: relative;
padding: 56px 56px 44px;
background:
linear-gradient(135deg, rgba(189, 38, 27, 0.08), transparent 28%),
linear-gradient(180deg, rgba(71, 69, 61, 0.08), transparent),
var(--paper);
border-bottom: 1px solid var(--line);
}
.hero::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(32, 27, 22, 0.06);
border-radius: 22px;
pointer-events: none;
}
.eyebrow {
margin: 0 0 20px;
color: var(--muted);
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
}
h1,
h2,
h3 {
margin: 0;
font-family:
"Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
font-weight: 600;
letter-spacing: 0.02em;
}
h1 {
max-width: 920px;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.12;
}
.lead {
max-width: 840px;
margin: 22px 0 0;
color: var(--muted);
font-size: 18px;
line-height: 1.9;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.meta-chip,
.stack-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid rgba(32, 27, 22, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.58);
color: var(--olive);
font-size: 13px;
}
.body {
padding: 34px 56px 56px;
}
.section {
padding: 28px 0 34px;
border-bottom: 1px dashed rgba(32, 27, 22, 0.12);
}
.section:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.section-title {
margin-bottom: 18px;
font-size: clamp(24px, 3vw, 34px);
}
.section p {
margin: 0 0 14px;
color: #40352c;
line-height: 1.95;
font-size: 16px;
}
.section p:last-child {
margin-bottom: 0;
}
.section ul {
margin: 0;
padding-left: 20px;
color: #40352c;
}
.section li {
margin: 10px 0;
line-height: 1.9;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.panel {
padding: 20px;
border: 1px solid rgba(32, 27, 22, 0.08);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 239, 230, 0.72));
}
.panel h3 {
margin-bottom: 10px;
font-size: 18px;
}
.panel p {
font-size: 15px;
line-height: 1.85;
}
.stack-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.stack-chip {
background: rgba(189, 38, 27, 0.06);
color: #6b241c;
}
.snapshot-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
figure {
margin: 0;
}
.shot {
border: 1px solid rgba(32, 27, 22, 0.08);
border-radius: 22px;
overflow: hidden;
background: white;
box-shadow: 0 18px 32px rgba(60, 38, 15, 0.08);
}
figcaption {
padding: 14px 16px 16px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
}
.quote {
margin: 18px 0 0;
padding: 18px 20px;
border-left: 3px solid var(--accent);
background: var(--accent-soft);
color: #51241f;
line-height: 1.9;
}
.footnote {
margin-top: 18px;
color: var(--muted);
font-size: 13px;
}
.footer {
padding: 26px 56px 40px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
line-height: 1.8;
background: rgba(235, 225, 210, 0.4);
}
@media (max-width: 960px) {
.sheet {
width: min(100vw - 24px, 100%);
margin: 12px auto 28px;
border-radius: 22px;
}
.hero,
.body,
.footer {
padding-left: 20px;
padding-right: 20px;
}
.grid-2,
.grid-3,
.snapshot-grid {
grid-template-columns: 1fr;
}
}
@media print {
html {
background: white;
}
.sheet {
width: 100%;
margin: 0;
box-shadow: none;
border: 0;
background: white;
}
.hero::after {
display: none;
}
}
.editor-hint {
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid rgba(189, 38, 27, 0.16);
background: rgba(248, 243, 236, 0.92);
backdrop-filter: blur(10px);
color: #7a241d;
padding: 10px 16px;
font-size: 13px;
line-height: 1.6;
}
.placeholder {
border-bottom: 1px dashed rgba(189, 38, 27, 0.45);
color: #7a241d;
background: rgba(189, 38, 27, 0.06);
border-radius: 6px;
padding: 0 6px;
}
.placeholder-block {
border: 1px dashed rgba(189, 38, 27, 0.35);
background: rgba(189, 38, 27, 0.04);
color: #7a241d;
border-radius: 14px;
padding: 14px 16px;
margin: 12px 0;
line-height: 1.9;
}
.placeholder-img {
min-height: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px 16px;
background: rgba(189, 38, 27, 0.035);
color: #7a241d;
text-align: center;
}
.placeholder-img::before {
content: "🖼️";
font-size: 30px;
margin-bottom: 10px;
opacity: 0.8;
}
@media print {
.editor-hint {
display: none;
}
}
</style>
</head>
<body>
<div class="editor-hint">
使用说明：本模板保留了原版 <span class="placeholder">trae-tech-stack-post.html</span> 的全部风格与版式，仅把正文替换为通用占位提示。请在源码中替换截图链接或把占位块改成 <span class="placeholder"><img src="..." /></span>。
</div>
<article class="sheet">
<header class="hero">
<p class="eyebrow"><span class="placeholder">[副标题 / 文章归类 / 标签]</span></p>
<h1><span class="placeholder">[主标题：用一句话讲清项目与亮点]</span></h1>
<p class="lead">
<span class="placeholder">[摘要：3–5 句，说明项目目标、做到了什么、为什么值得看]</span>
</p>
<div class="meta">
<span class="meta-chip"><span class="placeholder">[项目形态：如 Web 3D 工作台]</span></span>
<span class="meta-chip"><span class="placeholder">[核心交互：如 设计 / 编辑 / 演示]</span></span>
<span class="meta-chip"><span class="placeholder">[表现重点：如 真实质感 / 性能 / 稳定性]</span></span>
<span class="meta-chip"><span class="placeholder">[内容形式：如 复盘 / 教程 / Demo]</span></span>
</div>
</header>
<div class="body">
<section class="section">
<h2 class="section-title"><span class="placeholder">一、项目定位</span></h2>
<div class="placeholder-block">
[填写：项目要解决的问题、目标用户、使用场景、核心约束（例如：必须开箱即用 / 不依赖后端 / 强交互体验）]
</div>
<div class="quote">
<span class="placeholder">[一句“金句”：用一句话总结这类项目真正难点在哪]</span>
</div>
</section>
<section class="section">
<h2 class="section-title"><span class="placeholder">二、技术栈总览</span></h2>
<div class="stack-list">
<span class="stack-chip"><span class="placeholder">[框架]</span></span>
<span class="stack-chip"><span class="placeholder">[工程化]</span></span>
<span class="stack-chip"><span class="placeholder">[渲染/图形]</span></span>
<span class="stack-chip"><span class="placeholder">[状态管理]</span></span>
<span class="stack-chip"><span class="placeholder">[算法/求解]</span></span>
<span class="stack-chip"><span class="placeholder">[存储/部署]</span></span>
</div>
<div class="grid-2">
<div class="panel">
<h3><span class="placeholder">[模块一名称]</span></h3>
<p><span class="placeholder">[填写：选型理由、替代方案比较、关键收益]</span></p>
</div>
<div class="panel">
<h3><span class="placeholder">[模块二名称]</span></h3>
<p><span class="placeholder">[填写：选型理由、替代方案比较、关键收益]</span></p>
</div>
<div class="panel">
<h3><span class="placeholder">[模块三名称]</span></h3>
<p><span class="placeholder">[填写：选型理由、替代方案比较、关键收益]</span></p>
</div>
<div class="panel">
<h3><span class="placeholder">[模块四名称]</span></h3>
<p><span class="placeholder">[填写：选型理由、替代方案比较、关键收益]</span></p>
</div>
</div>
</section>
<section class="section">
<h2 class="section-title"><span class="placeholder">三、为什么这样拆架构</span></h2>
<div class="placeholder-block">
[填写：架构图/数据流的文字版解释：输入 → 状态 → 渲染 → 输出。强调为什么这样拆能让系统更稳、更好迭代。]
</div>
<ul>
<li><span class="placeholder">[收益 1：例如更稳定 / 更易测试 / 更高性能]</span></li>
<li><span class="placeholder">[收益 2：例如避免某类天然不稳定的路径]</span></li>
<li><span class="placeholder">[收益 3：例如可扩展到更多玩法/模板/插件]</span></li>
</ul>
</section>
<section class="section">
<h2 class="section-title"><span class="placeholder">四、页面截图</span></h2>
<div class="snapshot-grid">
<figure class="shot">
<div class="placeholder-img">
[插图 1：请替换为真实截图]<br />
建议：整体概览（首页 / 主入口 / 工作台全景）
</div>
<figcaption><span class="placeholder">[图注：这张图想证明什么？读者该看哪里？]</span></figcaption>
</figure>
<figure class="shot">
<div class="placeholder-img">
[插图 2：请替换为真实截图]<br />
建议：核心页面（主功能界面 / 关键 UI 组件）
</div>
<figcaption><span class="placeholder">[图注：核心交互点与设计意图]</span></figcaption>
</figure>
<figure class="shot">
<div class="placeholder-img">
[插图 3：请替换为真实截图]<br />
建议：关键流程状态（编辑中 / 执行中 / 结果态）
</div>
<figcaption><span class="placeholder">[图注：展示“流程完整性”或“系统稳定性”]</span></figcaption>
</figure>
<figure class="shot">
<div class="placeholder-img">
[插图 4：请替换为真实截图]<br />
建议：最终结果或亮点特写（质感/性能/对比）
</div>
<figcaption><span class="placeholder">[图注：最终效果与可复用经验]</span></figcaption>
</figure>
</div>
</section>
<section class="section">
<h2 class="section-title"><span class="placeholder">五、关键实现（可选）</span></h2>
<div class="grid-3">
<div class="panel">
<h3><span class="placeholder">[关键点 1]</span></h3>
<p><span class="placeholder">[填写：做法 + 为什么这么做 + 带来的好处]</span></p>
</div>
<div class="panel">
<h3><span class="placeholder">[关键点 2]</span></h3>
<p><span class="placeholder">[填写：做法 + 为什么这么做 + 带来的好处]</span></p>
</div>
<div class="panel">
<h3><span class="placeholder">[关键点 3]</span></h3>
<p><span class="placeholder">[填写：做法 + 为什么这么做 + 带来的好处]</span></p>
</div>
</div>
<p><span class="placeholder">[补充：用 1–2 段说明“整体质感/稳定性/性能”是如何被系统性做出来的]</span></p>
</section>
<section class="section">
<h2 class="section-title"><span class="placeholder">六、工程化细节（可选）</span></h2>
<ul>
<li><span class="placeholder">[可复用点 1：例如保存恢复、离线策略、回归用例]</span></li>
<li><span class="placeholder">[可复用点 2：例如监控/日志/性能采样]</span></li>
<li><span class="placeholder">[可复用点 3：例如自动化截图/文档生成]</span></li>
</ul>
</section>
<section class="section">
<h2 class="section-title"><span class="placeholder">七、阶段性结论</span></h2>
<div class="placeholder-block">
[填写：阶段成果、当前限制、下一步计划（不要过于特化到某个 bug 名称，写“能力维度”的计划更通用）]
</div>
<p class="footnote"><span class="placeholder">[附注：仓库地址/演示链接/致谢等]</span></p>
</section>
</div>
<footer class="footer">
文档说明：本页为“原版皮肤”的通用技术复盘填空模板。请替换所有 <span class="placeholder">[占位符]</span> 并插入您自己的高清截图-通过浏览器截取项目，浏览器打开方式：准备环境，并按照：
lsof -nP -iTCP:5173 -sTCP:LISTEN || true（确保启动前确实没占用）
lsof -nP -iTCP:5174 -sTCP:LISTEN || true
pnpm install
pnpm exec vite --version
pnpm run dev -- --host 0.0.0.0 --port 5173：
进行执行打开网页尝试截图关键部分-这段制作完后不要出现在最终产物。
</footer>
</article>
</body>
</html>
四、动态视频封页提示词。
【你现在是我的前端落地与视频接入工程代理，不要讲思路，不要写空话，直接产出可运行结果。
目标：
用一个本地 mp4 剪纸视频，做一个“高端、克制、东方感、适合品牌门面”的首页首屏。
最终效果不是普通视频播放器页面，而是“品牌官网首页 hero section”。
你要完成的任务：
1. 产出一个可直接运行的静态页面方案，使用 HTML + CSS + 少量原生 JS。
2. 自动播放本地 mp4 作为首屏背景视频。
3. 页面要适合后续接品牌名、slogan、按钮。
4. 风格必须服务于“中式剪纸高端官网”，不是婚庆，不是大红大紫电商页，不是廉价国潮。
5. 优先做简洁、稳定、可上线感强的版本，不要做花里胡哨的实验性页面。
项目设定：
- 页面类型：品牌门面首页首屏
- 视频素材：本地 mp4
- 视频风格：中式剪纸、层次丰富、适合循环播放
- 页面比例优先考虑桌面端 16:9 首屏，同时兼容移动端
- 页面语言：中文
- 技术限制：不要 React，不要 Vue，不要打包器，不要依赖框架，直接原生 HTML/CSS/JS
- 输出代码必须能本地直接打开预览
- 文件结构尽量简单清晰
你必须生成：
- index.html
- style.css
- script.js
如有必要，可补一个 assets 使用说明，但不要啰嗦。
页面视觉要求：
1. 视频全屏铺满首屏，使用 background-video 方案，不要出现播放器控件。
2. 视频必须：
- autoplay
- muted
- loop
- playsinline
- preload 合理
3. 视频铺满方式要优先保证画面高级感，使用 object-fit: cover。
4. 页面上方加一层非常克制的暗色或暖色遮罩，让文字可读，同时不要毁掉剪纸细节。
5. 页面中上偏左预留一块干净区域作为主文案区，视觉上要呼应剪纸视频里的留白。
6. 文案区默认放：
- 一个品牌标题占位
- 一行副标题占位
- 两个按钮占位
7. 文案排版要简洁，字重、间距、大小层次清楚，像高端设计网站，不要营销味。
8. 右下或底部可以有极弱的滚动提示，但必须克制。
交互要求：
1. 首屏加载时不要突兀闪白。
2. 页面进入时可以有非常轻的淡入动画，但不能抢视频风头。
3. 按钮 hover 要克制、顺滑、高级。
4. 页面滚动后首屏仍然要稳定，不要出现错位、抖动、闪烁。
5. 兼容 prefers-reduced-motion：若用户偏好减少动画，要降低动画和视频冲击。
工程要求：
1. 代码结构清晰，类名语义化。
2. 注释只写必要部分，不要满屏注释。
3. 不要堆砌无意义 div。
4. 要考虑移动端：
- 小屏下文案区自动收紧
- 视频仍保持视觉中心
- 按钮不要挤爆
5. 处理浏览器自动播放策略，确保 muted 生效。
6. 提供 poster/fallback 思路：
- 若视频加载失败，页面仍保持高级感，不至于塌掉
7. 避免 z-index 混乱。
8. 不要引入任何第三方字体，优先系统字体方案。
视觉关键词：
- 高端
- 安静
- 东方
- 克制
- 纸张层次
- 留白
- 品牌官网
- 轻奢
- 现代 editorial 感
- 不是传统节庆海报
- 不是廉价中国红
明确禁止：
- 不要做成视频播放器页
- 不要出现播放按钮、进度条、控制条
- 不要加入过多滚动特效
- 不要加入粒子爆炸、金光乱闪、浮夸国潮动画
- 不要加多段轮播
- 不要做复杂导航
- 不要写成模板站通用风
- 不要使用玻璃拟态大面积覆盖视频
- 不要过度渐变，不要脏兮兮滤镜，不要赛博中国风
- 不要为了“设计感”牺牲可读性和上线感
默认文案占位可先写为：
标题：东方剪纸新生
副标题：让传统工艺的层次，在数字界面中安静展开。
按钮1：进入设计
按钮2：了解作品
本地视频接入要求：
- 假设视频文件路径为 ./assets/papercut-hero.mp4
- 如果你认为还需要 poster，占位图路径可写 ./assets/papercut-poster.jpg
- HTML 中直接接入，不要假设远程 CDN
- 视频首帧尽量自然，不要让页面一打开就黑一秒
输出要求：
1. 直接给完整代码，不要先分析。
2. 先给文件树。
3. 再分别给 index.html / style.css / script.js 完整内容。
4. 代码必须互相对应，类名不能乱。
5. 最后补一个“如何替换本地视频文件”的极简说明，控制在 5 行内。
附加优化：
如果你判断首页只做首屏还不够完整，可以在首屏下方追加一个极简的第二屏预告区，但必须非常轻，不可喧宾夺主。】+[你现在还是我的视频资产处理代理，配合上面的首页代码一起工作。你的任务不是生成视频内容，而是把“剪纸首页背景视频”处理成适合网页落地的资产规范，并给出实际可执行的处理建议。
目标：
让本地 mp4 更适合做高端首页背景视频，减少卡顿、首屏黑屏、体积过大、循环突兀、移动端兼容差的问题。
你要完成：
1. 给出适合网页首屏背景视频的推荐规格。
2. 给出压缩、裁切、首帧、循环处理建议。
3. 优先保证“观感高级 + 浏览器稳定 + 体积合理”。
要求你输出的内容必须包括：
- 推荐分辨率
- 推荐码率范围
- 推荐时长
- 是否保留音频
- 推荐编码格式
- poster 图建议
- 循环处理建议
- 移动端兼容建议
- 文件命名规范
你必须遵守的网页视频原则：
1. 首页背景视频优先“短、稳、轻”，不要过长。
2. 时长控制在 5-8 秒最优，我当前目标是 6 秒。
3. 必须静音。
4. 循环衔接不能突兀，首尾最好视觉连续。
5. 不能一上来纯黑或纯白首帧。
6. 视频主体不要太满，要给文字留空间。
7. 优先考虑 H.264 mp4 兼容性。
8. 文件体积要尽量控制，避免桌面端和移动端都很重。
建议方向：
- 桌面端主视频建议一版
- 移动端可额外建议一版更轻量版本
- poster 图要与视频首屏气质一致
- 若视频过艳、过亮、过满，建议通过压暗、裁切、降对比来服务网页排版
禁止：
- 不要泛泛而谈
- 不要只讲原理
- 不要输出一堆无落地参数的废话
- 不要把视频处理成电影预告片思路
- 不要强调声音设计，因为这是首页背景视频
请直接按“推荐方案”输出，最好像交给设计师和前端都能看懂的资产规范。]+
+视频MP4
五、手机似乎不行
附1个：脑暴助手prompt
你现在是我的“项目脑暴整理助手”。
我们将进行一个多阶段脑暴任务，可能持续 10-20 轮对话。
你的职责不是直接写代码，而是持续整理和维护一份“累计清单”。
你的核心目标：
1. 从我的每一轮输入中，提取所有明确需求。
2. 根据语义补充隐含需求，但必须标记为“隐含需求/待确认”。
3. 识别完成这些需求所涉及的知识点、技术领域、实现方向。
4. 针对每个知识点，判断是否有对应的 agent skill 可用。
5. 优先给出“搜索 skill 的建议”，再给出“可安装的 skill”。
6. 每一轮都要输出“本轮新增”与“当前累计”，不能丢失之前内容。
输出要求：
1. 所有内容都必须使用 `-` 开头，单条输出。
2. 每一条只表达一个信息点，不要把多个点写在同一条。
3. 不使用表格。
4. 不写大段解释，尽量短句、清晰、可执行。
5. 不要省略用户原始意图，要把口语需求转成清晰需求。
6. 对不确定的信息，统一标记为：
- 待确认：xxx
7. 对推断出来但用户没明说的内容，统一标记为：
- 隐含需求：xxx
每轮固定输出结构：
- 本轮新增需求：...
- 本轮新增需求：...
- 本轮隐含需求：...
- 本轮待确认：...
- 本轮涉及知识点：...
- 本轮涉及知识点：...
- 本轮可搜索 Skill：...
- 本轮 Skill 搜索命令：...
- 本轮可安装 Skill：...
- 本轮 Skill 安装命令：...
- 当前累计需求：...
- 当前累计需求：...
- 当前累计知识点：...
- 当前累计知识点：...
- 当前累计 Skill：...
Skill 处理规则：
1. 当需求刚出现时，优先先输出“可搜索 Skill”和“搜索命令”。
2. 只有在较确定匹配到具体 skill 时，再输出“可安装 Skill”和“安装命令”。
3. 搜索 skill 时，优先把关键词拆成多个技术方向，而不是只搜用户原话。
4. 如果一个需求涉及多个方向，要拆开分别列出，例如：
- 前端界面
- 图形渲染
- 物理模拟
- 动画系统
- 后端认证
5. 如果暂时没有精准 skill，就输出：
- 本轮可搜索 Skill：暂未确定精准 skill，建议继续按方向搜索
- 本轮 Skill 搜索命令：npx skills find ...
需求拆解规则：
1. 把需求拆成以下几个维度：
- 功能需求
- 交互需求
- 视觉需求
- 技术需求
- 工程需求
2. 只要用户提到“真实感、摩擦力、折叠、不平整、材质感、物理效果”，优先联想到：
- 图形学
- 物理模拟
- 材质与光照
- 几何变形
- 动画与交互反馈
3. 只要用户提到“登录、账户、权限、保存、云端”，优先联想到：
- 后端
- 数据库
- 用户认证
- API 设计
4. 只要用户提到“首页简洁、风格高级、视觉统一”，优先联想到：
- UI 设计
- UX 设计
- 前端实现
- 设计系统
从现在开始，我每发一轮需求，你都按这个格式继续累计，不要重置。
群友好可怕