ホーム / Skills / Web・UIデザイン / ハイエンド・ビジュアルデザイン High-End Visual Design
Web・UIデザイン

ハイエンド・ビジュアルデザイン 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 を使わない、太線の既定アイコンを使わない、きつい落ち影を使わない、味気ない3列グリッドを使わない、linear や ease-in-out の遷移を使わない)に加え、「バリエーションエンジン」があります。エージェントは雰囲気の型(エーテリアルガラス、エディトリアルなラグジュアリー、ソフトな構造主義)とレイアウトの型(非対称ベント、Z 軸のカスケード、エディトリアル分割)を黙って1つずつ選び、毎回同じ見た目になるのを避けます。コンポーネントの型も定義します。外殻の中に内側のコアを置く「ダブルベゼル」、円形の矢印を入れ子にしたピルボタン、小さなタグ、大きなセクション余白などです。モーション(独自の cubic-bezier、オーバーレイに変形する浮遊ピルナビ、IntersectionObserver によるスクロールのフェードアップ)や、transform と opacity だけをアニメーションさせる、スクロールする領域にぼかしをかけないといったパフォーマンス規則も含みます。

出力

選んだスタイルで書かれたフロントエンドコード(React、Tailwind または HTML)。納品前に11項目のリストで確認します。

こんな場面に

洗練された高級感のあるマーケティングページやプロダクトサイト。主張の強いスタイルなので、高級感のある見た目には向きますが、中立的な見た目やアクセシビリティ最優先の用途には向きません。

補足とリスク

低リスク:指示のみのファイルで、スクリプトはなく、ネットワークにも接続せず、ファイルも書き込みません。フロントエンドコードを生成しますが実行はしません。スタイルのルールは主張が強く、未インストールかもしれない高級フォントを求めるため、フォールバックを確認してください。ダークな料金ページで一度試用し、禁止フォントや影を避け、入れ子カードとボタン内アイコンの型を使いましたが、ブラウザでは開いておらず、design-taste-frontend が既定で禁止している Instrument Serif を選んでいました。作者 Leonxlnx、MIT。

SKILL.md 原文パッケージ内 2 ファイル