讨论

单文件HTML视频展示片生成器

来自 Wikiprompt,自由的提示词百科全书

Eyisha Zyer

2026年7月3日

单文件HTML视频展示片生成器 一个全面的提示,用于在单个HTML文件中构建视频展示片生成器,涵盖故事板、脚本、视觉序列、音频指导和制作检查表功能,并支持数据持久化。

提示词内容收藏

🌐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Showreel Studio · generator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root { --bg: #f4f6fb; --surface: #ffffff; --text: #1e1f2a; --muted: #5b5e6e; --border: #e2e4ee; --accent: #4f46e5; --accent-soft: #eef2ff; --shadow: 0 8px 20px rgba(0, 0, 0, 0.03); --radius: 20px; --chip-bg: #f0f2f8; } body.dark { --bg: #0f1117; --surface: #1a1d27; --text: #f0f2ff; --muted: #a6adc2; --border: #2d3242; --accent: #818cf8; --accent-soft: #232740; --shadow: 0 8px 20px rgba(0, 0, 0, 0.4); --chip-bg: #262b3a; } body { background: var(--bg); color: var(--text); transition: background 0.2s, color 0.2s; padding: 24px 20px 60px; line-height: 1.5; } .app { max-width: 1300px; margin: 0 auto; } .topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; } .logo { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; } .logo span { background: var(--accent); color: white; padding: 4px 12px; border-radius: 40px; font-size: 0.8rem; font-weight: 600; } .controls { display: flex; gap: 12px; flex-wrap: wrap; } .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 40px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow); } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn.primary { background: var(--accent); border: none; color: white; } .btn.primary:hover { opacity: 0.9; color: white; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; } .card { background: var(--surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: 0.2s; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-header h3 { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .badge { background: var(--accent-soft); color: var(--accent); padding: 2px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: 600; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-bottom: 4px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; outline: none; transition: 0.2s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row .field { flex: 1; min-width: 120px; } .scene-item { background: var(--bg); border-radius: 16px; padding: 14px; margin-bottom: 12px; border-left: 4px solid var(--accent); } .scene-item .scene-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .scene-item .shot-type { font-weight: 600; font-size: 0.8rem; background: var(--accent-soft); padding: 2px 10px; border-radius: 30px; } .scene-item p { font-size: 0.9rem; color: var(--muted); } .scene-item .duration { font-weight: 500; color: var(--text); font-size: 0.8rem; } .placeholder-img { background: linear-gradient(135deg, #c7d2fe, #a5b4fc); height: 70px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #1e1b4b; font-size: 0.8rem; font-weight: 500; margin: 8px 0; } .audio-chip { background: var(--chip-bg); padding: 6px 12px; border-radius: 30px; font-size: 0.8rem; display: inline-block; margin: 4px 4px 0 0; } .checklist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .checklist-item input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; } .export-block { background: var(--bg); border-radius: 16px; padding: 16px; margin-top: 16px; font-size: 0.9rem; } .export-block pre { white-space: pre-wrap; font-family: 'SF Mono', monospace; font-size: 0.8rem; max-height: 200px; overflow-y: auto; } .color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0,0,0,0.1); } .flex-between { display: flex; justify-content: space-between; align-items: center; } .mt-2 { margin-top: 12px; } .accent-color-input { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: transparent; cursor: pointer; } .placeholder-img { background: var(--chip-bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; border-radius: 12px; height: 60px; border: 1px dashed var(--border); } </style> </head> <body> <div class="app"> <div class="topbar"> <div class="logo">🎬 Showreel <span>generator</span></div> <div class="controls"> <button class="btn" id="themeToggle">🌙 dark</button> <button class="btn" id="exportJson">⬇️ export JSON</button> <button class="btn" id="importJson">📂 import</button> <input type="file" id="importFile" accept=".json" style="display:none"> <button class="btn primary" id="generateAll">✨ regenerate all</button> </div> </div> <!-- brief + templates --> <div class="grid"> <div class="card"> <div class="card-header"><h3>📋 project brief</h3><span class="badge">editable</span></div> <div class="field"><label>project name</label><input id="projectName" value="Aurora launch"></div> <div class="row"> <div class="field"><label>length</label><select id="videoLength"><option>15s</option><option selected>30s</option><option>60s+</option></select></div> <div class="field"><label>tone</label><select id="toneSelect"><option>Professional</option><option>Casual</option><option selected>Dramatic</option><option>Educational</option></select></div> </div> <div class="field"><label>target audience</label><input id="audience" value="creators & marketers"></div> <div class="field"><label>key message</label><textarea id="keyMessage" rows="2">bold innovation meets simplicity</textarea></div> <div class="field"><label>style refs</label><input id="styleRefs" value="neon, motion blur, high contrast"></div> <div class="row mt-2"> <button class="btn" id="templateProduct">🚀 product</button> <button class="btn" id="templatePortfolio">🎨 portfolio</button> <button class="btn" id="templatePromo">📣 promo</button> <button class="btn" id="templateEdu">🎓 edu</button> </div> </div> <!-- storyboard --> <div class="card"> <div class="card-header"><h3>🎞️ storyboard</h3><button class="btn small" id="editStoryboard">✎ edit</button></div> <div id="storyboardContainer"></div> <button class="btn small mt-2" id="exportStoryboard">⬇️ export storyboard</button> </div> <!-- script --> <div class="card"> <div class="card-header"><h3>📝 script</h3><span class="badge">auto</span></div> <div class="row"> <div class="field"><label>length</label><select id="scriptLength"><option>15s</option><option selected>30s</option><option>60s+</option></select></div> <div class="field"><label>tone</label><select id="scriptTone"><option>Professional</option><option>Casual</option><option selected>Dramatic</option><option>Humorous</option></select></div> <div class="field"><label>voice</label><select id="voiceSelect"><option>Male</option><option selected>Female</option><option>Neutral</option></select></div> </div> <div id="scriptOutput" class="export-block" style="white-space: pre-line; min-height: 80px;"></div> <button class="btn small mt-2" id="exportScript">📄 export script</button> </div> </div> <!-- visual sequence + audio --> <div class="grid"> <div class="card"> <div class="card-header"><h3>🌈 visual sequence</h3><button class="btn small" id="customizeVisuals">🎛️ customize</button></div> <div id="visualSequence"></div> </div> <div class="card"> <div class="card-header"><h3>🎧 audio direction</h3><span class="badge">auto</span></div> <div class="field"><label>music mood</label><select id="musicMood"><option>Upbeat</option><option selected>Cinematic</option><option>Relaxed</option><option>Dramatic</option></select></div> <div class="row"> <div class="field"><label>voiceover</label><select id="voStyle"><option>Warm</option><option selected>Deep</option><option>Bright</option></select></div> <div class="field"><label>balance</label><select id="balance"><option>VO +6dB</option><option selected>VO +3dB</option><option>Music +3dB</option></select></div> </div> <div id="audioNotes" class="export-block mt-2"></div> <button class="btn small mt-2" id="exportAudio">📋 export notes</button> </div> </div> <!-- checklist + final output --> <div class="grid"> <div class="card"> <div class="card-header"><h3>✅ production checklist</h3><button class="btn small" id="addChecklistItem">+ add</button></div> <div id="checklistContainer"></div> <button class="btn small mt-2" id="exportChecklist">📋 export checklist</button> </div> <div class="card"> <div class="card-header"><h3>📦 final output</h3><span class="badge">preview</span></div> <div id="finalPreview" class="export-block"></div> <div class="row mt-2"> <button class="btn" id="exportFullReport">📄 full report</button> <button class="btn" id="copyLink">🔗 copy share link</button> </div> </div> </div> </div> <script> (function() { // ---------- state ---------- let state = { brief: { projectName: 'Aurora launch', videoLength: '30s', tone: 'Dramatic', audience: 'creative & marketers', keyMessage: 'innovation meets simplicity', styleRefs: 'neon, cinematic, high contrast' }, storyboard: [], script: '', visualSeq: [], audio: { music: 'Cinematic', vo: 'Deep', balance: 'VO +3dB' }, checklist: ['camera setup', 'lighting kit', 'mic + recorder', 'talent release'], completed: [false, false, false, false] }; // ---------- dom refs ---------- const $ = id => document.getElementById(id); const storyboardDiv = $('storyboardContainer'); const scriptOut = $('scriptOutput'); const visualDiv = $('visualSequence'); const audioNotesDiv = $('audioNotes'); const checklistDiv = $('checklistContainer'); const finalPreview = $('finalPreview'); // ---------- helpers ---------- function generateStoryboard() { const tone = $('toneSelect')?.value || state.brief.tone; const scenes = []; const shots = ['Wide', 'Medium', 'Close-up']; const desc = ['establishing shot with neon accents', 'subject enters frame, dramatic light', 'detail macro, texture', 'wide silhouette', 'medium action', 'close-up emotion']; const overlays = ['TITLE: "AURORA"', 'text: "the future"', 'graphic: pulse', 'text: "launch"', 'logo reveal', 'CTA: "learn more"']; for (let i=0; i<5; i++) { scenes.push({ shot: shots[i % 3], desc: desc[i % desc.length] + ' ' + (state.brief.styleRefs || ''), overlay: overlays[i % overlays.length], duration: i===0? '4s' : (i===4?'6s':'3s' }); } state.storyboard = scenes; renderStoryboard(); } function renderStoryboard() { const scenes = state.storyboard || []; let html = ''; scenes.forEach((s, idx) => { html += `<div class="scene-item"> <div class="scene-top"><span class="shot-type">${s.shot}</span><span class="duration">${s.duration}</span></div> <p>${s.visual}</p> <div class="placeholder-img">🎬 ref: ${s.overlay}</div> </div>`; }); projectDiv.innerHTML = html || '<p>no scenes</p>'; } function generateScript() { const len = $('scriptLength').value; const tone = $('scriptTone').value; const voice = $('voiceSelect').value; let hook = ''; if (tone === 'Dramatic') hook = 'In a world where silence speaks...'; else if (tone === 'Professional') hook = 'Introducing the next standard.'; else hook = 'Hey, this changes everything.'; const body = 'We built this for creators. Simple, powerful, unforgettable.'; const cta = 'Join the movement.'; state.script = `${hook}\n\n${body}\n\n${cta}\n\n[voice: ${voice}]`; scriptOut.textContent = state.script; } function generateVisualSeq() { const palettes = ['#0f172a', '#3b82f6', '#f59e0b', '#ef4444']; const visuals = [ { scene: '1', visual: 'abstract neon waves', palette: ['#0f172a', '#3b82f6', '#f59e0b'], overlay: 'logo animation' }, { scene: '2', visual: 'product macro', palette: ['#111827', '#6b7280', '#fbbf24'], overlay: 'text: "new"' }, { scene: '3', visual: 'human hands typing', palette: ['#1e293b', '#818cf8', '#f472b6'], overlay: 'ui mockup' }, { scene: '4', visual: 'city timelapse', palette: ['#0f172a', '#38bdf8', '#facc15'], overlay: 'speed lines' }, { scene: '5', visual: 'abstract gradient', palette: ['#4c1d95', '#db2777', '#fcd34d'], overlay: 'end card' } ]; state.visualSeq = visuals; let html = ''; visuals.forEach(v => { html += `<div class="scene-item"> <div class="flex-between"><span class="shot-type">${v.scene}</span><span>🎬</span></div> <p>${v.visual}</p> <div>${v.color.map(c => `<span class="color-dot" style="background:${c}"></span>`).join('')}</div> <div class="placeholder-img">overlay: ${v.overlay}</div> </div>`; }); visualDiv.innerHTML = html; } function renderAudio() { const mood = $('musicMood').value; const vo = $('voStyle').value; const bal = $('balance').value; state.audio = { music: mood, vo, balance: bal }; audioNotesDiv.innerHTML = `🎵 music: <b>${mood}</b> · SFX: subtle risers<br>🎙 voiceover: <b>${vo}</b> · balance: ${bal}`; } function renderChecklist() { let html = ''; state.checklist.forEach((item, i) => { html += `<div class="checklist-item"> <input type="checkbox" ${state.completed[i] ? 'checked' : ''} data-index="${i}"> <span>${item}</span> </div>`; }); checklistDiv.innerHTML = html; document.querySelectorAll('#checklistContainer input[type=checkbox]').forEach(cb => { cb.addEventListener('change', e => { const idx = e.target.dataset.index; state.completed[idx] = e.target.checked; }); }); } function renderFinal() { finalPreview.innerHTML = ` <b>${state.brief.projectName}</b> · ${state.brief.videoLength} · ${state.brief.tone}<br> 🎞️ ${state.storyboard.length} scenes · 📝 script ready · 🌈 visual plan<br> 🎧 music: ${state.audio.music} · balance: ${state.audio.balance}<br> ✅ checklist: ${state.checklist.filter((_,i)=>state.completed[i]).length}/${state.checklist.length} done `; } function refreshAll() { // sync brief inputs state.brief.projectName = $('projectName').value; state.brief.videoLength = $('videoLength').value; state.brief.tone = $('toneSelect').value; state.brief.target = $('audience').value; state.brief.keyMessage = $('keyMessage').value; state.brief.styleRefs = $('styleRefs').value; generateStoryboard(); generateScript(); renderVisualSeq(); renderAudio(); renderChecklist(); renderFinalPreview(); } // ---------- event listeners ---------- $('generateAll').addEventListener('click', refreshAll); // template buttons $('templateProduct').addEventListener('click', () => { $('projectName').value = 'Product launch'; $('toneSelect').value = 'Professional'; $('keyMessage').value = 'built for performance'; $('styleRefs').value = 'studio, clean, minimal'; refreshAll(); }); $('templatePortfolio').addEventListener('click', () => { $('projectName').value = 'Portfolio 2025'; $('toneSelect').value = 'Dramatic'; $('keyMessage').value = 'creative vision'; $('styleRefs').value = 'art, bold, color'; refreshAll(); }); $('templatePromo').addEventListener('click', () => { $('projectName').value = 'Promo drop'; $('toneSelect').value = 'Casual'; $('keyMessage').value = 'don’t miss out'; $('styleRefs').value = 'street, urban'; refreshAll(); }); $('templateEdu').addEventListener('click', () => { $('projectName').value = 'Learn fast'; $('toneSelect').value = 'Educational'; $('keyMessage').value = 'simplify complex'; $('styleRefs').value = 'diagrams, friendly'; refreshAll(); }); // storyboard edit (regenerate) $('regenerateStoryboard').addEventListener('click', () => { generateStoryboard(); }); // script export $('exportScript').addEventListener('click', () => { const blob = new Blob([state.script], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'script.txt'; a.click(); }); // export storyboard $('exportStoryboard').addEventListener('click', () => { const text = state.storyboard.map(s => `${s.shot} | ${s.visual} | ${s.duration} | ${s.overlay}`).join('\n'); const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'storyboard.txt'; a.click(); }); // export audio $('exportAudio').addEventListener('click', () => { const text = `music: ${state.audio.music}\nVO: ${state.audio.vo}\nbalance: ${state.audio.balance}\nSFX: risers, whoosh`; const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'audio-direction.txt'; a.click(); }); // checklist add $('addChecklistItem').addEventListener('click', () => { const item = prompt('new checklist item'); if (item) { state.checklist.push(item); state.completed.push(false); renderChecklist(); renderFinalPreview(); } }); // export checklist $('exportChecklist').addEventListener('click', () => { const text = state.checklist.map((c,i) => `${state.completed[i] ? '[x]' : '[ ]'} ${c}`).join('\n'); const blob = new Blob([text], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'checklist.txt'; a.click(); }); // export full report $('exportFullReport').addEventListener('click', () => { const report = `SHOWREEL REPORT\n${state.brief.projectName}\n${state.brief.videoLength} | ${state.brief.tone}\n\nSTORYBOARD:\n${state.storyboard.map(s=>`- ${s.shot} ${s.duration}: ${s.visual}`).join('\n')}\n\nSCRIPT:\n${state.script}\n\nVISUAL PLAN:\n${state.visualSeq.map(v=>`- ${v.scene}: ${v.visual}`).join('\n')}\n\nAUDIO: ${state.audio.music} / ${state.audio.vo} / ${state.audio.balance}\n\nCHECKLIST:\n${state.checklist.map((c,i)=>`${state.completed[i]?'[x]':'[ ]'} ${c}`).join('\n')}`; const blob = new Blob([report], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'showreel-report.txt'; a.click(); }); // copy link (simulate) $('copyLink').addEventListener('click', () => { navigator.clipboard.writeText(`https://showreel.local/${state.brief.projectName.replace(/\s/g,'-')}`).then(() => alert('share link copied')); }); // export JSON $('exportJson').addEventListener('click', () => { const blob = new Blob([JSON.stringify(state, null, 2)], {type: 'application/json'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'showreel-project.json'; a.click(); }); // import JSON $('importJson').addEventListener('click', () => $('importFile').click()); $('importFile').addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { try { const imported = JSON.parse(ev.target.result); state = { ...state, ...imported }; // sync inputs $('projectName').value = state.brief.projectName; $('videoLength').value = state.brief.videoLength; $('toneSelect').value = state.brief.tone; $('audience').value = state.brief.targetAudience; $('keyMessage').value = state.brief.keyMessage; $('styleRefs').value = state.brief.styleRefs; refreshAll(); } catch { alert('invalid JSON'); } }; reader.readAsText(file); }); // dark mode $('themeToggle').addEventListener('click', () => { document.body.classList.toggle('dark'); $('themeToggle').textContent = document.body.classList.contains('dark') ? '☀️ light' : '🌙 dark'; }); // accent color customization (simple) const accentInput = document.createElement('input'); accentInput.type = 'color'; accentInput.value = '#4f46e5'; accentInput.className = 'accent-color-input'; accentInput.style.marginLeft = '8px'; document.querySelector('.controls').appendChild(accentInput); accentInput.addEventListener('input', (e) => { document.documentElement.style.setProperty('--accent', e.target.value); }); // customize visuals (just regenerate) $('customizeVisual').addEventListener('click', () => { renderVisualSeq(); }); // initial (function init() { // set brief defaults state.brief = { projectName: 'Aurora launch', videoLength: '30s', tone: 'Dramatic', targetAudience: 'creative & marketers', keyMessage: 'innovation meets simplicity', styleRefs: 'neon, cinematic, high contrast' }; $('projectName').value = state.brief.projectName; $('videoLength').value = state.brief.videoLength; $('toneSelect').value = state.brief.tone; $('audience').value = state.brief.targetAudience; $('keyMessage').value = state.brief.keyMessage; $('styleRefs').value = state.brief.styleRefs; refreshAll(); })(); // manual edit for storyboard (simple) $('regenerateStoryboard').addEventListener('click', () => { generateStoryboard(); }); // ensure storyboard container exists function generateStoryboard() { const scenes = []; const shots = ['Wide', 'Medium', 'Close-up', 'Wide', 'Medium']; const visuals = ['city skyline', 'product on pedestal', 'eye macro', 'silhouette', 'hand interaction']; const overlays = ['"AURORA"', '"launch"', '"feel"', '"future"', '"CTA"']; for (let i=0;i<5;i++) { scenes.push({ shot: shots[i], visual: `${visuals[i]} · ${state.brief.styleRefs}`, overlay: overlays[i], duration: i===0?'8s':i===4?'6s':'3s' }); } state.storyboard = scenes; renderStoryboard(); } function renderStoryboard() { let html = ''; state.storyboard.forEach(s => { html += `<div class="scene-item"> <div class="scene-top"><span class="shot-type">${s.shot}</span><span class="duration">${s.duration}</span></div> <p>${s.visual}</p> <div class="placeholder-img">🎬 ${s.overlay}</div> </div>`; }); $('storyboardContainer').innerHTML = html; } // sync audio on change ['musicMood','voStyle','balance'].forEach(id => { $(id).addEventListener('change', () => { renderAudio(); renderFinalPreview(); }); }); // script change ['scriptLength','scriptTone','voiceSelect'].forEach(id => { $(id).addEventListener('change', () => { generateScript(); renderFinalPreview(); }); }); // brief change ['projectName','videoLength','toneSelect','audience','keyMessage','styleRefs'].forEach(id => { $(id).addEventListener('change', () => { refreshAll(); }); }); // final init refreshAll(); })(); </script> </body> </html>

登录以查看完整提示词

继续使用:

登录即表示你同意我们的 使用条款 和 隐私政策

用法

此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。

为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。

参考资料

分类:coding| twitter| video-showreel| html-css-javascript

讨论