Lingye Design Prompt Library Home
A home page for an AI site-building prompt library with a dark violet hero: countdown offer bar, character-rain glow hero with a video mockup, segmented-tab template card grid, one-design-many-platforms connector diagram, four sticky step cards, three-step MCP setup, three pricing tiers, masonry review wall, comparison connector panel, site-builder gradient feature section, FAQ and an outlined wordmark footer.
Overview
A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.
Where to use it
AI Product, Agent和Model服务的官网Home.
Install
With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt template lingye-prompt-library-home
mcp › Use 8pt MCP to call get_template("lingye-prompt-library-home")
Code
Single-file HTML + CSS, no build step.
<!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}
…Subscribe to Builder to see the full source.See pricing