Builder Feature Cards
Overview
A site-builder introduction on a black-to-purple gradient: tag pill, two-tier headline and a prompt input that types itself, then four white feature cards demoing stacked templates, chat bubbles, section swapping and domain publishing, with two action buttons.
Taken from the page template Lingye Design Prompt Library Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Builder Feature Cards to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add builder-feature-cards
mcp › Use 8pt MCP to call get_component("builder-feature-cards")
Code
Source for Builder Feature Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<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();
…Subscribe to Builder to see the full source.See pricing