Here's the full file. I went with a deep-night glass look: indigo and teal orbs, a serif display face, a floating pill nav, and Studio lifted above the other two plans.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lull — Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
<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=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'ui-sans-serif', 'system-ui'],
serif: ['"Instrument Serif"', 'ui-serif', 'Georgia'],
},
},
},
};
</script>
<style>
:root { --ease: cubic-bezier(0.32, 0.72, 0, 1); }
body { background: #05060a; }
/* Scroll reveal: transform / opacity / blur only */
.reveal {
opacity: 0;
transform: translateY(48px);
filter: blur(10px);
transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* Slow drifting orbs */
@keyframes drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
.orb { animation: drift 18s var(--ease) infinite; }
/* Mobile menu */
.menu-overlay { opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
.menu-link { opacity: 0; transform: translateY(48px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.menu-open .menu-link { opacity: 1; transform: none; }
.menu-open .menu-link:nth-child(1) { transition-delay: 100ms; }
.menu-open .menu-link:nth-child(2) { transition-delay: 150ms; }
.menu-open .menu-link:nth-child(3) { transition-delay: 200ms; }
.menu-open .menu-link:nth-child(4) { transition-delay: 250ms; }
.menu-open .bar1 { transform: translateY(3px) rotate(45deg); }
.menu-open .bar2 { transform: translateY(-3px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.reveal, .menu-link { transition: none; opacity: 1; transform: none; filter: none; }
.orb { animation: none; }
}
</style>
</head>
<body class="font-sans text-slate-300 antialiased selection:bg-indigo-300/30 selection:text-white">
<!-- ============ NAV (floating glass island) ============ -->
<header id="top" class="fixed inset-x-0 top-0 z-40 flex justify-center px-4 pt-6">
<nav class="flex w-full max-w-xl items-center justify-between rounded-full border border-white/10 bg-white/[0.04] py-2 pl-6 pr-2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.08)] backdrop-blur-2xl md:w-max md:max-w-none md:gap-10">
<a href="#top" class="font-serif text-2xl tracking-tight text-white">Lull<span class="text-indigo-300">.</span></a>
<ul class="hidden items-center gap-8 text-[13px] font-medium text-slate-400 md:flex">
<li><a class="transition-colors duration-500 hover:text-white" style="transition-timing-function:var(--ease)" href="#">Sessions</a></li>
<li><a class="transition-colors duration-500 hover:text-white" style="transition-timing-function:var(--ease)" href="#">Sleep</a></li>
<li><a class="text-white" href="#pricing">Pricing</a></li>
<li><a class="transition-colors duration-500 hover:text-white" style="transition-timing-function:var(--ease)" href="#">Journal</a></li>
</ul>
<div class="flex items-center gap-2">
<a href="#pricing" class="hidden rounded-full bg-white px-5 py-2.5 text-[13px] font-medium text-slate-900 transition-transform duration-500 hover:scale-[1.03] active:scale-[0.98] md:inline-block" style="transition-timing-function:var(--ease)">Get Lull</a>
<button id="menuBtn" aria-label="Toggle menu" aria-expanded="false" class="relative flex h-10 w-10 items-center justify-center rounded-full bg-white/10 md:hidden">
<span class="bar1 absolute h-px w-4 -translate-y-[3px] bg-white transition-transform duration-500" style="transition-timing-function:var(--ease)"></span>
<span class="bar2 absolute h-px w-4 translate-y-[3px] bg-white transition-transform duration-500" style="transition-timing-function:var(--ease)"></span>
</button>
</div>
</nav>
</header>
<!-- Mobile overlay -->
<div id="menu" class="menu-overlay fixed inset-0 z-30 flex flex-col justify-center bg-black/80 px-8 backdrop-blur-3xl md:hidden">
<a class="menu-link font-serif text-6xl text-white" href="#">Sessions</a>
<a class="menu-link mt-2 font-serif text-6xl text-white" href="#">Sleep</a>
<a class="menu-link mt-2 font-serif text-6xl text-white" href="#pricing">Pricing</a>
<a class="menu-link mt-2 font-serif text-6xl text-white" href="#">Journal</a>
</div>
<!-- ============ HERO ============ -->
<section class="relative isolate flex min-h-[100dvh] items-center justify-center overflow-hidden px-4 py-32">
<div class="pointer-events-none absolute inset-0 -z-10">
<div class="orb absolute -left-32 top-1/4 h-[36rem] w-[36rem] rounded-full bg-indigo-600/25 blur-[140px]"></div>
<div class="orb absolute -right-24 bottom-0 h-[32rem] w-[32rem] rounded-full bg-teal-500/15 blur-[140px]" style="animation-delay:-6s"></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<span class="reveal inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-indigo-200">
<span class="h-1 w-1 rounded-full bg-teal-300"></span> Meditation, unhurried
</span>
<h1 class="reveal mt-8 font-serif text-6xl leading-[0.95] tracking-tight text-white sm:text-7xl md:text-8xl" style="--d:100ms">
Quiet the noise.<br /><span class="italic text-indigo-200/90">Find the pause.</span>
</h1>
<p class="reveal mx-auto mt-8 max-w-xl text-base font-light leading-relaxed text-slate-400 md:text-lg" style="--d:200ms">
Guided breathwork, sleep soundscapes and ten-minute resets, shaped around the hour you actually have.
</p>
<!-- Primary CTA: button-in-button -->
<div class="reveal mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row" style="--d:300ms">
<a href="#pricing" class="group inline-flex items-center gap-4 rounded-full bg-white py-2 pl-7 pr-2 text-sm font-medium text-slate-900 shadow-[0_20px_60px_-20px_rgba(165,180,252,0.45)] transition-transform duration-700 hover:scale-[1.02] active:scale-[0.98]" style="transition-timing-function:var(--ease)">
Begin your first session
<span class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 text-white transition-transform duration-700 group-hover:-translate-y-[1px] group-hover:translate-x-1 group-hover:scale-105" style="transition-timing-function:var(--ease)">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
</span>
</a>
<a href="#pricing" class="rounded-full px-6 py-3 text-sm font-medium text-slate-400 transition-colors duration-500 hover:text-white" style="transition-timing-function:var(--ease)">See plans</a>
</div>
</div>
</section>
<!-- ============ PRICING ============ -->
<section id="pricing" class="relative isolate overflow-hidden px-4 py-32 md:py-40">
<div class="pointer-events-none absolute inset-0 -z-10">
<div class="orb absolute left-1/2 top-1/3 h-[40rem] w-[40rem] -translate-x-1/2 rounded-full bg-indigo-500/10 blur-[160px]"></div>
</div>
<div class="mx-auto max-w-6xl">
<!-- Heading -->
<div class="mx-auto max-w-2xl text-center">
<span class="reveal inline-block rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-indigo-200">Pricing</span>
<h2 class="reveal mt-6 font-serif text-5xl leading-none tracking-tight text-white md:text-7xl" style="--d:100ms">
Choose your <span class="italic text-indigo-200/90">stillness</span>
</h2>
<p class="reveal mt-6 text-base font-light text-slate-400" style="--d:200ms">Start free. Upgrade when the practice becomes a habit. Cancel in two taps.</p>
<!-- Billing toggle -->
<div class="reveal mt-10 inline-flex items-center gap-4 text-[13px]" style="--d:300ms">
<span id="lblMonthly" class="text-white transition-colors duration-500">Monthly</span>
<button id="billing" role="switch" aria-checked="false" aria-label="Bill yearly" class="relative h-8 w-14 rounded-full border border-white/10 bg-white/5 p-1">
<span id="knob" class="block h-6 w-6 rounded-full bg-white transition-transform duration-700" style="transition-timing-function:var(--ease)"></span>
</button>
<span id="lblYearly" class="text-slate-500 transition-colors duration-500">Yearly <span class="ml-1 rounded-full bg-teal-300/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-widest text-teal-200">−25%</span></span>
</div>
</div>
<!-- Plans -->
<div class="mt-20 grid grid-cols-1 items-start gap-8 md:mt-28 md:grid-cols-12 md:gap-6 lg:gap-10">
<!-- FREE -->
<div class="reveal md:col-span-4 md:mt-16" style="--d:100ms">
<div class="rounded-[2rem] border border-white/10 bg-white/[0.03] p-1.5">
<div class="rounded-[calc(2rem-0.375rem)] bg-[#0a0c13] p-8 shadow-[inset_0_1px_1px_rgba(255,255,255,0.08)]">
<p class="text-[10px] font-medium uppercase tracking-[0.2em] text-slate-500">Free</p>
<div class="mt-6 flex items-baseline gap-2">
<span class="font-serif text-6xl text-white">$0</span>
<span class="text-sm text-slate-500">forever</span>
</div>
<p class="mt-4 text-sm font-light leading-relaxed text-slate-400">A gentle way in. Enough to build the first week of a habit.</p>
<a href="#" class="group mt-8 flex items-center justify-between rounded-full border border-white/10 bg-white/5 py-2 pl-6 pr-2 text-sm font-medium text-white transition-transform duration-700 hover:bg-white/10 active:scale-[0.98]" style="transition-timing-function:var(--ease)">
Start for free
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-white/10 transition-transform duration-700 group-hover:-translate-y-[1px] group-hover:translate-x-1 group-hover:scale-105" style="transition-timing-function:var(--ease)">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
</span>
</a>
<ul class="mt-10 space-y-4 text-sm font-light text-slate-300">
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>20 guided sessions</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Daily 5-minute breath</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Basic streak tracking</li>
</ul>
</div>
</div>
</div>
<!-- STUDIO (featured) -->
<div class="reveal md:col-span-4" style="--d:200ms">
<div class="rounded-[2rem] border border-indigo-300/25 bg-indigo-300/[0.06] p-1.5 shadow-[0_40px_120px_-40px_rgba(129,140,248,0.45)]">
<div class="relative overflow-hidden rounded-[calc(2rem-0.375rem)] bg-[#0d1020] p-8 pb-10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]">
<div class="pointer-events-none absolute -top-24 left-1/2 h-48 w-72 -translate-x-1/2 rounded-full bg-indigo-400/20 blur-[80px]"></div>
<div class="relative flex items-center justify-between">
<p class="text-[10px] font-medium uppercase tracking-[0.2em] text-indigo-200">Studio</p>
<span class="rounded-full bg-indigo-300/15 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-indigo-100">Most chosen</span>
</div>
<div class="relative mt-6 flex items-baseline gap-2">
<span class="font-serif text-7xl text-white">$<span class="price" data-m="12" data-y="9">12</span></span>
<span class="text-sm text-slate-400">/ month</span>
</div>
<p class="relative mt-1 h-4 text-xs text-slate-500"><span class="note" data-m="Billed monthly" data-y="Billed $108 yearly">Billed monthly</span></p>
<p class="relative mt-4 text-sm font-light leading-relaxed text-slate-300">The full library, every sleep story, and a practice that adapts to you.</p>
<a href="#" class="group relative mt-8 flex items-center justify-between rounded-full bg-white py-2 pl-6 pr-2 text-sm font-medium text-slate-900 transition-transform duration-700 hover:scale-[1.02] active:scale-[0.98]" style="transition-timing-function:var(--ease)">
Try Studio free for 14 days
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-slate-900 text-white transition-transform duration-700 group-hover:-translate-y-[1px] group-hover:translate-x-1 group-hover:scale-105" style="transition-timing-function:var(--ease)">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
</span>
</a>
<ul class="relative mt-10 space-y-4 text-sm font-light text-slate-200">
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Everything in Free</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Full library of 900+ sessions</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Sleep stories & soundscapes</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Offline downloads</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Private journal & mood insights</li>
</ul>
</div>
</div>
</div>
<!-- TEAM -->
<div class="reveal md:col-span-4 md:mt-16" style="--d:300ms">
<div class="rounded-[2rem] border border-white/10 bg-white/[0.03] p-1.5">
<div class="rounded-[calc(2rem-0.375rem)] bg-[#0a0c13] p-8 shadow-[inset_0_1px_1px_rgba(255,255,255,0.08)]">
<p class="text-[10px] font-medium uppercase tracking-[0.2em] text-slate-500">Team</p>
<div class="mt-6 flex items-baseline gap-2">
<span class="font-serif text-6xl text-white">$<span class="price" data-m="8" data-y="6">8</span></span>
<span class="text-sm text-slate-500">/ seat / month</span>
</div>
<p class="mt-4 text-sm font-light leading-relaxed text-slate-400">For teams who want calmer meetings and fewer burnt-out Fridays.</p>
<a href="#" class="group mt-8 flex items-center justify-between rounded-full border border-white/10 bg-white/5 py-2 pl-6 pr-2 text-sm font-medium text-white transition-transform duration-700 hover:bg-white/10 active:scale-[0.98]" style="transition-timing-function:var(--ease)">
Talk to us
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-white/10 transition-transform duration-700 group-hover:-translate-y-[1px] group-hover:translate-x-1 group-hover:scale-105" style="transition-timing-function:var(--ease)">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
</span>
</a>
<ul class="mt-10 space-y-4 text-sm font-light text-slate-300">
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Everything in Studio</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Shared team sessions</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Anonymous wellbeing reports</li>
<li class="flex gap-3"><svg class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>SSO & admin controls</li>
</ul>
</div>
</div>
</div>
</div>
<p class="reveal mt-16 text-center text-xs font-light text-slate-500">All plans include iOS, Android and web. Prices in USD.</p>
</div>
</section>
<script>
// Scroll reveals
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
// Mobile menu
const btn = document.getElementById('menuBtn');
const toggleMenu = (open) => {
document.body.classList.toggle('menu-open', open);
btn.setAttribute('aria-expanded', String(open));
};
btn.addEventListener('click', () => toggleMenu(!document.body.classList.contains('menu-open')));
document.querySelectorAll('#menu a').forEach((a) => a.addEventListener('click', () => toggleMenu(false)));
// Billing toggle
const billing = document.getElementById('billing');
const knob = document.getElementById('knob');
const lm = document.getElementById('lblMonthly');
const ly = document.getElementById('lblYearly');
billing.addEventListener('click', () => {
const yearly = billing.getAttribute('aria-checked') !== 'true';
billing.setAttribute('aria-checked', String(yearly));
knob.style.transform = yearly ? 'translateX(24px)' : 'translateX(0)';
lm.className = lm.className.replace(/text-(white|slate-500)/, yearly ? 'text-slate-500' : 'text-white');
ly.className = ly.className.replace(/text-(white|slate-500)/, yearly ? 'text-white' : 'text-slate-500');
document.querySelectorAll('.price').forEach((p) => { p.textContent = yearly ? p.dataset.y : p.dataset.m; });
document.querySelectorAll('.note').forEach((n) => { n.textContent = yearly ? n.dataset.y : n.dataset.m; });
});
</script>
</body>
</html>
Hero button: a white pill with a dark circular arrow nested flush in its right padding. On hover the circle slides diagonally and scales up slightly. On press the whole button scales down to 0.98. The same pattern is used on all three plan CTAs. Studio's is solid white and the other two are ghost versions.
Pricing layout: Studio sits higher than Free and Team and has a soft indigo glow. All three cards use a nested bezel (an outer hairline shell around an inner card).
Billing toggle: the toggle switches between monthly and yearly prices. The yearly prices are $9 for Studio and $6 per seat for Team, which is 25% off. The note under Studio's price reads "Billed $108 yearly".
Motion and mobile: Elements fade up on scroll, and the mobile menu has a staggered link reveal. It respects prefers-reduced-motion. Below 768px the cards stack into a single column, and the nav collapses to a hamburger that morphs into an X.
Placeholder content: the prices, the 14-day trial and the feature lists are invented.
I haven't opened this in a browser. Tailwind loads from the CDN and the fonts from Google Fonts, so you need to be online to see it as designed.
Test run: a dark pricing page for a fictional app, one HTML file. The output avoided the banned fonts and shadows and used the nested-card and button-in-button patterns, but the model did not open it in a browser. It uses Instrument Serif, which design-taste-frontend bans as a default, so the two Skills disagree on that.
它做什麼
一份前端風格配方。它訂了一份嚴格的反模式清單(不用 Inter、Roboto、Arial,不用粗線預設圖示,不用生硬的陰影,不用平淡的三欄網格,不用 linear 或 ease-in-out 轉場),還有一個「變化引擎」:智能體先默默選定一種氛圍原型(空靈玻璃、編輯奢華、柔和結構主義)與一種版面原型(不對稱便當格、Z 軸層疊、編輯式分欄),避免每次都做成一樣。它規定了元件模式:外殼包內核的「雙層邊框」、帶巢狀圓形箭頭的膠囊按鈕、小標籤、很大的區塊留白。它也涵蓋動態(自訂 cubic-bezier、會變形為浮層的懸浮膠囊導覽、用 IntersectionObserver 做的捲動淡入上移),以及只對 transform 與 opacity 做動畫、不讓模糊作用於捲動內容等效能規則。
輸出
依所選風格寫出的前端程式碼(React、Tailwind 或 HTML),交付前對照十一項清單檢查。
適合什麼場景
想要精緻、高端質感的行銷頁與產品站。它很有主見,適合追求高端外觀,不適合中性或無障礙優先的風格。
低風險:純指令檔,沒有腳本,不連網,不寫檔;它產生前端程式碼,但不執行。風格規則帶有很強的主觀傾向,並會要求使用可能沒有安裝的高端字體,請檢查字體備援。已用一個深色定價頁試用一次:避開了被禁的字體與陰影,用上巢狀卡片與按鈕內嵌圖示,但沒有在瀏覽器中開啟,並且選了 Instrument Serif,而 design-taste-frontend 把它列為預設禁用。作者 Leonxlnx,MIT 授權。