Ask AI Composer
介绍
AI 对话输入框自动打字、删除并轮换示例问题，输入框带品牌数据源标签与蓝色发送键，身后四张卡片缓慢浮动，下方一排圆形接入图标。适合 API 与 MCP 接入介绍。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Ask AI Composer 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add ask-ai-composer
mcp › 使用 8pt MCP 调用 get_component("ask-ai-composer")
代码
Ask AI Composer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-aac"><div class="aac-stack"><span><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><b>背词鸭</b><u></u><u></u><em>月收入 —</em></span><span><span class="ic" style="background:#22C55E"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l7-7"/></svg></span><b>轻食记</b><u></u><u></u><em>月收入 —</em></span><span><span class="ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z"/></svg></span><b>眠岛</b><u></u><u></u><em>月收入 —</em></span><span><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><b>光修</b><u></u><u></u><em>月收入 —</em></span></div><div class="aac-box"><p class="aac-text"><span class="aac-typed"></span><i class="aac-caret"></i></p><div class="aac-row"><span class="aac-chip"><svg viewBox="0 0 32 32" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M4 22l12-16 12 16z"/><path d="M10 22l6-8 6 8"/><path d="M4 22l12 6 12-6"/></svg>澄榜<b>×</b></span><button type="button" class="aac-send" aria-label="发送"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div></div><div class="aac-with"><small>可接入</small><div><i class="a1"></i><i class="a2"></i><i class="a3"></i><i class="a4"></i><i class="a5"></i></div></div></div>
.x-aac{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-aac,.x-aac *{box-sizing:border-box}.x-aac a{color:inherit;text-decoration:none}.x-aac button{font:inherit;cursor:pointer}.x-aac{position:relative;width:100%;max-width:820px;margin:0 auto;text-align:center;padding:56px 64px 48px;border-radius:28px;background:url(https://8pt.dev/api/media/f744d0e82fa44c4c60fdaea6.webp) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.x-aac .aac-stack{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 4%;margin-bottom:-28px}.x-aac .aac-stack>span{height:150px;padding:12px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#F3F5F9);animation:aac-bob 4s ease-in-out infinite}.x-aac .aac-stack>span:nth-child(2){animation-delay:.4s}.x-aac .aac-stack>span:nth-child(3){animation-delay:.8s}.x-aac .aac-stack>span:nth-child(4){animation-delay:1.2s}.x-aac .aac-box{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 24px 50px -24px rgba(16,24,40,.3)}.x-aac .aac-text{margin:0 0 18px;min-height:22px;font-size:15px;color:#1D2939}.x-aac .aac-caret{display:inline-block;width:1.5px;height:16px;vertical-align:-2px;margin-left:1px;background:var(--ink);animation:aac-blink 1s steps(1) infinite}.x-aac .aac-row{display:flex;justify-content:space-between;align-items:center}.x-aac .aac-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;background:#EEF4FF;color:#1D2939;padding:4px 10px;border-radius:8px}.x-aac .aac-chip svg{width:14px;height:14px}.x-aac .aac-chip b{font-weight:400;color:#98A2B3;margin-left:2px}.x-aac .aac-send{width:34px;height:34px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;transition:transform .2s}.x-aac .aac-send:hover{transform:scale(1.06)}.x-aac .aac-with{margin-top:36px}.x-aac .aac-with small{font-size:13px;color:rgba(255,255,255,.85)}.x-aac .aac-with div{display:flex;justify-content:center;gap:14px;margin-top:14px}.x-aac .aac-with i{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(16,24,40,.06);position:relative}.x-aac .aac-with i::after{content:"";position:absolute;inset:11px;border-radius:5px}.x-aac .a1::after{background:conic-gradient(#0E1116 0 25%,#98A2B3 0 50%,#0E1116 0 75%,#98A2B3 0);border-radius:50%!important}.x-aac .a2::after{background:#F97316;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}.x-aac .a3::after{background:linear-gradient(135deg,#8B5CF6,#EC4899);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}.x-aac .a4::after{background:#0E1116;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.x-aac .a5::after{border:2.5px solid #38BDF8;border-radius:50%!important}.x-aac .aac-stack .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center}.x-aac .aac-stack .ic svg{width:14px;height:14px}.x-aac .aac-stack b{font-size:12px;font-weight:600}.x-aac .aac-stack u{display:block;width:100%;height:5px;border-radius:3px;background:#E9ECF2}.x-aac .aac-stack u+u{width:70%}.x-aac .aac-stack em{font-style:normal;font-size:10px;color:#2F6BEA;font-weight:600}@media (max-width:640px){.x-aac{padding:32px 16px}.x-aac .aac-stack{gap:8px;padding:0}.x-aac .aac-stack em{display:none}}@keyframes aac-bob{50%{transform:translateY(-6px)}}@keyframes aac-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.x-aac *{animation:none!important}}.x-aac{max-width:none;width:100%;padding:72px 10% 64px;border-radius:0}.x-aac::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.28) 1.1px,transparent 1.4px);background-size:18px 18px;pointer-events:none}.x-aac>*{position:relative}.x-aac .aac-box,.x-aac .aac-stack{max-width:680px;margin-left:auto;margin-right:auto}.x-aac .aac-stack{margin-bottom:-28px}(root) => {
const out = root.querySelector('.aac-typed');
const qs = ['哪些订阅类应用现在收入最高？', '列出轻食记正在投放的广告', '轻食记的引导页和付费墙长什么样？', '搜「卡路里计算」时谁排在前面？'];
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let q = 0, c = 0, del = false, t;
if (reduce) { out.textContent = qs[0]; return () => {}; }
const tick = () => {
const s = qs[q];
if (!del) { c++; out.textContent = s.slice(0, c); if (c === s.length) { del = true; t = setTimeout(tick, 1600); return; } t = setTimeout(tick, 90); }
else { c--; out.textContent = s.slice(0, c); if (c === 0) { del = false; q = (q + 1) % qs.length; t = setTimeout(tick, 300); return; } t = setTimeout(tick, 30); }
};
tick();
…订阅 Builder 查看完整源码。查看价格