介绍
一个完整的单文件页面，从这里起步。结构、文案位和响应式都已排好，复制提示词交给模型，它会按你的品牌改写文案、配色和图片。
适用场景
图片、视频等 AI 生成平台的首页：创作输入框、作品展示和模型介绍。
安装
订阅 Builder 后，用 8pt CLI 取回整页源码，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt template ai-video-studio
mcp › 使用 8pt MCP 调用 get_template("ai-video-studio")
代码
单文件 HTML + CSS，无构建步骤。
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><title>燃帧 — AI 视频创作平台首页模板</title>
<style>
:root{--bg:#000;--bg2:#070505;--pn:#0B0807;--ink:#fff;--mu:#A3A0A6;--fa:#6E6B72;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--or:#FF5A1F;--or2:#FF8A3D;--or3:#C8360E;--gold:#FFB547;--ease:cubic-bezier(.16,1,.3,1);--disp:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Inter,system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}p,h1,h2,h3,h4,ul{margin:0}ul{padding:0;list-style:none}img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 26px;border:0;border-radius:999px;font-size:16px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s}
.btn:active{transform:translateY(2px)}
.btn-o{background:var(--or);color:#fff;box-shadow:0 3px 0 var(--or3),0 10px 30px rgba(255,90,31,.25)}.btn-o:hover{background:#ff6a33}
…订阅 Builder 查看完整源码。查看价格