8pt

燧云 全球网络平台首页

白底云平台首页:带大菜单、下滑收拢的顶部导航,点阵光晕橙色首屏,自转点阵地球与三格特性,标签切换客户证言,混乱与交付对照,分段切换定价,实时部署便当格,浮动图块收尾横幅与多栏页脚。

模板 · 开发者工具首页•9 个区块
整页预览
介绍

一个完整的单文件页面,从这里起步。结构、文案位和响应式都已排好,复制提示词交给模型,它会按你的品牌改写文案、配色和图片。

适用场景

开发者工具、云服务和 API 产品的官网首页。

安装

订阅 Builder 后,用 8pt CLI 取回整页源码,或在已接入 8pt MCP 的编辑器里直接调用。

$ npm i -g @8pt-dev/cli && 8pt template suiyun-cloud-home
mcp › 使用 8pt MCP 调用 get_template("suiyun-cloud-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+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box}html,body{margin:0;background:#fff;color:#262626}body{font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}.site-nav{position:sticky;top:0;z-index:50}.site-nav .x-snv.is-compact{background:transparent}.sec-hero{padding:0 8px}.wrap{position:relative;max-width:1200px;margin:0 auto;padding:110px 0;border-left:1px dashed #E8E8E8;border-right:1px dashed #E8E8E8}.wrap::before,.wrap::after{content:"";position:absolute;top:0;width:7px;height:7px;border:1px solid #E2E2E2;background:#fff}.wrap::before{left:-4px}.wrap::after{right:-4px}.sec-cta{padding:30px 8px 0}.site-foot{margin-top:24px}.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.rv.is-in{opacity:1;transform:none}@media (max-width:1280px){.wrap{margin:0 32px}}@media (max-width:640px){.wrap{margin:0 14px;padding:72px 0;border:0}.wrap::before,.wrap::after{display:none}.sec-hero{padding:0 6px}}@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}.x-snv{position:relative;width:100%;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;background:#fff;z-index:30}.x-snv a{color:inherit;text-decoration:none}.x-snv__bar{display:flex;align-items:center;gap:20px;height:72px;padding:0 20px;box-sizing:border-box;transition:background .3s}.x-snv__mark{display:inline-flex;align-items:center;gap:8px}.x-snv__mark svg{width:30px;height:30px}.x-snv__mark b{font-size:19px;font-weight:700;letter-spacing:.08em}.x-snv__menu{display:flex;align-items:center;gap:4px;margin:0 auto;transition:opacity .3s,transform .3s}.x-snv__item{position:relative}.x-snv__link{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:14.5px;color:inherit;cursor:pointer;transition:background .2s}.x-snv__link:hover,.x-snv__item.is-open .x-snv__link{background:#F5F3EE}.x-snv__link svg{width:14px;height:14px;color:#8a8a8a;transition:transform .25s}.x-snv__item.is-open .x-snv__link svg{transform:rotate(180deg)}.x-snv__panel{position:absolute;left:50%;top:calc(100% + 12px);width:420px;padding:22px 24px;box-sizing:border-box;border:1px solid #EBEBEB;border-radius:16px;background:#fff;box-shadow:0 24px 60px -20px rgba(60,30,10,.25);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .25s,transform .25s,visibility .25s}.x-snv__item.is-open .x-snv__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}.x-snv__ptitle{margin:0 0 12px;font-size:12px;color:#8a8a8a;letter-spacing:.08em}.x-snv__panel ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0;padding:0;list-style:none}.x-snv__panel a{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:10px;font-size:14.5px;transition:background .2s,color .2s}.x-snv__panel a svg{width:14px;height:14px;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}.x-snv__panel a:hover{background:#FFF4EC;color:#FF5D1D}.x-snv__panel a:hover svg{opacity:1;transform:none}.x-snv__end{display:flex;align-items:center;gap:8px;margin-left:0}.x-snv__alert{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:#C9353E!important;margin-right:6px}.x-snv__alert svg{width:16px;height:16px}.x-snv__pill{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid #EBEBEB;border-radius:999px;font-size:14.5px;transition:border-color .2s,background .2s}.x-snv__pill:hover{border-color:#d6d6d6;background:#FAFAF8}.x-snv__icon{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid #EBEBEB;border-radius:999px;background:#fff;color:inherit;cursor:pointer}.x-snv__icon svg{width:16px;height:16px}.x-snv__burger{display:none}.x-snv__cta{display:none;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#FF5D1D;color:#fff!important;font-size:14.5px;font-weight:500;box-shadow:0 6px 18px -6px rgba(255,93,29,.6)}.x-snv.is-compact .x-snv__menu,.x-snv.is-compact .x-snv__alert,.x-snv.is-compact .x-snv__pill,.x-snv.is-compact .x-snv__icon{display:none}.x-snv.is-compact .x-snv__cta{display:inline-flex;animation:x-snv-in .35s ease}.x-snv.is-compact{background:transparent}.x-snv.is-compact .x-snv__end{margin-left:auto}.x-snv__drawer{display:none}@keyframes x-snv-in{from{opacity:0;transform:translateY(-6px)}}@media (max-width:1100px){.x-snv__alert,.x-snv__hide-m{display:none}}@media (max-width:860px){.x-snv__menu{display:none}.x-snv__end{margin-left:auto}.x-snv__burger{display:inline-grid;border:0}.x-snv__icon{border:0}.x-snv__bar{height:64px;padding:0 14px}.x-snv__drawer{display:flex;flex-direction:column;gap:2px;max-height:0;overflow:hidden;padding:0 14px;background:#fff;transition:max-height .35s ease}.x-snv.is-drawer .x-snv__drawer{max-height:420px;padding-bottom:16px}.x-snv__drawer a{padding:14px 4px;border-bottom:1px solid #F0F0F0;font-size:17px}.x-snv__drawer .x-snv__dcta{margin-top:12px;border:0;border-radius:12px;background:#FF5D1D;color:#fff!important;text-align:center}.x-snv.is-compact .x-snv__cta{display:none}.x-snv.is-compact .x-snv__icon{display:inline-grid}.x-snv.is-compact .x-snv__pill{display:inline-flex}}@media (prefers-reduced-motion:reduce){.x-snv__panel,.x-snv__menu,.x-snv__drawer,.x-snv__link svg{transition:none}.x-snv.is-compact .x-snv__cta{animation:none}}.x-sgh{position:relative;width:100%;height:720px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center}.x-sgh__dots{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 60%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 60%);animation:x-sgh-shim 6s ease-in-out infinite}.x-sgh__glow{position:absolute;left:50%;bottom:-260px;z-index:-1;width:1100px;height:560px;border-radius:50%;background:radial-gradient(closest-side,#FFF8E4 0%,#FFE2A0 30%,rgba(255,176,92,.75) 58%,rgba(255,93,29,0) 100%);box-shadow:0 -2px 0 0 rgba(255,244,220,.9),0 -24px 60px -10px rgba(255,226,160,.7);transform:translateX(-50%);filter:blur(2px);animation:x-sgh-breathe 5.5s ease-in-out infinite}.x-sgh__in{display:flex;flex-direction:column;align-items:center;max-width:100%;padding:0 32px 60px;box-sizing:border-box;text-align:center}.x-sgh h1{margin:0;font-size:clamp(34px,4.1vw,56px);font-weight:500;line-height:1.14;letter-spacing:-.015em}.x-sgh p{margin:30px 0 0;font-size:18px;line-height:1.5;opacity:.95}.x-sgh__btn{display:inline-flex;align-items:center;gap:8px;margin-top:44px;height:50px;padding:0 24px;border-radius:999px;background:#fff;color:#1d1d1d;font-size:16px;font-weight:500;text-decoration:none;box-shadow:0 10px 30px -12px rgba(120,30,0,.55);transition:transform .25s,box-shadow .25s}.x-sgh__btn svg{width:16px;height:16px;transition:transform .25s}.x-sgh__btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(120,30,0,.6)}.x-sgh__btn:hover svg{transform:translateX(3px)}@keyframes x-sgh-shim{50%{opacity:.55}}@keyframes x-sgh-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-sgh{height:600px}.x-sgh__in{align-self:stretch;align-items:flex-start;text-align:left;padding:40px 24px 50px}.x-sgh h1{font-size:36px;font-weight:600;line-height:1.15}.x-sgh h1 br,.x-sgh p br{display:none}.x-sgh p{font-size:18px}.x-sgh__btn{align-self:stretch;justify-content:center;height:62px;border-radius:12px}.x-sgh__glow{width:520px;height:220px;bottom:-140px}}@media (prefers-reduced-motion:reduce){.x-sgh__dots,.x-sgh__glow{animation:none}.x-sgh__btn,.x-sgh__btn svg{transition:none}}.x-dgl{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dgl h2{margin:0;font-size:clamp(32px,3.3vw,46px);font-weight:400;letter-spacing:-.015em}.x-dgl__sub{margin:16px 0 0;font-size:17px;color:#555}.x-dgl__stage{position:relative;width:82%;margin:14px auto 0;height:500px;background:#FFFCF2;overflow:hidden}.x-dgl__cv{display:block;width:100%;height:100%}.x-dgl__feat{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #EBEBEB;background:#fff;text-align:left}.x-dgl__cell{padding:30px 32px 34px;border-left:1px solid #EBEBEB;transition:background .3s}.x-dgl__cell:first-child{border-left:0}.x-dgl__cell:hover{background:#FFF8F1}.x-dgl__cell svg{width:24px;height:24px;color:#262626}.x-dgl__cell h3{margin:16px 0 6px;font-size:16.5px;font-weight:500}.x-dgl__cell p{margin:0;font-size:14.5px;line-height:1.5;color:#666}@media (max-width:640px){.x-dgl__stage{width:100%;height:320px}.x-dgl__feat{grid-template-columns:1fr}.x-dgl__cell{border-left:0;border-top:1px solid #EBEBEB}.x-dgl__cell:first-child{border-top:0}.x-dgl__sub{padding:0 12px}}@media (prefers-reduced-motion:reduce){.x-dgl__cell{transition:none}}.x-ltq{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-ltq h2{margin:0;font-size:clamp(30px,3.1vw,44px);font-weight:400;letter-spacing:-.015em}.x-ltq__sub{margin:14px 0 30px;font-size:16px;color:#666}.x-ltq__card{width:82%;margin:0 auto;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-ltq__tabs{display:flex;border-bottom:1px solid #EBEBEB;overflow:hidden}.x-ltq__tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:52px;border:0;border-right:1px solid #F2F2F2;background:none;font:inherit;font-size:14px;color:#777;cursor:pointer;transition:color .25s,background .25s}.x-ltq__tab i{width:12px;height:12px;border-radius:4px;background:#cfcfcf}.x-ltq__tab.is-on{color:#1d1d1d;background:#FFFBF6}.x-ltq__tab--mute{cursor:default;opacity:.55}.x-ltq__bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#FF5D1D}.x-ltq__tab.is-on .x-ltq__bar{animation:x-ltq-prog 6s linear forwards}.x-ltq__card:hover .x-ltq__tab.is-on .x-ltq__bar{animation-play-state:paused}.x-ltq__slides{position:relative;height:300px}.x-ltq__slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 190px;grid-template-rows:1fr auto;gap:10px 40px;margin:0;padding:40px 56px;box-sizing:border-box;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none}.x-ltq__slide.is-on{opacity:1;transform:none;pointer-events:auto}.x-ltq__slide blockquote{margin:0;align-self:center;font-size:clamp(20px,2vw,27px);line-height:1.38;letter-spacing:-.01em}.x-ltq__slide em{font-style:normal;color:#FF5D1D}.x-ltq__slide figcaption{grid-column:1;font-size:13.5px;color:#666}.x-ltq__slide figcaption b{margin-right:8px;color:#262626;font-weight:500}.x-ltq__slide img{grid-column:2;grid-row:1/3;align-self:center;width:190px;height:190px;border-radius:16px;object-fit:cover;animation:x-ltq-float 6s ease-in-out infinite}.x-ltq__more{margin:34px 0 18px;font-size:14.5px;color:#666}.x-ltq__marq{width:82%;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.x-ltq__track{display:flex;width:max-content;animation:x-ltq-marq 30s linear infinite}.x-ltq__marq:hover .x-ltq__track{animation-play-state:paused}.x-ltq__track span{padding:0 34px;font-size:24px;font-weight:700;letter-spacing:.12em;color:#3a3a3a;white-space:nowrap}.x-ltq__track span:nth-child(3n){font-weight:400;letter-spacing:.3em}.x-ltq__track span:nth-child(4n){color:#777}@keyframes x-ltq-prog{to{width:100%}}@keyframes x-ltq-marq{to{transform:translateX(-50%)}}@keyframes x-ltq-float{50%{transform:translateY(-8px)}}@media (max-width:640px){.x-ltq__card,.x-ltq__marq{width:100%}.x-ltq__tab--mute{display:none}.x-ltq__slides{height:430px}.x-ltq__slide{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 22px}.x-ltq__slide img{grid-column:1;grid-row:1;width:110px;height:110px}.x-ltq__slide blockquote{font-size:20px}}@media (prefers-reduced-motion:reduce){.x-ltq__track,.x-ltq__slide img,.x-ltq__tab.is-on .x-ltq__bar{animation:none}.x-ltq__tab.is-on .x-ltq__bar{width:100%}.x-ltq__slide{transition:none}}.x-cvs{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-cvs h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-cvs__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-cvs__grid{display:grid;grid-template-columns:1fr 1fr;width:82%;margin:0 auto;height:500px}.x-cvs__mess{position:relative;overflow:hidden;background:#fff;border:1px solid #F0F0F0}.x-cvs__bars{position:absolute;left:0;right:0;top:42%;height:30%;background-image:linear-gradient(90deg,rgba(255,93,29,.18) 1px,transparent 1px);background-size:7px 100%;-webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);animation:x-cvs-noise 2.4s steps(4) infinite}.x-cvs__mess h3{position:absolute;left:0;right:0;top:44px;z-index:2;margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.15;text-shadow:0 0 18px #fff,0 0 8px #fff}.x-cvs__note{position:absolute;z-index:1;max-width:240px;padding:9px 12px;border:1px solid #EFEFEF;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px -16px rgba(0,0,0,.35);font-size:12.5px;line-height:1.4;text-align:left;color:#444;animation:x-cvs-drift 9s ease-in-out infinite}.x-cvs__note b{display:block;font-weight:500;color:#262626}.x-cvs__note .x-cvs__p0{display:inline-block;margin-bottom:3px;padding:1px 6px;border-radius:4px;background:#FDE3E5;color:#C9353E;font-size:11.5px}.x-cvs__note:nth-child(odd){opacity:.75}.x-cvs__ship{position:relative;overflow:hidden;background:#FF5D1D;color:#fff}.x-cvs__ship h3{position:absolute;left:0;right:0;top:44px;margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.15}.x-cvs__line{position:absolute;left:0;right:0;top:56%;border-top:1px dashed rgba(255,255,255,.55)}.x-cvs__toast{position:absolute;left:50%;top:56%;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:14px;white-space:nowrap;transform:translate(-50%,-50%)}.x-cvs__toast svg{width:16px;height:16px}.x-cvs__toast span{transition:opacity .35s,transform .35s}.x-cvs__toast.is-swap span{opacity:0;transform:translateY(6px)}@keyframes x-cvs-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}@keyframes x-cvs-noise{25%{background-position:2px 0}50%{background-position:5px 0}75%{background-position:1px 0}}@media (max-width:640px){.x-cvs__grid{grid-template-columns:1fr;width:100%;height:auto}.x-cvs__mess,.x-cvs__ship{height:420px}}@media (prefers-reduced-motion:reduce){.x-cvs__note,.x-cvs__bars{animation:none}.x-cvs__toast span{transition:none}}.x-tpt{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-tpt h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-tpt__sub{margin:12px 0 28px;font-size:16px;color:#666}.x-tpt__seg{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid #EBEBEB;border-radius:999px;background:#fff}.x-tpt__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:#FF5D1D;box-shadow:0 6px 16px -8px rgba(255,93,29,.8);transition:left .35s cubic-bezier(.3,.8,.3,1),width .35s cubic-bezier(.3,.8,.3,1)}.x-tpt__seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:#333;cursor:pointer;transition:color .3s}.x-tpt__seg button svg{width:15px;height:15px}.x-tpt__seg button.is-on{color:#fff}.x-tpt__box{position:relative;width:82%;margin:22px auto 0;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-tpt__pane{display:none;animation:x-tpt-in .45s ease}.x-tpt__pane.is-on{display:block}.x-tpt__intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 36px;border-bottom:1px solid #EBEBEB}.x-tpt__intro h4{margin:0 0 8px;font-size:16px;font-weight:500}.x-tpt__intro p{margin:0;font-size:14px;line-height:1.55;color:#666}.x-tpt__flow{padding:16px 18px;border:1px dashed #E3E3E3;border-radius:6px}.x-tpt__flow>p:first-child{display:flex;justify-content:space-between;margin:0 0 12px;font-size:12.5px;color:#888}.x-tpt__or{color:#FF5D1D}.x-tpt__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.x-tpt__chips span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px dashed #E0E0E0;border-radius:6px;font-size:12.5px;color:#333;animation:x-tpt-pulse 3s ease-in-out infinite}.x-tpt__chips span:nth-child(2){animation-delay:.3s}.x-tpt__chips span:nth-child(3){animation-delay:.6s}.x-tpt__chips span:nth-child(4){animation-delay:.9s}.x-tpt__chips span:nth-child(5){animation-delay:1.2s}.x-tpt__chips svg{width:15px;height:15px}.x-tpt__cap{margin:12px 0 0!important;font-size:12.5px!important;color:#777!important;text-align:center}.x-tpt__plans{display:grid}.x-tpt__plan{padding:26px 26px 28px;border-left:1px solid #EBEBEB}.x-tpt__plan:first-child{border-left:0}.x-tpt__plan h4{margin:0;font-size:14.5px;font-weight:500}.x-tpt__for{margin:2px 0 0;font-size:13.5px;color:#777}.x-tpt__price{margin:16px 0 14px;font-size:30px;letter-spacing:-.01em}.x-tpt__price small{margin-left:4px;font-size:12.5px;color:#777}.x-tpt__plan ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}.x-tpt__plan li{padding:3px 8px;border:1px solid #EDEDED;border-radius:4px;font-size:12px;color:#555}.x-tpt__plan a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #E5E5E5;border-radius:999px;font-size:13.5px;color:#262626;text-decoration:none;transition:border-color .2s,color .2s}.x-tpt__plan a:hover{border-color:#FF5D1D;color:#FF5D1D}.x-tpt__row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;margin:8px 0;font-size:12.5px;color:#555}.x-tpt__track{position:relative;height:14px;border-radius:3px;background:#F4F4F2}.x-tpt__track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:repeating-linear-gradient(90deg,#E6E6E2 0 6px,#F4F4F2 6px 9px)}.x-tpt__track b{position:absolute;top:0;bottom:0;border-radius:3px;background:#FF5D1D}.x-tpt__k1,.x-tpt__k2{display:inline-block;width:10px;height:10px;margin:0 4px 0 10px;border-radius:2px;background:#E6E6E2;vertical-align:-1px}.x-tpt__k2{background:#FF5D1D}.x-tpt__note{margin:14px 0 0;font-size:12.5px;color:#999}@keyframes x-tpt-in{from{opacity:0;transform:translateY(8px)}}@keyframes x-tpt-pulse{0%,100%{border-color:#E0E0E0}50%{border-color:rgba(255,93,29,.55);color:#FF5D1D}}@media (max-width:900px){.x-tpt__box{width:100%}.x-tpt__intro{grid-template-columns:1fr;gap:18px;padding:24px 20px}.x-tpt__plans{grid-template-columns:1fr 1fr!important}.x-tpt__plan:nth-child(odd){border-left:0}.x-tpt__plan{border-top:1px solid #EBEBEB}}@media (max-width:640px){.x-tpt__plans{grid-template-columns:1fr!important}.x-tpt__plan{border-left:0}.x-tpt__seg button{padding:0 9px;font-size:12.5px;gap:4px}.x-tpt__seg button svg{display:none}.x-tpt__chips span{font-size:11px}}@media (prefers-reduced-motion:reduce){.x-tpt__pane,.x-tpt__chips span{animation:none}.x-tpt__thumb{transition:none}}.x-dbn{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dbn h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-dbn__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-dbn__grid{display:grid;grid-template-columns:1fr 1fr 1fr;width:82%;margin:0 auto;text-align:left}.x-dbn__c{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:28px 26px;box-sizing:border-box;border:1px solid #EBEBEB;margin:-1px 0 0 -1px;background:#fff;overflow:hidden}.x-dbn__c h3{margin:0 0 8px;font-size:16px;font-weight:500}.x-dbn__c p{margin:0;font-size:14px;line-height:1.55;color:#666;max-width:440px}.x-dbn__c>svg{width:22px;height:22px;margin-bottom:12px}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:span 2}.x-dbn__c--or{justify-content:flex-start;background:#FF5D1D;color:#fff;border-color:#FF5D1D}.x-dbn__c--or p{color:rgba(255,255,255,.92)}.x-dbn__deploy{position:absolute;left:24px;right:24px;top:22px;display:flex;gap:14px}.x-dbn__app{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:8px;background:#FF5D1D;color:#fff}.x-dbn__app svg{width:24px;height:24px}.x-dbn__list{flex:1;margin:0;padding:0;list-style:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}.x-dbn__list li{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;height:36px;margin-bottom:6px;padding:0 14px;border-radius:4px;background:#FFF1E8;font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12.5px;color:#FF5D1D;animation:x-dbn-push .5s ease}.x-dbn__list li em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-dbn__list li em i{width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;box-sizing:border-box}.x-dbn__list li[data-s="build"] em i{border-right-color:transparent;animation:x-dbn-spin .8s linear infinite}.x-dbn__list li[data-s="queue"]{opacity:.55}.x-dbn__list li[data-s="done"] em i{background:#FF5D1D;border-color:#FF5D1D}.x-dbn__c--sec{justify-content:flex-end}.x-dbn__shield{position:absolute;right:-20px;top:-10px;width:200px;height:200px;color:rgba(255,93,29,.22)}.x-dbn__shield svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.5;stroke-dasharray:60;animation:x-dbn-draw 4s ease-in-out infinite}.x-dbn__c--ai{flex-direction:row;align-items:flex-end;gap:26px}.x-dbn__c--ai>div:first-child{flex:1}.x-dbn__term{flex:1.1;align-self:stretch;padding:14px 16px;border:1px solid #EFEFEF;border-radius:6px;background:linear-gradient(#fff,#FFFAF5);box-shadow:0 14px 40px -26px rgba(120,50,10,.4);font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;color:#444}.x-dbn__tl{margin:0 0 10px!important;font-size:12.5px!important;color:#262626!important}.x-dbn__lines div{display:flex;align-items:center;gap:8px;height:24px;opacity:0;animation:x-dbn-type .4s ease forwards}.x-dbn__lines code{padding:1px 6px;border-radius:4px;background:#FFE9DC;color:#C64A12;font:inherit}.x-dbn__lines .x-dbn__ok{color:#FF5D1D}@keyframes x-dbn-push{from{opacity:0;transform:translateY(-10px)}}@keyframes x-dbn-spin{to{transform:rotate(360deg)}}@keyframes x-dbn-draw{0%{stroke-dashoffset:60}60%,100%{stroke-dashoffset:0}}@keyframes x-dbn-type{to{opacity:1}}@media (max-width:900px){.x-dbn__grid{grid-template-columns:1fr;width:100%}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:auto}.x-dbn__c--wide{min-height:330px}.x-dbn__c--ai{flex-direction:column;align-items:stretch}.x-dbn__list li{grid-template-columns:1fr auto}.x-dbn__list li span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){.x-dbn__list li,.x-dbn__list li em i,.x-dbn__shield svg{animation:none}.x-dbn__lines div{animation:none;opacity:1}}.x-ctg{position:relative;width:100%;height:520px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate}.x-ctg__dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,236,214,.34) 1px,transparent 1.3px);background-size:6px 6px;animation:x-ctg-shim 6s ease-in-out infinite}.x-ctg__glow{position:absolute;left:50%;bottom:-120px;z-index:-1;width:640px;height:300px;border-radius:50%;background:radial-gradient(closest-side,#FFF6D8 0%,#FFD98A 34%,rgba(255,160,70,.5) 62%,rgba(255,93,29,0) 100%);transform:translateX(-50%);animation:x-ctg-breathe 5.5s ease-in-out infinite}.x-ctg__tile{position:absolute;display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:rgba(255,255,255,.14);box-shadow:0 10px 24px -14px rgba(120,30,0,.6);transform:rotate(var(--r));animation:x-ctg-float 7s ease-in-out infinite}.x-ctg__tile svg{width:24px;height:24px}.x-ctg__in{position:relative;display:flex;flex-direction:column;align-items:center;padding:120px 24px 0;text-align:center}.x-ctg h2{margin:0;font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-.015em}.x-ctg p{margin:22px 0 0;max-width:560px;font-size:16.5px;line-height:1.55;opacity:.95}.x-ctg__btns{display:flex;gap:10px;margin-top:32px}.x-ctg__btns a{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;transition:transform .25s,background .25s}.x-ctg__btns svg{width:15px;height:15px}.x-ctg__b1{background:#fff;color:#1d1d1d}.x-ctg__b2{background:rgba(255,255,255,.18);color:#fff}.x-ctg__btns a:hover{transform:translateY(-2px)}.x-ctg__b2:hover{background:rgba(255,255,255,.28)}.x-ctg__strip{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;overflow:hidden;background:rgba(214,64,8,.55)}.x-ctg__run{display:flex;width:max-content;animation:x-ctg-run 26s linear infinite}.x-ctg__run span{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:14.5px;white-space:nowrap}.x-ctg__run svg{width:16px;height:16px}@keyframes x-ctg-float{50%{transform:rotate(var(--r)) translateY(-12px)}}@keyframes x-ctg-run{to{transform:translateX(-50%)}}@keyframes x-ctg-shim{50%{opacity:.55}}@keyframes x-ctg-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-ctg{height:600px}.x-ctg__in{padding-top:130px}.x-ctg__btns{flex-direction:column;align-self:stretch}.x-ctg__btns a{justify-content:center}.x-ctg__tile{width:46px;height:46px}.x-ctg__tile svg{width:18px;height:18px}.x-ctg__tile:nth-child(n+5){display:none}}@media (prefers-reduced-motion:reduce){.x-ctg__tile,.x-ctg__run,.x-ctg__dots,.x-ctg__glow{animation:none}.x-ctg__btns a{transition:none}}.x-sft{width:100%;box-sizing:border-box;padding:40px 32px 28px;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;background:#fff}.x-sft a{color:inherit;text-decoration:none}.x-sft__mark{display:inline-flex;align-items:center;gap:8px}.x-sft__mark svg{width:26px;height:26px}.x-sft__mark b{font-size:17px;font-weight:700;letter-spacing:.08em}.x-sft__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 20px;margin:26px 0 0 18%}.x-sft__cols p{margin:0 0 12px;font-size:12.5px;color:#888}.x-sft__cols ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}.x-sft__cols a{font-size:14.5px;transition:color .2s}.x-sft__cols a:hover{color:#FF5D1D}.x-sft__legal{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:18px;border-top:1px solid #EFEFEF;font-size:12.5px;color:#777}.x-sft__legal nav{display:flex;flex-wrap:wrap;gap:18px}.x-sft__legal a:hover{color:#262626}@media (max-width:640px){.x-sft{padding:32px 18px 24px}.x-sft__cols{grid-template-columns:1fr 1fr;margin-left:0}.x-sft__legal{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){.x-sft__cols a{transition:none}}</style>
</head>
<body>
…
订阅 Builder 查看完整源码。查看价格

配套主题

配套图标 · 14 个

在图标库中查看全部

包含的组件

Tabbed Logo Testimonial

Dot Matrix Glow Hero

Dotted Globe Features

Chaos Versus Ship Split

Segmented Pricing Tiers

Live Deploy Bento

Floating Tile CTA Banner

更多模板

查看全部

念成 AI 应用构建器首页

AI 生成平台首页

知衡 AI 研究公司首页

AI 产品首页

墨格 团队 AI 工作台官网

SaaS 落地页

棱页 设计提示词库首页

AI 产品首页

潮引 获客智能体官网

AI 产品首页

厚土 创意工作室首页

作品集

随贴 Mac 剪贴板历史官网

Mac 应用落地页

澄榜 应用市场情报首页

SaaS 落地页

砚白 独立设计师作品集

作品集

版拾 设计参考库官网

SaaS 落地页

器枢 智能体工具接入平台首页

开发者工具首页

燃帧 AI 视频创作首页

AI 生成平台首页

Nook Mac 应用官网

Mac 应用落地页