AI Prompt Composer
介绍
AI 生成平台首屏的创作输入框：视频 / 图片 / 智能体三种模式，滑块跟着切换；提示词像打字一样轮播，首帧尾帧槽位、模型和参数胶囊随模式变化，输入内容后发送键亮起；下方快捷标签一点就填好提示词。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 AI Prompt Composer 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add ai-prompt-composer
mcp › 使用 8pt MCP 调用 get_component("ai-prompt-composer")
代码
AI Prompt Composer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rzc"><div class="x-rzc__in" style="width:720px;height:330px">
<div class="x-rzc__seg" role="tablist" aria-label="创作类型"><i></i><button type="button" role="tab" aria-selected="true">视频</button><button type="button" role="tab" aria-selected="false">图片</button><button type="button" role="tab" aria-selected="false">智能体</button></div>
<div class="x-rzc__box">
<div class="x-rzc__top"><div class="x-rzc__slots"><span><button type="button" aria-label="添加首帧"><b>+</b>首帧</button>可选</span><em aria-hidden="true">⇄</em><span><button type="button" aria-label="添加尾帧"><b>+</b>尾帧</button>可选</span></div>
<textarea rows="3" aria-label="描述你的创意" placeholder="描述你的创意…"></textarea></div>
<div class="x-rzc__ctl"><button type="button" class="x-rzc__c" data-k="0">文字 / 图片生成视频 ⌄</button><button type="button" class="x-rzc__c g" data-k="1">⚡ 燃帧 3.0</button><button type="button" class="x-rzc__c g" data-k="2">自动 · 5 秒 · 720p</button><span class="x-rzc__sp"></span><span class="x-rzc__cr">◆ 10</span><button type="button" class="x-rzc__go" aria-label="生成" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div>
</div>
<div class="x-rzc__chips"><button type="button">故事短片</button><button type="button">动效设计</button><button type="button">换角重演</button><button type="button">电影镜头</button><button type="button">数字分身</button></div>
</div></div>.x-rzc{position:relative;flex:none}
.x-rzc__in{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;font-family:var(--d-font,system-ui,sans-serif);color:#fff;text-align:left}
.x-rzc__seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(20,10,8,.9);box-shadow:inset 0 0 0 1px rgba(255,120,60,.4),0 6px 30px rgba(255,90,31,.25)}
.x-rzc__seg button{position:relative;z-index:1;height:32px;padding:0 18px;border:0;border-radius:999px;background:none;color:#b8b3b9;font:inherit;font-size:13.5px;cursor:pointer;transition:color .25s}
.x-rzc__seg button[aria-selected=true]{color:#fff}
.x-rzc__seg i{position:absolute;top:4px;left:4px;height:32px;border-radius:999px;background:linear-gradient(180deg,#3a1a10,#1c0d09);box-shadow:inset 0 0 0 1px rgba(255,140,80,.6),0 0 18px rgba(255,90,31,.35);transition:transform .4s cubic-bezier(.16,1,.3,1),width .4s cubic-bezier(.16,1,.3,1)}
.x-rzc__box{width:100%;margin-top:18px;padding:12px;border-radius:22px;background:linear-gradient(180deg,#151110,#0c0a0a);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 -1px 0 rgba(255,140,80,.6),0 20px 60px rgba(255,80,20,.22)}
.x-rzc__top{display:flex;gap:14px;min-height:92px}
.x-rzc__slots{display:flex;align-items:flex-start;gap:6px;flex:none;transition:opacity .3s,width .3s}
.x-rzc__slots.off{display:none}
.x-rzc__slots span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:#6e6b72}
.x-rzc__slots button{display:grid;align-content:center;justify-items:center;width:44px;height:52px;border-radius:10px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);color:#bdb8be;font:inherit;font-size:11px;cursor:pointer;transition:border-color .2s,background .2s}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格