棱页 设计提示词库首页
深色紫光首屏的 AI 建站设计提示词库首页：倒计时优惠条、字符雨光晕首屏配视频样机、分段标签模板卡片网格、一稿多端连线图、四步粘性流程卡、MCP 三步接入、三档定价、瀑布评价墙、对比连线面板、建站器渐变功能区、问答与描边大字页脚。
介绍
一个完整的单文件页面，从这里起步。结构、文案位和响应式都已排好，复制提示词交给模型，它会按你的品牌改写文案、配色和图片。
适用场景
AI 产品、智能体和模型服务的官网首页。
安装
订阅 Builder 后，用 8pt CLI 取回整页源码，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt template lingye-prompt-library-home
mcp › 使用 8pt MCP 调用 get_template("lingye-prompt-library-home")
代码
单文件 HTML + CSS，无构建步骤。
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>棱页 · 设计提示词库</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500&display=swap" rel="stylesheet"><style>
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#0B0B0F;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;cursor:pointer}.page{overflow-x:clip}.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.page .lg-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(124,58,237,.7);flex:none}.page .lg-mark svg{width:60%;height:60%}
.sh{text-align:center;margin:0 auto 44px;max-width:900px}.sh p{max-width:640px;margin-left:auto!important;margin-right:auto!important}.sh h2{margin:0 0 14px;font-family:"Noto Serif SC","Songti SC",serif;font-weight:400;font-size:clamp(32px,4.2vw,52px);line-height:1.15;letter-spacing:-.02em}.sh h2 em{color:#8A8A94}.sh p{margin:0;font-size:16px;line-height:1.7;color:#52525B}.pill{display:inline-block;font-size:13px;font-weight:500;background:#F1F1F3;border-radius:999px;padding:6px 16px;margin-bottom:18px}.dark-pill{background:#fff;color:#0B0B0F}
.btnp{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;background:linear-gradient(180deg,#8B5CF6,#6D28D9);color:#fff;font-size:14px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -10px rgba(124,58,237,.9);transition:transform .2s}.btnp:hover{transform:translateY(-1px)}.btnw{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;background:#fff;border:1px solid #E4E4E7;font-size:14px;font-weight:600;transition:border-color .2s}.btnw:hover{border-color:#0B0B0F}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.rv.in{opacity:1;transform:none}
/* promo */
.promo{position:relative;display:flex;justify-content:center;align-items:center;gap:14px;height:40px;padding:0 44px;background:linear-gradient(90deg,#FBCFE8,#E9D5FF 30%,#DDD6FE 60%,#FBCFE8);background-size:200% 100%;animation:promo 12s linear infinite;font-size:13px;color:#3B0764;font-weight:500}.promo i.dot{width:7px;height:7px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.2)}.promo s{color:#7E22CE;opacity:.7}.promo a{display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:3px}.promo .cd{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:7px;padding:3px 9px;font-variant-numeric:tabular-nums;font-weight:600;color:#0B0B0F}.promo .cl{position:absolute;right:14px;border:0;background:none;color:#3B0764;width:26px;height:26px;display:grid;place-items:center}.promo.hide{display:none}@keyframes promo{to{background-position:200% 0}}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(11,11,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}.nav .wrap{max-width:1440px;display:flex;align-items:center;height:58px;padding:0 16px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}.nl{display:flex;gap:26px;margin-left:44px;font-size:13.5px;color:rgba(255,255,255,.88)}.nl a:hover{color:#fff}.nl .new{font-size:10px;background:#F97316;color:#fff;border-radius:999px;padding:1px 6px;margin-left:5px}.nr{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13.5px}.nr .su{background:#8B5CF6;padding:7px 14px;border-radius:8px;font-weight:600}.burger{display:none;margin-left:auto;width:40px;height:40px;border:0;background:none;color:#fff;position:relative}.burger::before,.burger::after,.burger i{content:"";position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}.burger::before{top:13px}.burger i{top:19px}.burger::after{top:25px}.nav.open .burger::before{transform:translateY(6px) rotate(45deg)}.nav.open .burger i{opacity:0}.nav.open .burger::after{transform:translateY(-6px) rotate(-45deg)}.mnav{display:none}
/* library */
.lib{background:#07060B;padding:10px 0 90px;position:relative}.lib .x-tcg{max-width:1180px}.lib .tcg-grid{grid-template-columns:repeat(4,1fr);max-height:860px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}.lib-cta{text-align:center;margin-top:-30px;position:relative}
…订阅 Builder 查看完整源码。查看价格