PageSourceSearch

https://webmimic.com/features

html webmimic.com collected 2026-10-02 01:48:15 UTC 62,432 bytes, 1 lines download raw bytes

1<!DOCTYPE html><!--TiwmrlRsVmE___9L6_lwV--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="https://creatorstoolbox.com/badges/featured-on-creators-toolbox.svg?v=brand-supplied-20260927-4"/><link rel="stylesheet" href="/_next/static/chunks/34d933785a17edf3.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/f163d9b1826fa528.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/14a0ee43b0f847a3.js"/>
1<script src="/_next/static/chunks/efaa58374b957228.js" async=""></script>
1<script src="/_next/static/chunks/bbf89c5280eb1f0c.js" async=""></script>
1<script src="/_next/static/chunks/c16efd9677d8c131.js" async=""></script>
1<script src="/_next/static/chunks/50321753022f7ccb.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-aa2b7267c849d6ca.js" async=""></script>
1<script src="/_next/static/chunks/d96012bcfc98706a.js" async=""></script>
1<script src="/_next/static/chunks/2532f69a4166d704.js" async=""></script>
1<script src="/_next/static/chunks/761a087da77e91bc.js" async=""></script>
1<script src="/_next/static/chunks/d495d0406869b1e8.js" async=""></script>
1<script src="/_next/static/chunks/ce4099ecc5288731.js" async=""></script>
1<script src="/_next/static/chunks/3f62c15bfd071855.js" async=""></script>
1<script src="/_next/static/chunks/687b07b79ab59203.js" async=""></script>
1<script src="https://clerk.webmimic.com/npm/@clerk/clerk-js@6/dist/clerk.browser.js" data-clerk-js-script="true" async="" crossorigin="anonymous" data-clerk-publishable-key="pk_live_Y2xlcmsud2VibWltaWMuY29tJA"></script>
1<meta name="next-size-adjust" content=""/><link rel="preload" href="https://clerk.webmimic.com/npm/@clerk/ui@1/dist/ui.browser.js" as="script" crossorigin="anonymous"/><title>webmimic — Extract Design Systems, Clone GSAP &amp; Framer Motion | Chrome Extension</title><meta name="description" content="Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma &amp; Google Stitch. Clone GSAP, Framer Motion &amp; Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating."/><meta name="author" content="webmimic"/><meta name="keywords" content="extract design system from website,design tokens chrome extension,design.md generator,WCAG 2.1 accessibility audit,clone GSAP animations,Framer Motion extractor,Lottie animation extractor,Tailwind config export,Figma design system export,AI component cloner,reverse engineer website design,Google Stitch design system,Claude design skills"/><meta name="creator" content="webmimic"/><meta name="robots" content="index, follow"/><link rel="canonical" href="https://webmimic.com"/><meta property="og:title" content="webmimic — Extract Design Systems, Clone GSAP &amp; Framer Motion"/><meta property="og:description" content="Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma &amp; Google Stitch. Clone GSAP, Framer Motion &amp; Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating."/><meta property="og:url" content="https://webmimic.com"/><meta property="og:site_name" content="webmimic"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://webmimic.com/og-card.png?v=3"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="webmimic — extract design systems, design tokens, and animations from any website"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="webmimic — Extract Design Systems, Clone GSAP &amp; Framer Motion"/><meta name="twitter:description" content="Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma &amp; Google Stitch. Clone GSAP, Framer Motion &amp; Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating."/><meta name="twitter:image" content="https://webmimic.com/og-card.png?v=3"/><link rel="icon" href="/favicon.ico?favicon.33ba039d.ico" sizes="32x32" type="image/x-icon"/>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased"><div hidden=""><!--$--><!--/$--></div><div class="min-h-screen bg-white text-[#090b12]"><header class="fixed top-0 left-0 right-0 z-50 transition-[background-color,border-color,box-shadow] duration-300 bg-transparent"><div class="h-[66px] flex items-center justify-between text-[14px] mx-auto w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16 text-[#090b12]"><a class="inline-flex items-center gap-[8px]" href="/"><img alt="webmimic — design system extraction Chrome extension" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="rounded-[6px]" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75"/><span class="font-extrabold text-xl tracking-tight">Webmimic</span></a><nav class="hidden md:flex gap-11 ml-[105px] text-[#111827]"><a href="/features" class="hover:text-[#1463ff] transition-colors">Features</a><a href="/motion" class="hover:text-[#1463ff] transition-colors">Motion</a><a href="/design-systems" class="hover:text-[#1463ff] transition-colors">Design Systems</a><a href="/about" class="hover:text-[#1463ff] transition-colors">About</a><a href="/credits" class="hover:text-[#1463ff] transition-colors">Pricing</a><a href="/tutorials" class="hover:text-[#1463ff] transition-colors">Tutorials</a></nav><div class="flex min-h-[38px] min-w-[120px] items-center justify-end gap-[30px]"><a href="/sign-in" class="min-h-[38px] inline-flex items-center gap-[10px] px-[18px] rounded-lg text-[12px] font-bold whitespace-nowrap bg-[#05070a] text-white shadow-[0_10px_20px_rgba(0,0,0,.18)]">Sign in<!-- --> <span>→</span></a></div></div></header><main class="pt-[66px]"><section class="relative overflow-hidden"><div aria-hidden="true" class="absolute inset-0 bg-[url(&#x27;/features/bg-image.jpg&#x27;)] bg-cover bg-center bg-no-repeat"></div><div aria-hidden="true" class="absolute inset-0 pointer-events-none" style="background:radial-gradient(ellipse 52% 42% at 4% 6%, #ffffff 0%, rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.55) 52%, transparent 78%), radial-gradient(ellipse 52% 42% at 96% 6%, #ffffff 0%, rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.55) 52%, transparent 78%), linear-gradient(to top right, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.32) 28%, rgba(255,255,255,0.12) 48%, transparent 62%)"></div><div class="relative mx-auto py-16 sm:py-20 text-center w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="inline-flex items-center gap-2 h-[32px] px-4 rounded-full bg-[#f3f8ff] border border-[#e8f1ff] text-[12px] font-semibold text-[#1463ff] mb-6"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>All the tools you need to build faster with AI</div><h1 class="max-w-[860px] mx-auto text-[clamp(36px,5.5vw,56px)] leading-[1.02] tracking-[-0.045em] font-bold text-[#090b12] mb-5">Powerful Features for<br/>Designers &amp; Developers</h1><p class="max-w-[620px] mx-auto text-[#657185] text-[15px] sm:text-[16px] leading-[1.65] mb-8">Extract, inspect, clone and export anything from any website. Save hours of manual work and build better products, faster.</p><div class="flex flex-wrap items-center justify-center gap-3"><a href="#" class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[22px] rounded-lg bg-neutral-900 text-white text-[13px] font-bold shadow-[0_10px_20px_rgba(0,0,0,.18)] whitespace-nowrap hover:bg-neutral-700 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>Watch Full Demo</a><a href="#" class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[22px] rounded-lg text-[#171b24] text-[13px] font-bold whitespace-nowrap border border-[#dce3ee] bg-white shadow-[0_8px_18px_rgba(15,23,42,.05)] hover:border-[#c5d0e0] transition-colors"><span class="w-[18px] h-[18px] rounded-full relative inline-flex shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,.12)]" style="background:conic-gradient(#f7d44a 0 33%, #2fb660 0 66%, #ef4335 0 84%, #f7d44a 0)"><span class="absolute w-[6px] h-[6px] rounded-full bg-[#2c8dff] inset-[6px]"></span></span>Add to Chrome</a></div></div></section><section class="mx-auto mt-30 pb-30 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="flex flex-col gap-16 sm:gap-30"><article class="grid grid-cols-1 lg:grid-cols-[72px_minmax(0,1fr)_minmax(0,1.05fr)] gap-8 lg:gap-10 lg:items-stretch"><div class="hidden lg:flex flex-col items-center h-full min-h-full"><div class="w-[52px] h-[52px] rounded-[12px] bg-neutral-50 border border-neutral-100 flex items-center justify-center text-neutral-900 font-extrabold text-[13px] shadow-md shrink-0">01</div><div class="w-[2px] flex-1 mt-4 bg-[linear-gradient(to_bottom,#1463ff_0%,#dce8ff_100%)]"></div></div><div class="pt-1"><div class="lg:hidden mb-3">
1<span class="w-[40px] h-[40px] rounded-[10px] bg-[#f3f8ff] border border-[#e8f1ff] inline-flex items-center justify-center text-[#1463ff] text-[12px] font-bold">01</span></div><h2 class="flex items-center gap-3 text-[clamp(24px,3vw,30px)] leading-[1.08] tracking-[-0.035em] font-bold text-[#090b12] mb-3"><span class="w-[40px] h-[40px] rounded-[10px] bg-neutral-900 flex items-center justify-center shadow-[0_8px_20px_rgba(0,0,0,.15)] shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette text-white" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg></span>Assets, Colors &amp; Typography</h2><ul class="max-w-[520px] mb-5 space-y-2.5"><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Pull every visual asset from a page — images, SVGs, icons, and videos — in one scan.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Build a complete color palette with hex values, gradients, and usage context.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Extract font families, sizes, weights, line heights, and letter spacing automatically.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Download assets individually or export the full typography spec for your design system.</span></li></ul><div class="flex flex-wrap gap-2"><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Images</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">SVGs</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Videos</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Colors</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Typography</span></div></div><div class="relative w-full aspect-[16/10] rounded-[16px] overflow-hidden border border-[#dfe7f1] shadow-[0_20px_50px_rgba(15,23,42,.12)] bg-[#f3f5f9]"><img alt="Assets, Colors &amp; Typography" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 1024px) 100vw, 560px" srcSet="/_next/image?url=%2Flanding-page%2F1.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2F1.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2F1.png&amp;w=3840&amp;q=75"/><div class="absolute inset-0 bg-[rgba(9,11,18,.08)]"></div><button type="button" aria-label="Play demo for Assets, Colors &amp; Typography" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] rounded-full bg-neutral-900 border border-neutral-800 shadow-[0_12px_32px_rgba(15,23,42,.18)] flex items-center justify-center text-white hover:bg-neutral-700 hover:scale-105 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play ml-[3px]" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></button><span class="absolute bottom-4 right-4 px-[10px] py-[5px] rounded-[6px] bg-[rgba(9,11,18,.72)] text-white text-[11px] font-semibold">0:56</span></div></article><article class="grid grid-cols-1 lg:grid-cols-[72px_minmax(0,1fr)_minmax(0,1.05fr)] gap-8 lg:gap-10 lg:items-stretch"><div class="hidden lg:flex flex-col items-center h-full min-h-full"><div class="w-[52px] h-[52px] rounded-[12px] bg-neutral-50 border border-neutral-100 flex items-center justify-center text-neutral-900 font-extrabold text-[13px] shadow-md shrink-0">02</div><div class="w-[2px] flex-1 mt-4 bg-[linear-gradient(to_bottom,#1463ff_0%,#dce8ff_100%)]"></div></div><div class="pt-1"><div class="lg:hidden mb-3">
1<span class="w-[40px] h-[40px] rounded-[10px] bg-[#f3f8ff] border border-[#e8f1ff] inline-flex items-center justify-center text-[#1463ff] text-[12px] font-bold">02</span></div><h2 class="flex items-center gap-3 text-[clamp(24px,3vw,30px)] leading-[1.08] tracking-[-0.035em] font-bold text-[#090b12] mb-3"><span class="w-[40px] h-[40px] rounded-[10px] bg-neutral-900 flex items-center justify-center shadow-[0_8px_20px_rgba(0,0,0,.15)] shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml text-white" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></span>Element Code Extraction</h2><ul class="max-w-[520px] mb-5 space-y-2.5"><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Hover any element to inspect its live CSS — computed styles, not just static rules.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Copy clean HTML markup with classes and structure preserved.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>See box model dimensions, spacing, borders, and positioning at a glance.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Grab inline styles and inherited properties without digging through DevTools.</span></li></ul><div class="flex flex-wrap gap-2"><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">CSS</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">HTML</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Inline Styles</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Box Model</span></div></div><div class="relative w-full aspect-[16/10] rounded-[16px] overflow-hidden border border-[#dfe7f1] shadow-[0_20px_50px_rgba(15,23,42,.12)] bg-[#f3f5f9]"><img alt="Element Code Extraction" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 1024px) 100vw, 560px" srcSet="/_next/image?url=%2Flanding-page%2F2.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2F2.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2F2.png&amp;w=3840&amp;q=75"/><div class="absolute inset-0 bg-[rgba(9,11,18,.08)]"></div><button type="button" aria-label="Play demo for Element Code Extraction" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] rounded-full bg-neutral-900 border border-neutral-800 shadow-[0_12px_32px_rgba(15,23,42,.18)] flex items-center justify-center text-white hover:bg-neutral-700 hover:scale-105 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play ml-[3px]" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></button><span class="absolute bottom-4 right-4 px-[10px] py-[5px] rounded-[6px] bg-[rgba(9,11,18,.72)] text-white text-[11px] font-semibold">1:12</span></div></article><article class="grid grid-cols-1 lg:grid-cols-[72px_minmax(0,1fr)_minmax(0,1.05fr)] gap-8 lg:gap-10 lg:items-stretch"><div class="hidden lg:flex flex-col items-center h-full min-h-full"><div class="w-[52px] h-[52px] rounded-[12px] bg-neutral-50 border border-neutral-100 flex items-center justify-center text-neutral-900 font-extrabold text-[13px] shadow-md shrink-0">03</div><div class="w-[2px] flex-1 mt-4 bg-[linear-gradient(to_bottom,#1463ff_0%,#dce8ff_100%)]"></div></div><div class="pt-1"><div class="lg:hidden mb-3">
1<span class="w-[40px] h-[40px] rounded-[10px] bg-[#f3f8ff] border border-[#e8f1ff] inline-flex items-center justify-center text-[#1463ff] text-[12px] font-bold">03</span></div><h2 class="flex items-center gap-3 text-[clamp(24px,3vw,30px)] leading-[1.08] tracking-[-0.035em] font-bold text-[#090b12] mb-3"><span class="w-[40px] h-[40px] rounded-[10px] bg-neutral-900 flex items-center justify-center shadow-[0_8px_20px_rgba(0,0,0,.15)] shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wand-sparkles text-white" aria-hidden="true"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></span>AI Component Cloner</h2><ul class="max-w-[520px] mb-5 space-y-2.5"><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Select any section on a page and let AI rebuild it as production-ready code.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Output clean React, Next.js, Vue, or plain HTML based on your stack.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Preserves layout, spacing, typography, and responsive behavior from the source.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Drop the generated component straight into your project — no manual cleanup.</span></li></ul><div class="flex flex-wrap gap-2"><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">React</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Next.js</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Vue</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">HTML</span></div></div><div class="relative w-full aspect-[16/10] rounded-[16px] overflow-hidden border border-[#dfe7f1] shadow-[0_20px_50px_rgba(15,23,42,.12)] bg-[#f3f5f9]"><img alt="AI Component Cloner" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 1024px) 100vw, 560px" srcSet="/_next/image?url=%2Flanding-page%2F3.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2F3.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2F3.png&amp;w=3840&amp;q=75"/><div class="absolute inset-0 bg-[rgba(9,11,18,.08)]"></div><button type="button" aria-label="Play demo for AI Component Cloner" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] rounded-full bg-neutral-900 border border-neutral-800 shadow-[0_12px_32px_rgba(15,23,42,.18)] flex items-center justify-center text-white hover:bg-neutral-700 hover:scale-105 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play ml-[3px]" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></button><span class="absolute bottom-4 right-4 px-[10px] py-[5px] rounded-[6px] bg-[rgba(9,11,18,.72)] text-white text-[11px] font-semibold">1:34</span></div></article><article class="grid grid-cols-1 lg:grid-cols-[72px_minmax(0,1fr)_minmax(0,1.05fr)] gap-8 lg:gap-10 lg:items-stretch"><div class="hidden lg:flex flex-col items-center h-full min-h-full"><div class="w-[52px] h-[52px] rounded-[12px] bg-neutral-50 border border-neutral-100 flex items-center justify-center text-neutral-900 font-extrabold text-[13px] shadow-md shrink-0">04</div><div class="w-[2px] flex-1 mt-4 bg-[linear-gradient(to_bottom,#1463ff_0%,#dce8ff_100%)]"></div></div><div class="pt-1"><div class="lg:hidden mb-3">
1<span class="w-[40px] h-[40px] rounded-[10px] bg-[#f3f8ff] border border-[#e8f1ff] inline-flex items-center justify-center text-[#1463ff] text-[12px] font-bold">04</span></div><h2 class="flex items-center gap-3 text-[clamp(24px,3vw,30px)] leading-[1.08] tracking-[-0.035em] font-bold text-[#090b12] mb-3"><span class="w-[40px] h-[40px] rounded-[10px] bg-neutral-900 flex items-center justify-center shadow-[0_8px_20px_rgba(0,0,0,.15)] shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check text-white" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg></span>WCAG 2.1 Accessibility Scan</h2><ul class="max-w-[520px] mb-5 space-y-2.5"><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Run a full-page audit against WCAG 2.1 guidelines in seconds.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Catch contrast failures, missing alt text, and improper heading hierarchy.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Check form labels, ARIA roles, keyboard navigation, and skip links.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Get a prioritized report with actionable fixes for each issue found.</span></li></ul><div class="flex flex-wrap gap-2"><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Contrast</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Alt Text</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Labels</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">ARIA</span></div></div><div class="relative w-full aspect-[16/10] rounded-[16px] overflow-hidden border border-[#dfe7f1] shadow-[0_20px_50px_rgba(15,23,42,.12)] bg-[#f3f5f9]"><img alt="WCAG 2.1 Accessibility Scan" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 1024px) 100vw, 560px" srcSet="/_next/image?url=%2Flanding-page%2F4.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2F4.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2F4.png&amp;w=3840&amp;q=75"/><div class="absolute inset-0 bg-[rgba(9,11,18,.08)]"></div><button type="button" aria-label="Play demo for WCAG 2.1 Accessibility Scan" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] rounded-full bg-neutral-900 border border-neutral-800 shadow-[0_12px_32px_rgba(15,23,42,.18)] flex items-center justify-center text-white hover:bg-neutral-700 hover:scale-105 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play ml-[3px]" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></button><span class="absolute bottom-4 right-4 px-[10px] py-[5px] rounded-[6px] bg-[rgba(9,11,18,.72)] text-white text-[11px] font-semibold">0:48</span></div></article><article class="grid grid-cols-1 lg:grid-cols-[72px_minmax(0,1fr)_minmax(0,1.05fr)] gap-8 lg:gap-10 lg:items-stretch"><div class="hidden lg:flex flex-col items-center h-full min-h-full"><div class="w-[52px] h-[52px] rounded-[12px] bg-neutral-50 border border-neutral-100 flex items-center justify-center text-neutral-900 font-extrabold text-[13px] shadow-md shrink-0">05</div><div class="w-[2px] flex-1 mt-4 bg-[linear-gradient(to_bottom,#1463ff_0%,#dce8ff_100%)]"></div></div><div class="pt-1"><div class="lg:hidden mb-3">
1<span class="w-[40px] h-[40px] rounded-[10px] bg-[#f3f8ff] border border-[#e8f1ff] inline-flex items-center justify-center text-[#1463ff] text-[12px] font-bold">05</span></div><h2 class="flex items-center gap-3 text-[clamp(24px,3vw,30px)] leading-[1.08] tracking-[-0.035em] font-bold text-[#090b12] mb-3"><span class="w-[40px] h-[40px] rounded-[10px] bg-neutral-900 flex items-center justify-center shadow-[0_8px_20px_rgba(0,0,0,.15)] shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clapperboard text-white" aria-hidden="true"><path d="m12.296 3.464 3.02 3.956"></path><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z"></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="m6.18 5.276 3.1 3.899"></path></svg></span>Animation Extractor &amp; AI Cloner</h2><ul class="max-w-[520px] mb-5 space-y-2.5"><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Detect Lottie, GSAP, and Framer Motion animations running on any page.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Preview animations in-panel before exporting or cloning.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Extract animation JSON, keyframes, and timing data for reuse.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Use AI to recreate the animated component with matching motion in your codebase.</span></li></ul><div class="flex flex-wrap gap-2"><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Lottie</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">GSAP</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Framer Motion</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">JSON</span></div></div><div class="relative w-full aspect-[16/10] rounded-[16px] overflow-hidden border border-[#dfe7f1] shadow-[0_20px_50px_rgba(15,23,42,.12)] bg-[#f3f5f9]"><img alt="Animation Extractor &amp; AI Cloner" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 1024px) 100vw, 560px" srcSet="/_next/image?url=%2Flanding-page%2F5.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2F5.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2F5.png&amp;w=3840&amp;q=75"/><div class="absolute inset-0 bg-[rgba(9,11,18,.08)]"></div><button type="button" aria-label="Play demo for Animation Extractor &amp; AI Cloner" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] rounded-full bg-neutral-900 border border-neutral-800 shadow-[0_12px_32px_rgba(15,23,42,.18)] flex items-center justify-center text-white hover:bg-neutral-700 hover:scale-105 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play ml-[3px]" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></button><span class="absolute bottom-4 right-4 px-[10px] py-[5px] rounded-[6px] bg-[rgba(9,11,18,.72)] text-white text-[11px] font-semibold">1:08</span></div></article><article class="grid grid-cols-1 lg:grid-cols-[72px_minmax(0,1fr)_minmax(0,1.05fr)] gap-8 lg:gap-10 lg:items-stretch"><div class="hidden lg:flex flex-col items-center h-full min-h-full"><div class="w-[52px] h-[52px] rounded-[12px] bg-neutral-50 border border-neutral-100 flex items-center justify-center text-neutral-900 font-extrabold text-[13px] shadow-md shrink-0">06</div><div class="w-[2px] flex-1 mt-4 bg-[linear-gradient(to_bottom,#1463ff_0%,#dce8ff_100%)]"></div></div><div class="pt-1"><div class="lg:hidden mb-3">
1<span class="w-[40px] h-[40px] rounded-[10px] bg-[#f3f8ff] border border-[#e8f1ff] inline-flex items-center justify-center text-[#1463ff] text-[12px] font-bold">06</span></div><h2 class="flex items-center gap-3 text-[clamp(24px,3vw,30px)] leading-[1.08] tracking-[-0.035em] font-bold text-[#090b12] mb-3"><span class="w-[40px] h-[40px] rounded-[10px] bg-neutral-900 flex items-center justify-center shadow-[0_8px_20px_rgba(0,0,0,.15)] shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers text-white" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg></span>Design System Export</h2><ul class="max-w-[520px] mb-5 space-y-2.5"><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Extract the complete design language — colors, type, spacing, and radii — in one pass.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Export as a Tailwind config ready to drop into your project.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Generate a Claude skills file or design.md for AI-assisted development.</span></li><li class="flex gap-2.5 text-[#657185] text-[15px] leading-[1.65]"><span class="mt-[9px] w-1.5 h-1.5 rounded-full bg-[#1463ff] shrink-0"></span><span>Push tokens directly to Figma as a structured design system.</span></li></ul><div class="flex flex-wrap gap-2"><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Tailwind</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Claude Skills</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Figma</span><span class="px-[12px] py-[6px] rounded-full bg-[#f6f8fc] border border-[#e8edf5] text-[#536174] text-[12px] font-medium">Tokens</span></div></div><div class="relative w-full aspect-[16/10] rounded-[16px] overflow-hidden border border-[#dfe7f1] shadow-[0_20px_50px_rgba(15,23,42,.12)] bg-[#f3f5f9]"><img alt="Design System Export" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 1024px) 100vw, 560px" srcSet="/_next/image?url=%2Flanding-page%2F6.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2F6.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2F6.png&amp;w=3840&amp;q=75"/><div class="absolute inset-0 bg-[rgba(9,11,18,.08)]"></div><button type="button" aria-label="Play demo for Design System Export" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] rounded-full bg-neutral-900 border border-neutral-800 shadow-[0_12px_32px_rgba(15,23,42,.18)] flex items-center justify-center text-white hover:bg-neutral-700 hover:scale-105 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play ml-[3px]" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></button><span class="absolute bottom-4 right-4 px-[10px] py-[5px] rounded-[6px] bg-[rgba(9,11,18,.72)] text-white text-[11px] font-semibold">
11:22</span></div></article></div></section><section class="mx-auto pb-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="rounded-[20px] bg-[linear-gradient(135deg,#f3f8ff_0%,#eef4ff_45%,#f8fbff_100%)] border border-[#e8f1ff] px-6 py-8 sm:px-10 sm:py-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6"><div class="flex items-start gap-4"><img alt="webmimic" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="rounded-[8px] shrink-0" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=48&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=96&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=96&amp;q=75"/><div><h3 class="text-[20px] sm:text-[22px] font-bold tracking-[-0.03em] text-[#090b12] mb-1">Ship better products, faster</h3><p class="text-[#657185] text-[14px] leading-[1.6] max-w-[480px]">Join 50,000+ designers and developers who are building faster with AI.</p></div></div><div class="flex flex-wrap items-center gap-3 shrink-0"><a href="#" class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[22px] rounded-lg bg-neutral-900 text-white text-[13px] font-bold shadow-[0_10px_20px_rgba(0,0,0,.18)] whitespace-nowrap hover:bg-neutral-700 transition-colors"><span class="w-[18px] h-[18px] rounded-full relative inline-flex shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,.12)]" style="background:conic-gradient(#f7d44a 0 33%, #2fb660 0 66%, #ef4335 0 84%, #f7d44a 0)"><span class="absolute w-[6px] h-[6px] rounded-full bg-[#2c8dff] inset-[6px]"></span></span>Add to Chrome</a><a href="#" class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[22px] rounded-lg text-[#171b24] text-[13px] font-bold whitespace-nowrap border border-[#dce3ee] bg-white shadow-[0_8px_18px_rgba(15,23,42,.05)] hover:border-[#c5d0e0] transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play text-neutral-900" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>Watch Full Demo</a></div></div></section></main><footer class="border-t mt-16 border-[#edf1f7] bg-white"><div class="mx-auto py-10 lg:py-[56px] w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="grid grid-cols-1 lg:grid-cols-[38%_62%] gap-10 lg:gap-[48px]"><div><div class="flex items-center gap-[8px] mb-[12px]"><img alt="webmimic — design system extraction Chrome extension" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="rounded-[6px]" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75"/><span class="font-extrabold text-[18px] tracking-tight text-[#090b12]">webmimic</span></div><p class="text-[13px] leading-[1.65] max-w-[280px] mb-[24px] text-[#667489]">The fastest way to capture, inspect, and reuse design assets from any website.</p><div class="flex flex-col items-start gap-3"><div class="flex gap-[8px]"><a href="#" aria-label="X" class="w-[34px] h-[34px] rounded-[8px] border flex items-center justify-center transition-colors border-[#e5e7eb] bg-white text-[#536174] hover:text-[#090b12] hover:border-[#c5ccd7]"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"></path></svg></a><a href="#" aria-label="GitHub" class="w-[34px] h-[34px] rounded-[8px] border flex items-center justify-center transition-colors border-[#e5e7eb] bg-white text-[#536174] hover:text-[#090b12] hover:border-[#c5ccd7]"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158
1-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"></path></svg></a><a href="#" aria-label="LinkedIn" class="w-[34px] h-[34px] rounded-[8px] border flex items-center justify-center transition-colors border-[#e5e7eb] bg-white text-[#536174] hover:text-[#090b12] hover:border-[#c5ccd7]"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></div><a href="https://creatorstoolbox.com" target="_blank" rel="sponsored noopener" title="Featured on Creators Toolbox" class="inline-block opacity-90 transition-opacity hover:opacity-100"><img src="https://creatorstoolbox.com/badges/featured-on-creators-toolbox.svg?v=brand-supplied-20260927-4" alt="Featured on Creators Toolbox" width="140" height="38" class="h-auto w-[140px] max-w-full"/></a></div></div><div class="grid grid-cols-2 sm:grid-cols-3 gap-8 lg:gap-[32px]"><div><p class="text-[10px] font-extrabold tracking-[.16em] mb-[18px] text-[#9aa3b2]">PRODUCT</p><ul class="flex flex-col gap-[13px]"><li><a href="/features" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Features</a></li><li><a href="/credits" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Pricing</a></li><li><a href="/changelog" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Changelog</a></li><li><a href="/roadmap" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Roadmap</a></li><li><a href="/chrome-extension" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Chrome Web Store</a></li></ul></div><div><p class="text-[10px] font-extrabold tracking-[.16em] mb-[18px] text-[#9aa3b2]">RESOURCES</p><ul class="flex flex-col gap-[13px]"><li><a href="/feedback" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Feedback</a></li><li><a href="/blog" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Blog</a></li><li><a href="/design-tokens-guide" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Design Tokens Guide</a></li><li><a href="/community" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Community</a></li><li><a href="/support" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Support</a></li></ul></div><div><p class="text-[10px] font-extrabold tracking-[.16em] mb-[18px] text-[#9aa3b2]">COMPANY</p><ul class="flex flex-col gap-[13px]"><li><a href="/about" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">About</a></li><li><a href="/privacy" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Privacy Policy</a></li><li><a href="/terms" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Terms of Service</a></li><li><a href="/contact" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Contact</a></li></ul></div></div></div></div><div class="mx-auto border-t w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16 border-[#edf1f7]"><div class="py-[20px] flex items-center justify-center"><p class="text-[12px] text-center text-[#9aa3b2]">© 2026 webmimic. All rights reserved.</p></div></div></footer></div><!--$--><!--/$-->
1<script src="/_next/static/chunks/14a0ee43b0f847a3.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[339756,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"default\"]\n4:I[837457,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"default\"]\n5:I[347257,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"ClientPageRoot\"]\n6:I[839032,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/687b07b79ab59203.js\"],\"default\"]\n9:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"OutletBoundary\"]\nb:I[711533,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"AsyncMetadataOutlet\"]\nd:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"ViewportBoundary\"]\nf:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"MetadataBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[168027,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"default\"]\n:HL[\"/_next/static/chunks/34d933785a17edf3.css\",\"style\"]\n:HL[\"/_next/static/chunks/f163d9b1826fa528.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"TiwmrlRsVmE---9L6_lwV\",\"p\":\"\",\"c\":[\"\",\"features\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(pages)\",{\"children\":[\"features\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/34d933785a17edf3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/f163d9b1826fa528.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/761a087da77e91bc.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/d495d0406869b1e8.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/ce4099ecc5288731.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/3f62c15bfd071855.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"(pages)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"features\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L5\",null,{\"Component\":\"$6\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@7\",\"$@8\"]}],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/687b07b79ab59203.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$La\",[\"$\",\"$Lb\",null,{\"promise\":\"$@c\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$10\",null,{\"fallback\":null,\"children\":\"$L11\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/34d933785a17edf3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/f163d9b1826fa528.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"s\":false,\"S\":true}\n"])</script>
1<script>self.__next_f.push([1,"13:I[441895,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"ClientClerkProvider\"]\n14:I[267823,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"ExtensionWebSignOutSync\"]\n15:I[748026,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"AppShell\"]\n7:{}\n8:\"$0:f:0:1:2:children:2:children:2:children:1:props:children:0:props:params\"\n"])</script>
1<script>self.__next_f.push([1,"2:[\"$\",\"$L13\",null,{\"initialState\":\"$undefined\",\"publishableKey\":\"pk_live_Y2xlcmsud2VibWltaWMuY29tJA\",\"__internal_clerkJSUrl\":\"$undefined\",\"__internal_clerkJSVersion\":\"$undefined\",\"__internal_clerkUIUrl\":\"$undefined\",\"__internal_clerkUIVersion\":\"$undefined\",\"prefetchUI\":\"$undefined\",\"proxyUrl\":\"\",\"domain\":\"\",\"isSatellite\":false,\"signInUrl\":\"\",\"signUpUrl\":\"\",\"signInForceRedirectUrl\":\"\",\"signUpForceRedirectUrl\":\"\",\"signInFallbackRedirectUrl\":\"\",\"signUpFallbackRedirectUrl\":\"\",\"newSubscriptionRedirectUrl\":\"\",\"telemetry\":{\"disabled\":false,\"debug\":false},\"sdkMetadata\":{\"name\":\"@clerk/nextjs\",\"version\":\"7.0.7\",\"environment\":\"production\"},\"unsafe_disableDevelopmentModeConsoleWarning\":false,\"__internal_scriptsSlot\":\"$undefined\",\"children\":[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased\",\"children\":[[\"$\",\"$L14\",null,{}],[\"$\",\"$L15\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]}]}]\n"])</script>
1<script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\na:null\n"])</script>
1<script>self.__next_f.push([1,"16:I[27201,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"IconMark\"]\n"])</script>
1<script>self.__next_f.push([1,"c:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"webmimic — Extract Design Systems, Clone GSAP \u0026 Framer Motion | Chrome Extension\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma \u0026 Google Stitch. Clone GSAP, Framer Motion \u0026 Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"webmimic\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"extract design system from website,design tokens chrome extension,design.md generator,WCAG 2.1 accessibility audit,clone GSAP animations,Framer Motion extractor,Lottie animation extractor,Tailwind config export,Figma design system export,AI component cloner,reverse engineer website design,Google Stitch design system,Claude design skills\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"webmimic\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://webmimic.com\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"webmimic — Extract Design Systems, Clone GSAP \u0026 Framer Motion\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma \u0026 Google Stitch. Clone GSAP, Framer Motion \u0026 Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://webmimic.com\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"webmimic\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://webmimic.com/og-card.png?v=3\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"webmimic — extract design systems, design tokens, and animations from any website\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"webmimic — Extract Design Systems, Clone GSAP \u0026 Framer Motion\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma \u0026 Google Stitch. Clone GSAP, Framer Motion \u0026 Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating.\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://webmimic.com/og-card.png?v=3\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.33ba039d.ico\",\"sizes\":\"32x32\",\"type\":\"image/x-icon\"}],[\"$\",\"$L16\",\"22\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
1<script>self.__next_f.push([1,"11:\"$c:metadata\"\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.