Trio Capability Cards
介绍
标题加三张白色能力卡：第一张是带彩色光晕的输入框自动打字，第二张是编辑器预览里虚线选框在标题与按钮间切换、光标跟随移动，第三张是侧边菜单高亮逐项轮换。
拆自整页模板 念成 AI 应用构建器首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Trio Capability Cards 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add trio-capability-cards
mcp › 使用 8pt MCP 调用 get_component("trio-capability-cards")
代码
Trio Capability Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<section class="x-trc"><div class="trc-h"><h2>一个平台，无限可能。</h2><p>能描述出来，就能做出来。从零开始创建、运行、管理整个产品和生意。</p></div><div class="trc-g"><article class="trc-c"><div class="tv tv1"><span class="tv1-h"></span><div class="tv1-in"><b class="tv1-t"></b><i></i></div></div><h3>你出想法，念成把它做出来</h3><p>用平常说话的方式描述需求，看着念成和你一起实时搭出可上线的软件。</p></article><article class="trc-c"><div class="tv tv2"><div class="tv2-w"><div class="tv2-tb"><span class="pv"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>预览</span><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></svg></div><div class="tv2-pg"><div class="tv2-sel s1"><b>让团队修复问题<br>快人一步</b><em>h1</em></div><p class="tv2-p">为研发团队打造：分派、跟踪、解决问题，不拖慢节奏。</p><span class="tv2-sel s2"><span class="tv2-btn">立即开始</span><em>button</em></span></div><span class="tv2-cur"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="#111"><path d="M5 3l6 17 2-7 7-2z"/></svg></span></div></div><h3>细调设计，一键发布</h3><p>反复打磨直到满意，然后直接发布，马上就能用起来。</p></article><article class="trc-c"><div class="tv tv3"><span class="tv3-h"></span><ul><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M6 15l4-5 3 3 5-7"/></svg><span>数据分析</span></li><li class="on"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z"/></svg><span>云端</span></li><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="7" r="2.3"/><circle cx="18" cy="17" r="2.3"/><circle cx="18" cy="6" r="2.3"/><path d="M8.2 7.5l7.6-1M8 8.6l8.4 6.8"/></svg><span>连接器</span></li><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/></svg><span>安全</span></li><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4M9 13h.01M15 13h.01"/></svg><span>智能体集成</span></li><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg><span>收款</span></li><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg><span>搜索与 AI 收录</span></li></ul><span class="tv3-p"></span></div><h3>从头到尾，都能交给念成</h3><p>托管、登录、收款、各种连接，整套基础设施都替你照看好。</p></article></div></section>
.x-trc{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-trc,.x-trc *{box-sizing:border-box}.x-trc a{color:inherit;text-decoration:none}.x-trc button{font:inherit;cursor:pointer;color:inherit}.x-trc img{display:block;max-width:100%}.x-trc{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}.x-trc .trc-h{max-width:560px;margin-bottom:44px}.x-trc h2{margin:0 0 14px;font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.15}.x-trc .trc-h p{margin:0;font-size:16px;line-height:1.6;color:var(--mut)}.x-trc .trc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.x-trc .trc-c{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding-bottom:26px;transition:box-shadow .3s,transform .3s}.x-trc .trc-c:hover{box-shadow:0 20px 40px -24px rgba(0,0,0,.18);transform:translateY(-2px)}.x-trc h3{margin:0 22px 10px;font-size:16px;font-weight:600;letter-spacing:-.01em}.x-trc .trc-c p{margin:0 22px;font-size:14px;line-height:1.7;color:var(--mut)}.x-trc .tv{position:relative;height:290px;overflow:hidden;margin-bottom:22px}.x-trc .tv1-h{position:absolute;right:-60px;top:-80px;width:300px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,102,204,.45),rgba(76,125,255,.25),transparent);filter:blur(20px);animation:trcH 8s ease-in-out infinite alternate}@keyframes trcH{to{transform:translate(-30px,20px)}}.x-trc .tv1-in{position:absolute;left:24px;right:-30px;top:72px;height:170px;background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.04),-10px 10px 40px -8px rgba(76,125,255,.55),10px -6px 40px -10px rgba(255,102,204,.4);padding:16px 18px;font-size:22px;color:#B5B5B0}.x-trc .tv1-in i{display:inline-block;width:2px;height:24px;background:#888;vertical-align:-4px;animation:cmpB2 1s steps(1) infinite}@keyframes cmpB2{50%{opacity:0}}.x-trc .tv1-t{font-weight:400}.x-trc .tv2-w{position:absolute;left:20px;right:-1px;top:20px;bottom:-1px;background:#fff;border:1px solid var(--line);border-right:0;border-radius:14px 0 0 0;box-shadow:0 10px 30px -12px rgba(0,0,0,.15)}.x-trc .tv2-tb{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);color:#777}.x-trc .tv2-tb .pv{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:#E8F0FF;color:#2F5BD3;font-size:12px;font-weight:500}.x-trc .tv2-pg{padding:26px 16px 0 18px}.x-trc .tv2-sel{position:relative;display:inline-block;padding:4px 6px;outline:1.5px dashed transparent;border-radius:4px;transition:outline-color .3s}.x-trc .tv2-sel em{position:absolute;right:-14px;top:-8px;font-style:normal;font-size:10px;font-weight:600;color:#fff;background:#3B6CF6;border-radius:999px;padding:1px 6px;opacity:0;transition:opacity .3s}.x-trc .tv2-sel.on{outline-color:#3B6CF6}.x-trc .tv2-sel.on em{opacity:1}.x-trc .tv2-sel b{font-size:22px;line-height:1.2;letter-spacing:-.02em;color:#3A3A38}.x-trc .tv2-p{margin:10px 6px 14px;font-size:12px;line-height:1.6;color:#B0B0AB}.x-trc .tv2-btn{display:inline-block;padding:8px 14px;border-radius:8px;background:#C9C9C4;color:#fff;font-size:13px;font-weight:500}.x-trc .tv2-cur{position:absolute;left:62%;top:44%;transition:left .9s cubic-bezier(.6,0,.2,1),top .9s cubic-bezier(.6,0,.2,1)}.x-trc .tv2-cur svg{stroke:#fff}.x-trc .tv3-h{position:absolute;left:-90px;top:-40px;width:200px;height:380px;background:radial-gradient(closest-side,rgba(255,122,26,.55),rgba(255,102,204,.25),transparent);filter:blur(18px)}.x-trc .tv3 ul{position:absolute;left:28px;top:20px;bottom:0;width:62%;margin:0;padding:10px 8px;list-style:none;background:rgba(255,255,255,.9);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}.x-trc .tv3 li{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;margin-bottom:2px;border-radius:9px;font-size:13px;color:#55554F;transition:background .35s,color .35s}.x-trc .tv3 li svg{color:#8A8A85;flex:none}.x-trc .tv3 li.on{background:#EFEEE9;color:#1C1C1A}.x-trc .tv3 li:nth-child(n+6){opacity:.55}.x-trc .tv3 li:nth-child(7){opacity:.3}.x-trc .tv3-p{position:absolute;right:-1px;top:40px;width:30%;bottom:0;background:#F2F1EC;border:1px solid var(--line);border-right:0;border-bottom:0;border-radius:10px 0 0 0}@media (max-width:900px){.x-trc .trc-g{grid-template-columns:1fr;max-width:520px}}@media (prefers-reduced-motion:reduce){.x-trc *,.x-trc *::before,.x-trc *::after{animation:none!important;transition:none!important}}.x-trc{padding:56px 4%;background-image:radial-gradient(rgba(28,28,26,.13) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-trc{width:1200px;max-width:100%;box-sizing:border-box}(root) => {const cl=[];const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const t=root.querySelector('.tv1-t'),words=['做一个线上花店…','做一个读书会报名页…','做一个家庭记账工具…'];let wi=0,ci=0,d=false,tm;
const ty=()=>{const w=words[wi];if(red){t.textContent=w;return}if(!d){t.textContent=w.slice(0,++ci);if(ci>=w.length){d=true;tm=setTimeout(ty,1500);return}}else{t.textContent=w.slice(0,--ci);if(ci<=0){d=false;wi=(wi+1)%words.length}}tm=setTimeout(ty,d?40:110)};ty();
const s1=root.querySelector('.s1'),s2=root.querySelector('.s2'),cur=root.querySelector('.tv2-cur');let st=0;
const sw=()=>{st^=1;s1.classList.toggle('on',!st);s2.classList.toggle('on',!!st);cur.style.left=st?'38%':'62%';cur.style.top=st?'78%':'44%'};sw();const i1=red?0:setInterval(sw,2600);
const lis=[...root.querySelectorAll('.tv3 li')];let a=1;const i2=red?0:setInterval(()=>{a=(a+1)%5;lis.forEach((l,i)=>l.classList.toggle('on',i===a))},1800);
return ()=>{clearTimeout(tm);clearInterval(i1);clearInterval(i2)}}订阅 Builder 查看完整源码。查看价格