Inicio / Skills / Diseño web e interfaces / High-End Visual Design
Diseño web e interfaces

High-End Visual Design

LeonxlnxMITIdioma del Skill: Inglés
Licencia verificadaSin scriptsRiesgo bajo
DemostraciónEjecución real · claude-sonnet-5-5 · octubre de 2026
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.

Qué hace

Una receta de estilo para trabajo de front-end. Establece una lista estricta de antipatrones (sin Inter, Roboto ni Arial, sin iconos predeterminados gruesos, sin sombras proyectadas duras, sin cuadrículas simples de tres columnas, sin transiciones lineales ni ease-in-out) y un «motor de variación» en el que el agente elige en silencio un arquetipo de estilo (cristal etéreo, lujo editorial, estructuralismo suave) y un arquetipo de maquetación (bento asimétrico, cascada en el eje Z, split editorial) para no repetirse. Define patrones de componentes: un «doble bisel» de una carcasa exterior alrededor de un núcleo interior, botones tipo píldora con una flecha circular anidada, etiquetas «eyebrow» y un amplio padding en las secciones. También cubre movimiento (curvas cubic-bezier personalizadas, una nav flotante tipo píldora que se transforma en overlay, apariciones con fundido al hacer scroll mediante IntersectionObserver) y reglas de rendimiento como animar solo transform y opacity y mantener el blur fuera del contenido que se desplaza.

Salida

Código de front-end (React, Tailwind o HTML) en el estilo elegido, revisado con una lista de once puntos antes de la entrega.

Ideal para

Páginas de marketing y sitios de producto que deben percibirse pulidos y de alta gama. Tiene una postura marcada, así que encaja con una estética premium en lugar de una neutral o con prioridad en la accesibilidad.

Notas y riesgos

Riesgo bajo: solo instrucciones sin scripts, sin acceso a la red y sin escritura de archivos; genera código de front-end y no lo ejecuta. Las reglas de estilo son opiniones firmes y solicita tipografías premium que pueden no estar instaladas, así que revisa los fallbacks. Se probó una vez en una página de precios con tema oscuro: evitó las tipografías y sombras prohibidas y usó los patrones de tarjeta anidada y de botón dentro de botón, pero no se abrió en un navegador y eligió Instrument Serif, que design-taste-frontend prohíbe como valor predeterminado. Por Leonxlnx, MIT.

SKILL.md original2 archivos en este paquete