首页 / Skills / 网页与界面设计 / 高端视觉设计 High-End Visual Design
网页与界面设计

高端视觉设计 High-End Visual Design

LeonxlnxMITSkill 语言: 英文
协议已核对不含脚本低风险
演示真实运行记录 · claude-sonnet-5-5 · 2026年10月
Build a pricing section (three plans: Free, Studio, Team) for a fictional meditation app called "Lull", as one self-contained HTML file with Tailwind via CDN. Dark theme. Include the nav bar and the hero CTA button so I can see the button style. Output the full file.
Skill: high-end-visual-design

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 &amp; 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 &amp; 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 &amp; 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 协议。

SKILL.md 原文包内共 2 个文件