登录 开始使用
8pt

Builder Feature Cards

建站器功能卡•卡片
介绍

黑到紫渐变背景上的建站器介绍：标签胶囊、双层大标题、自动打字的提示词输入框，下方四张白色功能卡分别演示模板叠放、对话气泡、区块替换与域名发布，配两颗行动按钮。

拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。

纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Builder Feature Cards 加进你的项目并换成你的配色。

适用场景

功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。

安装

订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。

$ npm i -g @8pt-dev/cli && 8pt add builder-feature-cards
mcp › 使用 8pt MCP 调用 get_component("builder-feature-cards")

代码

Builder Feature Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。

<div class="x-bfc"><div class="bfc-in"><span class="bfc-tag"><b>新</b>✦ 棱页建站器 · 抢先体验</span><h3>认识棱页建站器。<span>从提示词到上线网站。</span></h3><p class="bfc-lead">你熟悉的资源库，现在也能直接建站。描述想法或从模板开始，用对话打磨每个区块，再发布到你自己的域名。</p><div class="bfc-box"><p><span class="bfc-typed"></span><i class="bfc-caret"></i></p><div class="bfc-bar"><button type="button" aria-label="添加">＋</button><button type="button" class="bfc-send" aria-label="发送"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div></div><div class="bfc-grid">
<div class="bfc-c"><div class="bfc-v v1"><img src="https://8pt.dev/api/media/e9305e8d5a0b168e09c4b76a.webp" alt=""><img src="https://8pt.dev/api/media/459ebe77e0e7a11e324963f0.webp" alt=""><img src="https://8pt.dev/api/media/d18262f978731e62e033d5f5.webp" alt=""><span class="v1-tag">零门槛开始</span></div><h4>从模板开始</h4><p>设计师打造的模板与区块，随手挑一个开工。</p></div>
<div class="bfc-c"><div class="bfc-v v2"><span class="b-me">把首屏调暗一点，再加个预约按钮</span><span class="b-ai"><i></i>好了，首屏已更新</span><span class="b-cost">消耗 1 点</span></div><h4>对话式编辑</h4><p>改文案、换图片、加页面，用大白话说就行。</p></div>
<div class="bfc-c"><div class="bfc-v v3"><div class="v3-h"><small>区块</small><em>● 区块库</em></div><span class="v3-nav">导航</span><div class="v3-hero"><b>首屏</b><span class="v3-sw">⇄ 替换</span><div class="v3-opts"><i class="on"></i><i></i><i></i></div></div></div><h4>从库中替换</h4><p>不喜欢这个首屏？一键换成区块库里的其他样式，不用重写提示词。</p></div>
<div class="bfc-c"><div class="bfc-v v4"><div class="v4-card"><span class="v4-dom"><i></i>yourstudio.example.com</span><span class="v4-row"><em>已上线</em><b class="v4-pub">发布</b></span></div><span class="v4-sub">name.example.com <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></div><h4>发布到你的域名</h4><p>一键上线到子域名，也可以绑定自有域名或导出压缩包。</p></div>
</div><div class="bfc-cta"><a href="#" class="bfc-b1">试用棱页建站器 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></a><a href="#" class="bfc-b2">看看怎么用 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></a></div><p class="bfc-fine">入门版 · 每日赠送点数 · 无需绑卡</p></div></div>
.x-bfc{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-bfc,.x-bfc *{box-sizing:border-box}.x-bfc a{color:inherit;text-decoration:none}.x-bfc button{font:inherit;cursor:pointer}.x-bfc{width:100%;color:#fff;text-align:center;background:linear-gradient(180deg,#000 0%,#14082E 28%,#5B21B6 62%,#A78BFA 84%,#F5F3FF 100%);padding:56px 24px 64px;overflow:hidden}.x-bfc .bfc-in{max-width:1100px;margin:0 auto}.x-bfc .bfc-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#3B0764;background:#F5F3FF;border-radius:999px;padding:4px 12px 4px 4px;font-weight:500}.x-bfc .bfc-tag b{color:#fff;background:var(--pur);border-radius:999px;padding:2px 9px;font-weight:600}.x-bfc h3{margin:18px 0 14px;font-size:clamp(28px,3.6vw,46px);font-weight:700;line-height:1.15;letter-spacing:-.02em}.x-bfc h3 span{display:block;color:rgba(255,255,255,.55)}.x-bfc .bfc-lead{max-width:560px;margin:0 auto;font-size:15px;line-height:1.75;color:rgba(255,255,255,.75)}.x-bfc .bfc-box{max-width:560px;margin:30px auto 34px;background:#fff;border-radius:16px;padding:14px;text-align:left;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}.x-bfc .bfc-box p{margin:0 0 20px;min-height:22px;font-size:14px;color:#52525B}.x-bfc .bfc-caret{display:inline-block;width:1.5px;height:15px;vertical-align:-2px;background:#0B0B0F;animation:bfc-blink 1s steps(1) infinite}.x-bfc .bfc-bar{display:flex;justify-content:space-between}.x-bfc .bfc-bar button{width:30px;height:30px;border-radius:50%;border:1px solid #E4E4E7;background:#fff;color:#52525B;display:grid;place-items:center;font-size:16px}.x-bfc .bfc-bar .bfc-send{background:#F4F4F5;transition:background .2s,color .2s}.x-bfc .bfc-box.has .bfc-send{background:var(--pur);color:#fff;border-color:var(--pur)}.x-bfc .bfc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}.x-bfc .bfc-c{background:#fff;color:var(--ink);border-radius:18px;padding:8px 8px 18px;box-shadow:0 20px 40px -24px rgba(46,16,101,.6);transition:transform .3s}.x-bfc .bfc-c:hover{transform:translateY(-4px)}.x-bfc .bfc-c h4{margin:14px 10px 6px;font-size:15px;font-weight:700}.x-bfc .bfc-c p{margin:0 10px;font-size:12.5px;line-height:1.65;color:#52525B}.x-bfc .bfc-v{position:relative;height:132px;border-radius:12px;overflow:hidden}.x-bfc .v1{background:linear-gradient(135deg,#F3E8FF,#FCE7F3)}.x-bfc .v1 img{position:absolute;width:44%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:2px solid #fff;box-shadow:0 8px 16px -8px rgba(0,0,0,.4);transition:transform .4s}.x-bfc .v1 img:nth-child(1){left:6%;top:30%;transform:rotate(-6deg)}.x-bfc .v1 img:nth-child(2){left:28%;top:14%;z-index:2}.x-bfc .v1 img:nth-child(3){right:6%;top:28%;transform:rotate(6deg)}.x-bfc .bfc-c:hover .v1 img:nth-child(1){transform:rotate(-10deg) translateX(-4px)}.x-bfc .bfc-c:hover .v1 img:nth-child(3){transform:rotate(10deg) translateX(4px)}.x-bfc .v1-tag{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);font-size:10px;color:#fff;background:#0B0B0F;padding:3px 10px;border-radius:999px;white-space:nowrap}.x-bfc .v2{background:#121214;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:12px}.x-bfc .v2 span{font-size:10.5px;border-radius:10px;padding:6px 9px;max-width:80%;opacity:0;transform:translateY(6px);transition:all .4s}.x-bfc .v2.play span{opacity:1;transform:none}.x-bfc .b-me{align-self:flex-end;background:var(--pur);color:#fff}.x-bfc .b-ai{align-self:flex-start;background:#27272A;color:#E4E4E7;display:flex;align-items:center;gap:6px;transition-delay:.5s!important}.x-bfc .b-ai i{width:6px;height:6px;border-radius:50%;background:#22C55E}.x-bfc .b-cost{align-self:flex-start;font-family:ui-monospace,monospace;color:#A1A1AA;border:1px solid #3F3F46;padding:2px 7px!important;border-radius:6px!important;transition-delay:.9s!important}.x-bfc .v3{background:#FAFAFA;border:1px solid #F0F0F2;padding:10px}.x-bfc .v3-h{display:flex;justify-content:space-between;font-size:10px;color:#71717A;letter-spacing:.1em}.x-bfc .v3-h em{font-style:normal;letter-spacing:0;color:var(--pur);background:#EDE9FE;padding:1px 6px;border-radius:999px}.x-bfc .v3-nav{display:block;margin:8px 0 6px;font-size:10px;background:#F0F0F2;border-radius:5px;padding:4px 7px;color:#71717A}.x-bfc .v3-hero{border:1.5px solid var(--pur);border-radius:8px;padding:6px 7px;background:#fff}.x-bfc .v3-hero b{font-size:11px}.x-bfc .v3-sw{float:right;font-size:9.5px;color:#fff;background:var(--pur);padding:2px 6px;border-radius:5px}.x-bfc .v3-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.x-bfc .v3-opts i{height:22px;border-radius:4px;border:1px solid #E4E4E7;background:linear-gradient(#E4E4E7 0 0) 6px 6px/60% 3px no-repeat,linear-gradient(#C4B5FD 0 0) 6px 13px/30% 3px no-repeat;transition:border-color .3s}.x-bfc .v3-opts i.on{border-color:var(--pur);box-shadow:0 0 0 2px #EDE9FE}.x-bfc .v4{background:linear-gradient(135deg,#F3E8FF,#FCE7F3);display:grid;place-items:center;align-content:center;gap:10px}.x-bfc .v4-card{width:84%;background:#fff;border-radius:10px;padding:9px 10px;box-shadow:0 10px 20px -12px rgba(76,29,149,.4)}.x-bfc .v4-dom{display:flex;align-items:center;gap:6px;font-size:10.5px;padding-bottom:8px;border-bottom:1px solid #F0F0F2}.x-bfc .v4-dom i{width:6px;height:6px;border-radius:50%;background:#22C55E}.x-bfc .v4-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.x-bfc .v4-row em{font-style:normal;font-size:10px;color:#16A34A;background:#DCFCE7;padding:2px 7px;border-radius:999px}.x-bfc .v4-pub{font-size:10.5px;color:#fff;background:var(--pur);padding:4px 12px;border-radius:6px}.x-bfc .v4-sub{display:flex;align-items:center;gap:4px;font-size:10px;background:#fff;padding:3px 9px;border-radius:999px;color:#3F3F46}.x-bfc .v4-sub svg{width:10px;height:10px;color:#16A34A}.x-bfc .bfc-cta{display:flex;justify-content:center;gap:10px;margin-top:34px}.x-bfc .bfc-cta a{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:600;transition:transform .2s}.x-bfc .bfc-cta a:hover{transform:translateY(-1px)}.x-bfc .bfc-b1{background:var(--pur);color:#fff;box-shadow:0 10px 24px -10px rgba(124,58,237,.9)}.x-bfc .bfc-b2{background:#fff;color:var(--ink)}.x-bfc .bfc-fine{margin:12px 0 0;font-size:12px;color:#3B0764}@keyframes bfc-blink{50%{opacity:0}}@media (max-width:900px){.x-bfc .bfc-grid{grid-template-columns:1fr 1fr}}@media (max-width:520px){.x-bfc .bfc-grid{grid-template-columns:1fr}.x-bfc .bfc-cta{flex-direction:column;align-items:stretch}.x-bfc .bfc-cta a{justify-content:center}}@media (prefers-reduced-motion:reduce){.x-bfc *{animation:none!important;transition:none!important}.x-bfc .v2 span{opacity:1;transform:none}}.x-bfc{background:linear-gradient(180deg,#000 0%,#14082E 30%,#4C1D95 75%,#6D28D9 100%)}.x-bfc .bfc-fine{color:rgba(255,255,255,.8)}.x-bfc{width:1200px;max-width:100%;box-sizing:border-box}
(root) => {
  const out = root.querySelector('.bfc-typed'), box = root.querySelector('.bfc-box'), v2 = root.querySelector('.v2'), opts = [...root.querySelectorAll('.v3-opts i')];
  const qs = ['给我的咖啡馆做一个温暖的落地页', '把首屏换成全屏视频背景', '加一个三档定价区块'];
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let q = 0, c = 0, del = false, t, t2, o = 0;
  if (reduce) { out.textContent = '描述你想做的网站，或告诉棱页要改什么…'; v2.classList.add('play'); return () => {}; }
  const tick = () => {
    const s = qs[q];
    if (!del) { c++; out.textContent = s.slice(0, c); box.classList.add('has'); if (c === s.length) { del = true; t = setTimeout(tick, 1500); return; } t = setTimeout(tick, 85); }
    else { c--; out.textContent = s.slice(0, c); if (c === 0) { del = false; box.classList.remove('has'); q = (q + 1) % qs.length; t = setTimeout(tick, 400); return; } t = setTimeout(tick, 28); }
  };
  tick();
…
订阅 Builder 查看完整源码。查看价格

同一模板的其他组件

查看全部

Chevron FAQ List

MCP Connect Steps

Masonry Review Wall

Versus Compare Panel

Tri Plan Pricing

Template Card Grid

Glow Prompt Hero

Prompt Hub Diagram

更多卡片组件

查看全部

Live Deploy Bento

Trio Capability Cards

Story Stat Carousel

Collage Topic Cards

Agent Use Cards

AI Feature Bento

Tagged Journal Cards

MCP Connect Steps

更多组件

查看全部

Tabbed Logo Testimonial

Dot Matrix Glow Hero

Dotted Globe Features

Chaos Versus Ship Split

Segmented Pricing Tiers

Floating Tile CTA Banner

Aurora Prompt Hero

Integration Tile Grid

继续探索

按钮 组件背景 组件Hero 组件卡片 组件输入 组件导航 组件反馈 组件数字 组件动效 组件定价 组件折叠 组件文字 组件数据展示 组件媒体 组件