[{"data":1,"prerenderedAt":1687},["ShallowReactive",2],{"blog-how-to-copy-ui-components-from-any-website-into-cursor-claude-v0":3,"blog-related-how-to-copy-ui-components-from-any-website-into-cursor-claude-v0":337},{"id":4,"title":5,"author":6,"body":7,"category":312,"date":313,"description":314,"descriptionJa":315,"extension":316,"faqs":317,"image":317,"meta":318,"navigation":319,"path":320,"readingTime":321,"seo":322,"stem":323,"tags":324,"thumbnail":317,"__hash__":336},"blog/blog/how-to-copy-ui-components-from-any-website-into-cursor-claude-v0.md","How to Copy Any UI Component from Any Website into Cursor, Claude & v0 (2026)","Soraia",{"type":8,"value":9,"toc":294},"minimark",[10,14,17,22,25,48,51,55,58,89,92,96,99,104,115,119,122,126,129,133,141,145,148,173,176,180,183,221,224,228,231,234,238,241,277,280,284,287],[11,12,13],"p",{},"You're scrolling a website, you see a pricing card, a hero section, or a navbar you love — and you want it in your project. In 2026, you're not opening DevTools and copying CSS line by line anymore. You're pasting it into Cursor, Claude, Lovable, Bolt, or v0 and shipping it in the next five minutes.",[11,15,16],{},"Here's exactly how to do that — and why the \"inspect → screenshot → describe to AI\" workflow everyone was using last year is already obsolete.",[18,19,21],"h2",{"id":20},"the-old-workflow-and-why-it-breaks","The old workflow (and why it breaks)",[11,23,24],{},"Until recently, if you wanted to recreate a component from a live site using an AI coding tool, you had three bad options:",[26,27,28,36,42],"ol",{},[29,30,31,35],"li",{},[32,33,34],"strong",{},"Screenshot it and paste into Claude / ChatGPT."," The AI guesses. It gets the layout roughly right, invents the colors, and hallucinates the spacing. You spend 20 minutes fixing it.",[29,37,38,41],{},[32,39,40],{},"Open DevTools and copy CSS by hand."," You get the real values, but now you have 400 lines of compiled CSS, cryptic class names, and no structure. Pasting that into Cursor is worse than useless.",[29,43,44,47],{},[32,45,46],{},"Describe the component in words."," \"A pricing card with three tiers, a gradient border, and a highlighted middle plan.\" The AI builds something, but it's not the thing you saw.",[11,49,50],{},"All three fail because the AI is guessing instead of reading the actual code. The fix is simple: give the AI the real component.",[18,52,54],{"id":53},"the-new-workflow-extract-paste-done","The new workflow: extract → paste → done",[11,56,57],{},"Here's the exact flow that works in 2026:",[26,59,60,66,72,78],{},[29,61,62,65],{},[32,63,64],{},"Install a Chrome extension that can extract a component as clean code."," MiroMiro does this — hover any element, click, and get production-ready Tailwind HTML.",[29,67,68,71],{},[32,69,70],{},"Select the whole section, not just one element."," A hero, a pricing card, a navbar — select the parent container and the extension exports everything inside it as one clean component.",[29,73,74,77],{},[32,75,76],{},"Copy it."," You get real class names, real values, real structure. Not compiled gunk.",[29,79,80,83,84,88],{},[32,81,82],{},"Paste it into Cursor, Claude, Lovable, Bolt, or v0."," Add one sentence: \"Use this component as the starting point for ",[85,86,87],"span",{},"thing you're building",".\" The AI now has exact values to work from and produces code that actually matches what you saw.",[11,90,91],{},"That's it. No screenshots, no guessing, no back-and-forth.",[18,93,95],{"id":94},"step-by-step-from-website-to-cursor","Step-by-step: from website to Cursor",[11,97,98],{},"Let's do a real example. Say you want to grab a pricing section from a site you admire and use it in your Next.js project.",[100,101,103],"h3",{"id":102},"_1-install-miromiro","1. Install MiroMiro",[11,105,106,107,114],{},"Add the ",[108,109,113],"a",{"href":110,"rel":111},"https://chromewebstore.google.com/detail/miromiro/kpmkikjpclolhodgckeogmiiaehpfjhl",[112],"nofollow","MiroMiro Chrome extension"," to your browser. It's free to start — no account needed for your first extractions.",[100,116,118],{"id":117},"_2-visit-the-site-and-activate-the-inspector","2. Visit the site and activate the inspector",[11,120,121],{},"Click the MiroMiro icon. Hover over the pricing section — you'll see a highlight around the element under your cursor. Scroll up until the entire pricing section is highlighted, then click.",[100,123,125],{"id":124},"_3-export-as-clean-tailwind-html","3. Export as clean Tailwind HTML",[11,127,128],{},"MiroMiro converts the live DOM into clean, semantic HTML with Tailwind classes. Real colors, real spacing, real typography — not the compiled mess DevTools shows. One click copies it to your clipboard.",[100,130,132],{"id":131},"_4-hand-it-to-your-ai-and-tell-it-what-you-want","4. Hand it to your AI and tell it what you want",[11,134,135,136,140],{},"Drop the copied component into Cursor, Claude, Lovable, Bolt, or v0 — then just ask. \"Turn this into a three-tier pricing card using my brand colors.\" \"Wire the plans up to my Stripe products in ",[137,138,139],"code",{},"lib/stripe.ts",".\" \"Make it match the rest of my app and give me a dark mode variant.\" Because the AI is reading real code — real colors, real spacing, real structure — it stops guessing and starts building. You're not pasting a component. You're handing your AI a head start, then pointing it wherever you want to go.",[18,142,144],{"id":143},"why-this-works-with-ai-coding-tools-specifically","Why this works with AI coding tools specifically",[11,146,147],{},"AI coding tools are brilliant at transforming code and terrible at inventing pixel-perfect design from nothing. When you give Cursor or Claude a real component, you're playing to their strengths:",[149,150,151,157,167],"ul",{},[29,152,153,156],{},[32,154,155],{},"They can refactor it"," — convert the Tailwind HTML into a React, Vue, or Svelte component that matches your codebase conventions.",[29,158,159,162,163,166],{},[32,160,161],{},"They can adapt it"," — \"make this match our brand colors from ",[137,164,165],{},"tailwind.config.ts","\" or \"turn this into a dark-mode variant.\"",[29,168,169,172],{},[32,170,171],{},"They can compose it"," — \"use this pricing card pattern but put three tiers instead of two, and make the middle one the highlighted plan.\"",[11,174,175],{},"The AI isn't guessing anymore. It's transforming real code. That's why the output is 10× better than screenshot-to-code.",[18,177,179],{"id":178},"works-with-every-ai-coding-tool","Works with every AI coding tool",[11,181,182],{},"The extract → paste workflow is tool-agnostic. Once the component is on your clipboard as clean code, you can paste it into:",[149,184,185,191,197,203,209,215],{},[29,186,187,190],{},[32,188,189],{},"Cursor"," — for full-project edits with context from your codebase.",[29,192,193,196],{},[32,194,195],{},"Claude (Projects or Code)"," — for refactoring, adapting, or composing into larger features.",[29,198,199,202],{},[32,200,201],{},"v0"," — use the extracted component as a reference and generate variants.",[29,204,205,208],{},[32,206,207],{},"Lovable"," — paste into your prompt to seed a new page or feature.",[29,210,211,214],{},[32,212,213],{},"Bolt.new"," — bootstrap a whole app starting from a real component you liked.",[29,216,217,220],{},[32,218,219],{},"ChatGPT"," — as a reference snippet when asking for variations or explanations.",[11,222,223],{},"One extension, every AI tool.",[18,225,227],{"id":226},"what-about-screenshots","What about screenshots?",[11,229,230],{},"Screenshots still have a role for pure visual reference — \"I want something that feels like this.\" But for actually building the thing, code beats pixels every time. An LLM that reads real class names and real hex values will always out-produce one that's staring at a JPEG and guessing.",[11,232,233],{},"The rule of thumb: if you want the AI to describe something, use a screenshot. If you want the AI to build something, use extracted code.",[18,235,237],{"id":236},"what-you-can-grab","What you can grab",[11,239,240],{},"With MiroMiro, \"any component\" really does mean any component. Heroes, navbars, pricing tables, feature grids, testimonial sections, modals, buttons, cards, footers. You can also extract:",[149,242,243,249,255,261,267],{},[29,244,245,248],{},[32,246,247],{},"Colors"," — full palette as CSS variables, Tailwind config, or OKLCH.",[29,250,251,254],{},[32,252,253],{},"Typography"," — font families, sizes, weights, line heights.",[29,256,257,260],{},[32,258,259],{},"SVGs and icons"," — download as optimized SVG files.",[29,262,263,266],{},[32,264,265],{},"Lottie animations"," — grab the JSON directly.",[29,268,269,272,273,276],{},[32,270,271],{},"Images"," — full resolution, ready to drop into ",[137,274,275],{},"/public",".",[11,278,279],{},"Everything you'd normally rebuild by hand, available as one click.",[18,281,283],{"id":282},"try-it","Try it",[11,285,286],{},"If you've been copy-pasting CSS from DevTools into ChatGPT and wondering why the output is mediocre, the problem isn't the AI. It's the input. Give Cursor and Claude real components instead of screenshots and watch the quality jump.",[11,288,289,293],{},[108,290,292],{"href":110,"rel":291},[112],"Install MiroMiro for free"," and extract your first component in under 30 seconds.",{"title":295,"searchDepth":296,"depth":296,"links":297},"",2,[298,299,300,307,308,309,310,311],{"id":20,"depth":296,"text":21},{"id":53,"depth":296,"text":54},{"id":94,"depth":296,"text":95,"children":301},[302,304,305,306],{"id":102,"depth":303,"text":103},3,{"id":117,"depth":303,"text":118},{"id":124,"depth":303,"text":125},{"id":131,"depth":303,"text":132},{"id":143,"depth":296,"text":144},{"id":178,"depth":296,"text":179},{"id":226,"depth":296,"text":227},{"id":236,"depth":296,"text":237},{"id":282,"depth":296,"text":283},"AI Coding","2026-04-13","The fastest way to grab a UI component from a live website and paste it straight into Cursor, Claude, Lovable, Bolt, or v0 — as clean Tailwind HTML. No DevTools, no rewriting.","ライブWebサイトからUIコンポーネントを取得し、Cursor、Claude、Lovable、Bolt、v0にそのまま貼り付ける最速の方法。クリーンなTailwind HTMLとして。DevTools不要、書き直し不要。","md",null,{"dateModified":313},true,"/blog/how-to-copy-ui-components-from-any-website-into-cursor-claude-v0",8,{"title":5,"description":314},"blog/how-to-copy-ui-components-from-any-website-into-cursor-claude-v0",[325,326,327,328,329,330,331,332,333,334,335],"copy ui component from website","website to cursor","website to claude","website to v0","website to lovable","website to bolt","ai coding tools","chrome extension for cursor","paste website into ai","tailwind from website","react from website","MbMDO2VlcwImcej5WH0TOLHjGBkikv0V0ue3bvCDgDM",[338,701,1262],{"id":339,"title":340,"author":6,"body":341,"category":665,"date":666,"description":667,"descriptionJa":668,"extension":316,"faqs":669,"image":317,"meta":685,"navigation":319,"path":686,"readingTime":687,"seo":688,"stem":689,"tags":690,"thumbnail":317,"__hash__":699,"score":700},"blog/blog/design-tools-that-export-clean-html-css.md","What Design Tool Exports Clean HTML and CSS? (2026 Honest Guide)",{"type":8,"value":342,"toc":650},[343,350,357,363,366,369,373,376,391,394,427,430,434,438,444,457,463,469,475,479,482,488,505,509,516,530,533,564,572,576,579,583,590,594,597,601,604,607,611,637,641,644,647],[11,344,345,346],{},"You've probably typed some version of this into Google: ",[347,348,349],"em",{},"\"what design tool exports clean HTML and CSS?\"",[11,351,352,353,356],{},"The honest answer: ",[32,354,355],{},"none of them, really."," Figma, Sketch, Adobe XD, even newer tools like Anima and Locofy — they all claim clean exports. They all ship code that needs real work before you can use it in production.",[11,358,359,360],{},"But there's a better question: ",[32,361,362],{},"why are you going design-file → code at all?",[11,364,365],{},"If you're trying to recreate something you already saw on a real website, you're adding a step that doesn't need to exist. The cleanest HTML and CSS is the code the browser is already rendering.",[11,367,368],{},"Here's the full landscape in 2026, honestly ranked.",[18,370,372],{"id":371},"why-design-file-exports-are-messy-and-always-will-be","Why design-file exports are messy (and always will be)",[11,374,375],{},"Design tools render pixels. Browsers render semantic markup. The gap between those two is where \"clean export\" goes to die.",[11,377,378,379,382,383,386,387,390],{},"A button in Figma is a rectangle with text inside it. The exporter doesn't know it's a button. It doesn't know whether that section should be a ",[137,380,381],{},"\u003Cnav>",", a ",[137,384,385],{},"\u003Cheader>",", or a ",[137,388,389],{},"\u003Csection>",". It sees rectangles, text, and auto-layout rules — and has to guess structure from visual proximity.",[11,392,393],{},"The result is the same every time:",[149,395,396,399,402,405,424],{},[29,397,398],{},"Wrapped in unnecessary divs",[29,400,401],{},"Absolute positioning everywhere (because that's what Figma thinks in)",[29,403,404],{},"Inline styles or unscoped CSS classes",[29,406,407,408,411,412,411,414,417,418,421,422],{},"No semantic HTML — no ",[137,409,410],{},"\u003Cbutton>",", ",[137,413,381],{},[137,415,416],{},"\u003Carticle>",", just ",[137,419,420],{},"\u003Cdiv>"," after ",[137,423,420],{},[29,425,426],{},"Font weights, colors, and spacing rounded to the nearest approximation",[11,428,429],{},"You can polish this. You can't skip it.",[18,431,433],{"id":432},"the-2026-comparison-every-tool-that-claims-to-export-clean-code","The 2026 comparison: every tool that claims to export clean code",[100,435,437],{"id":436},"design-file-code-tools","Design-file → code tools",[11,439,440,443],{},[32,441,442],{},"Figma Dev Mode"," — The default option. Shows CSS, iOS, Android snippets for any selected layer. Good for grabbing individual values (colors, spacing, font sizes). The full component HTML/CSS export is unusable — it's essentially inline-styled absolute-positioned divs.",[11,445,446,449,450,411,453,456],{},[32,447,448],{},"Anima"," — Plugin for Figma/Sketch/Adobe XD. Exports React, Vue, or HTML. Cleaner than Figma's native output but still produces component code that feels AI-generated — class names like ",[137,451,452],{},"group-1",[137,454,455],{},"rectangle-5",", and a lot of wrapper divs. Usable as a starting point, not as shippable code.",[11,458,459,462],{},[32,460,461],{},"Locofy.ai"," — Adds AI on top of the Figma export step. The output is noticeably cleaner than Anima, and it attempts semantic tags. Still requires a review pass. Best for teams already deep in the Figma → React pipeline who want to save hours, not perfect code.",[11,464,465,468],{},[32,466,467],{},"Framer"," — Technically exports HTML/CSS, but its output is tightly coupled to Framer's runtime. If you're not hosting on Framer, exporting is more painful than it looks.",[11,470,471,474],{},[32,472,473],{},"Webflow"," — Similar story. Webflow's export is more portable than Framer's, but you're still getting Webflow's class naming and structure, not code you'd write by hand.",[100,476,478],{"id":477},"live-website-code-tools","Live-website → code tools",[11,480,481],{},"This is the category most people overlook. Instead of starting from a design file, you start from a real, shipped website — and extract the code the browser is already rendering.",[11,483,484,487],{},[32,485,486],{},"MiroMiro"," — Chrome extension. Hover any element on any live site, click, get production-ready Tailwind HTML (or vanilla HTML/CSS). Because the code is already semantic markup the browser ran, you skip the \"guess the structure\" problem that every design-file exporter has.",[11,489,490,493,494,497,498,411,501,504],{},[32,491,492],{},"Browser DevTools"," — Free, built-in, and miserable. You can copy ",[137,495,496],{},"outerHTML"," and scrape computed styles, but you get cryptic minified class names (",[137,499,500],{},".sc-d4e1f2",[137,502,503],{},".css-1x9kl7","), 400 lines of unused CSS per element, and no Tailwind conversion. Technically possible; rarely worth it.",[18,506,508],{"id":507},"why-live-website-extraction-wins-for-most-cases","Why live-website extraction wins for most cases",[11,510,511,512,515],{},"If what you want is ",[347,513,514],{},"\"code that looks like the thing I saw on a real website,\""," live-website extraction is the shortest path:",[149,517,518,521,524,527],{},[29,519,520],{},"The semantic structure is already there (browsers enforce it)",[29,522,523],{},"The CSS values are real, not rounded approximations",[29,525,526],{},"You skip the design-file middleman entirely",[29,528,529],{},"You can grab anything from any site — not just files you have access to",[11,531,532],{},"The only case where design-file export wins: when the component you want hasn't been built yet and exists only as a mockup.",[534,535,537,542,559],"callout",{"color":536},"primary",[11,538,539],{},[32,540,541],{},"Try MiroMiro free for 24 hours:",[149,543,544,547,550,553,556],{},[29,545,546],{},"Extract clean Tailwind HTML from any live site",[29,548,549],{},"CSS Inspector — copy computed styles from any element",[29,551,552],{},"SVG Extractor — grab icons and graphics as code",[29,554,555],{},"Font Detector — identify any typography",[29,557,558],{},"Lottie Downloader — pull animation JSON files",[11,560,561],{},[32,562,563],{},"Everything unlocked. No credit card required.",[11,565,566],{},[108,567,571],{"href":568,"rel":569,"target":570},"https://chromewebstore.google.com/detail/miromiro-design-system-ex/kpmkikjpclolhodgckeogmiiaehpfjhl",[112],"_blank","Install MiroMiro Extension →",[18,573,575],{"id":574},"how-to-get-clean-htmlcss-from-any-live-website","How to get clean HTML/CSS from any live website",[11,577,578],{},"The workflow is three steps:",[100,580,582],{"id":581},"step-1-install-a-live-website-extractor","Step 1: Install a live-website extractor",[11,584,585,586,589],{},"Install ",[108,587,486],{"href":568,"rel":588,"target":570},[112]," from the Chrome Web Store. You'll get a toolbar icon that works on any site.",[100,591,593],{"id":592},"step-2-hover-the-element-you-want","Step 2: Hover the element you want",[11,595,596],{},"Open any site you like the look of — Linear, Stripe, Vercel, a pricing page, a hero section, whatever. Click the extension, hover the component, and the overlay highlights it with dimensions and a live preview.",[100,598,600],{"id":599},"step-3-export-as-clean-code","Step 3: Export as clean code",[11,602,603],{},"Click once. MiroMiro gives you clean Tailwind HTML (default) or vanilla HTML/CSS. Class names match what the site actually uses. Spacing, colors, and typography are the real values — not rounded.",[11,605,606],{},"Paste straight into Cursor, Claude, v0, Lovable, or your own codebase. No cleanup pass needed.",[18,608,610],{"id":609},"when-to-use-which-tool","When to use which tool",[149,612,613,619,625,631],{},[29,614,615,618],{},[32,616,617],{},"Building from a Figma mockup that doesn't exist anywhere else yet:"," Anima or Locofy. Expect a cleanup pass.",[29,620,621,624],{},[32,622,623],{},"Recreating something you saw on a real website:"," Live extraction with MiroMiro. Fastest, cleanest path.",[29,626,627,630],{},[32,628,629],{},"Grabbing a single CSS value (color, shadow, font size):"," Figma Dev Mode or browser DevTools — both work fine for one-off values.",[29,632,633,636],{},[32,634,635],{},"Exporting a full Webflow/Framer site you built:"," Use their native export, knowing you'll be tied to their conventions.",[18,638,640],{"id":639},"the-honest-takeaway","The honest takeaway",[11,642,643],{},"No design tool exports truly clean HTML and CSS directly from a design file. They all need a cleanup pass, because they're reverse-engineering semantic structure from visual layers.",[11,645,646],{},"If the component you want already exists on a live website — which it almost always does — extract it from there instead. The code is already clean. The browser did the hard work.",[11,648,649],{},"That's the shortcut nobody tells you about.",{"title":295,"searchDepth":296,"depth":296,"links":651},[652,653,657,658,663,664],{"id":371,"depth":296,"text":372},{"id":432,"depth":296,"text":433,"children":654},[655,656],{"id":436,"depth":303,"text":437},{"id":477,"depth":303,"text":478},{"id":507,"depth":296,"text":508},{"id":574,"depth":296,"text":575,"children":659},[660,661,662],{"id":581,"depth":303,"text":582},{"id":592,"depth":303,"text":593},{"id":599,"depth":303,"text":600},{"id":609,"depth":296,"text":610},{"id":639,"depth":296,"text":640},"Design Tools","2026-04-21","Figma, Sketch, Adobe XD — their HTML/CSS exports are notoriously bloated. Here's the real way to get clean, production-ready code in 2026, plus an honest comparison of every tool that claims to do it.","FigmaやSketch、Adobe XDのHTML/CSSエクスポートは煩雑で使い物になりません。2026年時点で本当にクリーンなコードを得る方法と、コード出力をうたう各ツールの正直な比較ガイド。",[670,673,676,679,682],{"question":671,"answer":672},"Which design tool actually exports clean HTML and CSS?","No design file → code tool exports truly clean HTML/CSS out of the box. Figma Dev Mode, Anima, Locofy, and Framer all produce code that needs cleanup before shipping. The cleanest approach in 2026 is to skip the design-file step entirely — use a browser extension like MiroMiro to export code directly from any live website, since browsers already render clean semantic markup.",{"question":674,"answer":675},"Why is Figma's HTML export so messy?","Figma generates code from visual layers, not semantic structure. A 'button' in Figma is a rectangle with text inside — the exporter has no way to know it should be a `\u003Cbutton>` element. It guesses, wraps everything in divs, and inlines absolute positioning. Live websites already have the semantic markup baked in, which is why extracting from a rendered page gives cleaner results.",{"question":677,"answer":678},"Is it legal to copy HTML/CSS from a live website?","Copying HTML/CSS structure and styling for learning, prototyping, or inspiration is standard practice and generally fine. Copying entire pages or brand assets (logos, copy, images) for a commercial competitor is not. Treat extracted code the same way you'd treat code from a public GitHub repo — fine as a reference and starting point, not as a wholesale clone.",{"question":680,"answer":681},"What's the difference between Figma Dev Mode and MiroMiro?","Figma Dev Mode exports code from a design file — you need access to the Figma file and it only works for what's inside it. MiroMiro exports code from any live website you visit in the browser — you don't need design file access, and you're getting the real shipped code, not a guess based on visual layers.",{"question":683,"answer":684},"Does MiroMiro export Tailwind or vanilla CSS?","Both. MiroMiro can output clean Tailwind HTML (matching the utility classes the site actually uses) or vanilla HTML + CSS. Tailwind is the default because it's what most modern AI coding tools (Cursor, Claude, v0, Lovable) expect as input.",{"dateModified":666},"/blog/design-tools-that-export-clean-html-css",7,{"title":340,"description":667},"blog/design-tools-that-export-clean-html-css",[691,692,693,694,695,696,697,698],"design tool export html css","figma to html","design to code","clean html css export","website to code","design tool comparison","tailwind export","no-code to code","MNYVBy7i6iAoTvqCJEQ_77FrdsXrhKX-yk3UpfKjHT4",0,{"id":702,"title":703,"author":6,"body":704,"category":1245,"date":1246,"description":1247,"descriptionJa":1248,"extension":316,"faqs":317,"image":1249,"meta":1250,"navigation":319,"path":1251,"readingTime":321,"seo":1252,"stem":1253,"tags":1254,"thumbnail":317,"__hash__":1261,"score":700},"blog/blog/free-lottie-animations-best-resources.md","8 Best Free Lottie Animation Sites — Download JSON Files (2026)",{"type":8,"value":705,"toc":1220},[706,709,712,716,720,723,742,746,749,764,768,771,786,790,793,808,812,815,830,834,837,852,856,859,874,878,881,895,898,902,905,925,931,934,938,941,961,970,978,984,986,990,993,1031,1033,1037,1124,1130,1132,1136,1140,1143,1147,1154,1158,1161,1165,1168,1170,1174,1177,1182,1188,1192],[11,707,708],{},"Need free Lottie animations for your next project? You've got two options: download from Lottie libraries, or extract them from websites that already use them.",[11,710,711],{},"This guide covers both. Here are the best free Lottie resources in 2026 – plus a method most designers don't know about.",[18,713,715],{"id":714},"free-lottie-animation-libraries","Free Lottie Animation Libraries",[100,717,719],{"id":718},"_1-lottiefiles","1. LottieFiles",[11,721,722],{},"The largest Lottie animation library. Over 100,000+ free animations with filters for category, style, and color.",[11,724,725,728,729,732,733,736,737],{},[32,726,727],{},"Best for:"," General-purpose animations, icons, and illustrations\n",[32,730,731],{},"License:"," Free for personal and commercial use (check individual animations)\n",[32,734,735],{},"Link:"," ",[108,738,741],{"href":739,"rel":740},"https://lottiefiles.com/free-animations",[112],"lottiefiles.com/free-animations",[100,743,745],{"id":744},"_2-iconscout-lottie","2. IconScout Lottie",[11,747,748],{},"Curated Lottie icon sets and illustrations. Higher quality than average, with consistent styles.",[11,750,751,753,754,756,757,736,759],{},[32,752,727],{}," Icon animations and UI micro-interactions\n",[32,755,731],{}," Free tier available, attribution required\n",[32,758,735],{},[108,760,763],{"href":761,"rel":762},"https://iconscout.com/lottie-animations",[112],"iconscout.com/lottie-animations",[100,765,767],{"id":766},"_3-lottieflow","3. LottieFlow",[11,769,770],{},"Webflow-focused Lottie animations. Pre-built for common landing page patterns.",[11,772,773,775,776,778,779,736,781],{},[32,774,727],{}," No-code builders using Webflow or Framer\n",[32,777,731],{}," Free pack available\n",[32,780,735],{},[108,782,785],{"href":783,"rel":784},"https://lottieflow.com",[112],"lottieflow.com",[100,787,789],{"id":788},"_4-lordicon","4. Lordicon",[11,791,792],{},"Animated icon library with Lottie export. Unique \"morph\" style that transitions between states.",[11,794,795,797,798,800,801,736,803],{},[32,796,727],{}," Interactive icons (hover effects, click states)\n",[32,799,731],{}," Free tier with attribution\n",[32,802,735],{},[108,804,807],{"href":805,"rel":806},"https://lordicon.com",[112],"lordicon.com",[100,809,811],{"id":810},"_5-useanimations","5. useAnimations",[11,813,814],{},"Micro-interaction icons specifically designed for UI. Loading spinners, checkmarks, menu toggles.",[11,816,817,819,820,822,823,736,825],{},[32,818,727],{}," App UI and micro-interactions\n",[32,821,731],{}," Free, MIT license\n",[32,824,735],{},[108,826,829],{"href":827,"rel":828},"https://useanimations.com",[112],"useanimations.com",[100,831,833],{"id":832},"_6-creattie","6. Creattie",[11,835,836],{},"Growing library of free Lottie packs. Good variety of illustration styles.",[11,838,839,841,842,844,845,736,847],{},[32,840,727],{}," Character animations and storytelling\n",[32,843,731],{}," Free with attribution\n",[32,846,735],{},[108,848,851],{"href":849,"rel":850},"https://creattie.com",[112],"creattie.com",[100,853,855],{"id":854},"_7-jitter","7. Jitter",[11,857,858],{},"Motion design tool with a library of pre-made Lottie animations and templates.",[11,860,861,863,864,866,867,736,869],{},[32,862,727],{}," Designers who want to customize animations before export\n",[32,865,731],{}," Free tier available\n",[32,868,735],{},[108,870,873],{"href":871,"rel":872},"https://jitter.video",[112],"jitter.video",[100,875,877],{"id":876},"_8-drawer","8. Drawer",[11,879,880],{},"Hand-drawn style Lottie animations. Adds personality compared to generic icon libraries.",[11,882,883,885,886,778,888,736,890],{},[32,884,727],{}," Brands wanting a human, organic feel\n",[32,887,731],{},[32,889,735],{},[108,891,894],{"href":892,"rel":893},"https://drawer.design",[112],"drawer.design",[896,897],"hr",{},[18,899,901],{"id":900},"the-method-most-designers-miss","The Method Most Designers Miss",[11,903,904],{},"Libraries are great, but they have limits:",[149,906,907,913,919],{},[29,908,909,912],{},[32,910,911],{},"Everyone uses the same animations"," – your site looks like everyone else's",[29,914,915,918],{},[32,916,917],{},"Style mismatch"," – hard to find animations that fit your brand",[29,920,921,924],{},[32,922,923],{},"Outdated options"," – libraries don't always keep up with design trends",[11,926,927,928,276],{},"Here's what experienced designers do: ",[32,929,930],{},"extract Lottie animations from live websites",[11,932,933],{},"That loading animation on Stripe? The icons on Linear? The micro-interactions on Notion? Those are all Lottie files – and you can download them.",[100,935,937],{"id":936},"how-to-extract-lottie-animations-from-any-website","How to Extract Lottie Animations from Any Website",[11,939,940],{},"Use MiroMiro's Lottie detector to find and download animations from any site:",[26,942,943,949,952,955,958],{},[29,944,945,946],{},"Install the ",[108,947,113],{"href":568,"rel":948},[112],[29,950,951],{},"Visit any website with Lottie animations",[29,953,954],{},"Enable Inspector Mode",[29,956,957],{},"Hover over animations – MiroMiro highlights Lottie files automatically",[29,959,960],{},"Click to preview, then download as JSON",[962,963],"iframe",{"width":964,"style":965,"src":966,"title":967,"frameBorder":968,"allow":969,"allowFullScreen":319},"100%","aspect-ratio: 16/9;","https://www.youtube-nocookie.com/embed/JnMTKltUARE","How to Download Lottie Animations from Any Website","0","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",[534,971,972],{"color":536},[11,973,974,977],{},[32,975,976],{},"Why this matters:"," Instead of settling for generic library animations, you can study and reference how top design teams use motion. Use them as inspiration to create something original, or as a starting point to customize.",[11,979,980,981],{},"For a full walkthrough, see our guide: ",[108,982,967],{"href":983},"/blog/how-to-download-lottie-animations-from-any-website",[896,985],{},[18,987,989],{"id":988},"where-to-find-websites-with-great-lottie-animations","Where to Find Websites with Great Lottie Animations",[11,991,992],{},"Looking for inspiration? Here are sites known for excellent motion design:",[149,994,995,1001,1007,1013,1019,1025],{},[29,996,997,1000],{},[32,998,999],{},"Stripe"," – Subtle, polished micro-interactions",[29,1002,1003,1006],{},[32,1004,1005],{},"Linear"," – Clean icon animations",[29,1008,1009,1012],{},[32,1010,1011],{},"Notion"," – Playful illustrations",[29,1014,1015,1018],{},[32,1016,1017],{},"Vercel"," – Technical, developer-focused animations",[29,1020,1021,1024],{},[32,1022,1023],{},"Framer templates"," – Motion-heavy landing pages",[29,1026,1027,1030],{},[32,1028,1029],{},"Awwwards winners"," – Browse award-winning sites filtered by animation",[896,1032],{},[18,1034,1036],{"id":1035},"quick-comparison-libraries-vs-extraction","Quick Comparison: Libraries vs. Extraction",[1038,1039,1040,1055],"table",{},[1041,1042,1043],"thead",{},[1044,1045,1046,1049,1052],"tr",{},[1047,1048],"th",{},[1047,1050,1051],{},"Lottie Libraries",[1047,1053,1054],{},"Extracting with MiroMiro",[1056,1057,1058,1072,1085,1098,1111],"tbody",{},[1044,1059,1060,1066,1069],{},[1061,1062,1063],"td",{},[32,1064,1065],{},"Variety",[1061,1067,1068],{},"Limited to what's uploaded",[1061,1070,1071],{},"Any website, unlimited",[1044,1073,1074,1079,1082],{},[1061,1075,1076],{},[32,1077,1078],{},"Uniqueness",[1061,1080,1081],{},"Everyone has access",[1061,1083,1084],{},"Unique finds from real sites",[1044,1086,1087,1092,1095],{},[1061,1088,1089],{},[32,1090,1091],{},"Style matching",[1061,1093,1094],{},"Hit or miss",[1061,1096,1097],{},"Find exactly what fits",[1044,1099,1100,1105,1108],{},[1061,1101,1102],{},[32,1103,1104],{},"Legal",[1061,1106,1107],{},"Clear licensing",[1061,1109,1110],{},"Use as reference/inspiration",[1044,1112,1113,1118,1121],{},[1061,1114,1115],{},[32,1116,1117],{},"Effort",[1061,1119,1120],{},"Browse and download",[1061,1122,1123],{},"Install extension, browse sites",[11,1125,1126,1129],{},[32,1127,1128],{},"Best approach:"," Use both. Libraries for quick, licensed animations. Extraction for inspiration and studying how great teams implement motion.",[896,1131],{},[18,1133,1135],{"id":1134},"faq","FAQ",[100,1137,1139],{"id":1138},"are-lottie-animations-really-free","Are Lottie animations really free?",[11,1141,1142],{},"Most Lottie libraries offer free tiers. Always check the license – some require attribution, others are fully free for commercial use.",[100,1144,1146],{"id":1145},"can-i-legally-use-animations-extracted-from-websites","Can I legally use animations extracted from websites?",[11,1148,1149,1150,1153],{},"Extracted animations should be used for ",[32,1151,1152],{},"inspiration and learning",", not direct copying. Study the timing, easing, and techniques – then create your own version. Or use them in mockups and internal presentations.",[100,1155,1157],{"id":1156},"what-format-are-lottie-animations","What format are Lottie animations?",[11,1159,1160],{},"Lottie animations are JSON files. You can edit them in tools like LottieFiles, After Effects (with Bodymovin), or directly in code.",[100,1162,1164],{"id":1163},"which-library-has-the-best-free-lottie-animations","Which library has the best free Lottie animations?",[11,1166,1167],{},"LottieFiles has the largest selection. For icons specifically, Lordicon and useAnimations offer higher quality with consistent styles.",[896,1169],{},[18,1171,1173],{"id":1172},"start-building-with-motion","Start Building with Motion",[11,1175,1176],{},"Lottie animations transform static pages into engaging experiences. Whether you're grabbing icons from a library or studying how Stripe handles their loading states, you now have the resources to add motion to your projects.",[11,1178,1179],{},[32,1180,1181],{},"Ready to find Lottie animations on any website?",[11,1183,1184],{},[108,1185,1187],{"href":568,"rel":1186},[112],"Install MiroMiro Free →",[18,1189,1191],{"id":1190},"keep-reading","Keep Reading",[149,1193,1194,1199,1206,1213],{},[29,1195,1196,1198],{},[108,1197,967],{"href":983},": Step-by-step extraction guide",[29,1200,1201,1205],{},[108,1202,1204],{"href":1203},"/tools/lottie-preview","Lottie Preview Tool",": Test and preview Lottie JSON files online for free",[29,1207,1208,1212],{},[108,1209,1211],{"href":1210},"/features/lottie-extractor","Lottie Animation Extractor",": Extract Lottie animations from any live website",[29,1214,1215,1219],{},[108,1216,1218],{"href":1217},"/features/asset-extractor","Asset Extractor",": Download images, SVGs, and videos from any site",{"title":295,"searchDepth":296,"depth":296,"links":1221},[1222,1232,1235,1236,1237,1243,1244],{"id":714,"depth":296,"text":715,"children":1223},[1224,1225,1226,1227,1228,1229,1230,1231],{"id":718,"depth":303,"text":719},{"id":744,"depth":303,"text":745},{"id":766,"depth":303,"text":767},{"id":788,"depth":303,"text":789},{"id":810,"depth":303,"text":811},{"id":832,"depth":303,"text":833},{"id":854,"depth":303,"text":855},{"id":876,"depth":303,"text":877},{"id":900,"depth":296,"text":901,"children":1233},[1234],{"id":936,"depth":303,"text":937},{"id":988,"depth":296,"text":989},{"id":1035,"depth":296,"text":1036},{"id":1134,"depth":296,"text":1135,"children":1238},[1239,1240,1241,1242],{"id":1138,"depth":303,"text":1139},{"id":1145,"depth":303,"text":1146},{"id":1156,"depth":303,"text":1157},{"id":1163,"depth":303,"text":1164},{"id":1172,"depth":296,"text":1173},{"id":1190,"depth":296,"text":1191},"Design Resources","2026-01-29","LottieFiles, Lordicon, IconScout & 5 more — the best places to get free Lottie animations. Plus a trick to extract Lotties from any live website.","プロジェクトで使える無料Lottieアニメーションを見つけよう。厳選されたLottieライブラリのリストと、あらゆるWebサイトからアニメーションを抽出する方法を紹介。","/blog/lottie/lottie-detect.png",{"dateModified":1246},"/blog/free-lottie-animations-best-resources",{"title":703,"description":1247},"blog/free-lottie-animations-best-resources",[1255,1256,1257,1258,1259,1260],"free lottie animations","lottie animations free","lottie animation download","lottie json free","motion design","web animation","mnYnbXYJ32IyjF3bw1Q3tB9_ZdrHa2W__SJwwkJtbRo",{"id":1263,"title":1264,"author":6,"body":1265,"category":665,"date":1666,"description":1667,"descriptionJa":1668,"extension":316,"faqs":317,"image":1669,"meta":1670,"navigation":319,"path":1672,"readingTime":687,"seo":1673,"stem":1674,"tags":1675,"thumbnail":317,"__hash__":1686,"score":700},"blog/blog/how-to-export-design-tokens-from-website-to-figma-and-code.md","How to Export Design Tokens from Any Website to Figma & Code (2026)",{"type":8,"value":1266,"toc":1646},[1267,1270,1273,1277,1280,1283,1315,1323,1327,1330,1334,1372,1381,1385,1388,1428,1432,1435,1439,1457,1461,1497,1500,1504,1507,1512,1528,1531,1535,1538,1600,1604,1608,1611,1615,1618,1622,1625,1629,1632,1636,1639],[11,1268,1269],{},"You're looking at a beautifully designed website and want to know what colors, fonts, spacing, and shadows it uses. You could spend 30 minutes clicking through DevTools, copying values one by one. Or you could extract every design token in one click.",[11,1271,1272],{},"Here's how to export design tokens from any website — and get them into Figma, Tailwind, or your codebase in seconds.",[18,1274,1276],{"id":1275},"what-are-design-tokens","What Are Design Tokens?",[11,1278,1279],{},"Design tokens are the atomic building blocks of a design system: colors, typography scales, spacing values, border radii, shadows, and more. They're the bridge between design and code.",[11,1281,1282],{},"When you extract design tokens from a live website, you get:",[149,1284,1285,1291,1297,1303,1309],{},[29,1286,1287,1290],{},[32,1288,1289],{},"Color palette"," — every hex, RGB, HSL, and OKLCH value used",[29,1292,1293,1296],{},[32,1294,1295],{},"Typography scale"," — font families, sizes, weights, and line heights",[29,1298,1299,1302],{},[32,1300,1301],{},"Spacing system"," — margins, paddings, and gap values",[29,1304,1305,1308],{},[32,1306,1307],{},"Shadows"," — box shadows and text shadows",[29,1310,1311,1314],{},[32,1312,1313],{},"Border radii"," — corner radius values used across components",[534,1316,1317],{"color":536},[11,1318,1319,1322],{},[32,1320,1321],{},"Why extract tokens from live sites?"," Whether you're rebuilding a design system, auditing brand consistency, or referencing a competitor's design, extracting tokens is faster and more accurate than eyeballing values in DevTools.",[18,1324,1326],{"id":1325},"method-1-extract-with-miromiro-recommended","Method 1: Extract with MiroMiro (Recommended)",[11,1328,1329],{},"The fastest way to export design tokens from any website. MiroMiro's Chrome extension scans the entire page and extracts every design token automatically.",[100,1331,1333],{"id":1332},"step-by-step","Step-by-Step",[26,1335,1336,1348,1354,1360,1366],{},[29,1337,1338,1341,1342,1347],{},[32,1339,1340],{},"Install MiroMiro"," — add the ",[108,1343,1346],{"href":1344,"rel":1345},"https://chromewebstore.google.com/detail/miromiro",[112],"Chrome extension"," to your browser",[29,1349,1350,1353],{},[32,1351,1352],{},"Visit any website"," — navigate to the page you want to extract tokens from",[29,1355,1356,1359],{},[32,1357,1358],{},"Open the Design Tokens panel"," — click the MiroMiro icon and select \"Design Tokens\"",[29,1361,1362,1365],{},[32,1363,1364],{},"Review extracted tokens"," — colors, typography, spacing, shadows, and radii are organized automatically",[29,1367,1368,1371],{},[32,1369,1370],{},"Export in your format"," — choose CSS variables, Tailwind config, SCSS variables, or JSON",[534,1373,1375],{"color":1374},"success",[11,1376,1377,1380],{},[32,1378,1379],{},"One-click export:"," MiroMiro groups tokens intelligently — it deduplicates colors, identifies the typography scale, and organizes spacing into a coherent system. No manual cleanup needed.",[100,1382,1384],{"id":1383},"export-formats","Export Formats",[11,1386,1387],{},"MiroMiro supports multiple export formats out of the box:",[149,1389,1390,1399,1408,1416,1422],{},[29,1391,1392,1395,1396],{},[32,1393,1394],{},"CSS Custom Properties"," — ",[137,1397,1398],{},"--color-primary: #6B21A8;",[29,1400,1401,1404,1405],{},[32,1402,1403],{},"Tailwind CSS config"," — ready to paste into ",[137,1406,1407],{},"tailwind.config.js",[29,1409,1410,1395,1413],{},[32,1411,1412],{},"SCSS variables",[137,1414,1415],{},"$color-primary: #6B21A8;",[29,1417,1418,1421],{},[32,1419,1420],{},"JSON"," — structured token data for any design tool or build pipeline",[29,1423,1424,1427],{},[32,1425,1426],{},"Figma-ready"," — import directly into Figma using Tokens Studio",[18,1429,1431],{"id":1430},"method-2-manual-extraction-with-devtools","Method 2: Manual Extraction with DevTools",[11,1433,1434],{},"If you only need a few specific values, browser DevTools can work — but it's slow and error-prone.",[100,1436,1438],{"id":1437},"how-to-find-tokens-in-devtools","How to Find Tokens in DevTools",[26,1440,1441,1444,1451,1454],{},[29,1442,1443],{},"Right-click an element and select \"Inspect\"",[29,1445,1446,1447,1450],{},"In the Styles panel, look for CSS custom properties (variables starting with ",[137,1448,1449],{},"--",")",[29,1452,1453],{},"Check the Computed tab for resolved values",[29,1455,1456],{},"Repeat for every element type you care about",[100,1458,1460],{"id":1459},"the-problems-with-manual-extraction","The Problems with Manual Extraction",[149,1462,1463,1469,1479,1485,1491],{},[29,1464,1465,1468],{},[32,1466,1467],{},"No overview"," — you can only see styles for one element at a time",[29,1470,1471,1474,1475,1478],{},[32,1472,1473],{},"CSS variables are scattered"," — custom properties may be defined in ",[137,1476,1477],{},":root",", component-level selectors, or media queries",[29,1480,1481,1484],{},[32,1482,1483],{},"Computed vs. authored"," — DevTools shows hundreds of inherited properties you don't need",[29,1486,1487,1490],{},[32,1488,1489],{},"No deduplication"," — you'll find the same blue used 47 times with no way to know it's one token",[29,1492,1493,1496],{},[32,1494,1495],{},"No export"," — you're copying and pasting values into a spreadsheet",[11,1498,1499],{},"For anything beyond checking a single color value, manual extraction wastes hours.",[18,1501,1503],{"id":1502},"method-3-using-figma-plugins","Method 3: Using Figma Plugins",[11,1505,1506],{},"Some Figma plugins can import design tokens, but they require the tokens to already be in a structured format (JSON). You still need a way to extract them from the website first.",[11,1508,1509],{},[32,1510,1511],{},"Recommended workflow:",[26,1513,1514,1517,1525],{},[29,1515,1516],{},"Extract tokens from the website using MiroMiro (export as JSON)",[29,1518,1519,1520],{},"Import the JSON into Figma using ",[108,1521,1524],{"href":1522,"rel":1523},"https://tokens.studio/",[112],"Tokens Studio",[29,1526,1527],{},"Apply tokens to your Figma components",[11,1529,1530],{},"This gives you a complete, synchronized design system — from live website to Figma to code.",[18,1532,1534],{"id":1533},"what-makes-a-good-design-token-export-tool","What Makes a Good Design Token Export Tool?",[11,1536,1537],{},"When evaluating design token extraction tools, look for:",[1038,1539,1540,1550],{},[1041,1541,1542],{},[1044,1543,1544,1547],{},[1047,1545,1546],{},"Feature",[1047,1548,1549],{},"Why It Matters",[1056,1551,1552,1560,1568,1576,1584,1592],{},[1044,1553,1554,1557],{},[1061,1555,1556],{},"Automatic scanning",[1061,1558,1559],{},"Finds all tokens without clicking each element",[1044,1561,1562,1565],{},[1061,1563,1564],{},"Deduplication",[1061,1566,1567],{},"Groups identical values into single tokens",[1044,1569,1570,1573],{},[1061,1571,1572],{},"Typography detection",[1061,1574,1575],{},"Identifies the full type scale, not just individual sizes",[1044,1577,1578,1581],{},[1061,1579,1580],{},"Multiple export formats",[1061,1582,1583],{},"CSS, Tailwind, SCSS, JSON — whatever your stack needs",[1044,1585,1586,1589],{},[1061,1587,1588],{},"Color format support",[1061,1590,1591],{},"HEX, RGB, HSL, and modern OKLCH",[1044,1593,1594,1597],{},[1061,1595,1596],{},"Spacing analysis",[1061,1598,1599],{},"Recognizes the spacing system (4px grid, 8px grid, etc.)",[18,1601,1603],{"id":1602},"common-use-cases","Common Use Cases",[100,1605,1607],{"id":1606},"rebuilding-a-design-system","Rebuilding a Design System",[11,1609,1610],{},"Your team's design system has drifted from the live product. Extract the actual tokens being used in production to reconcile design and code.",[100,1612,1614],{"id":1613},"competitive-analysis","Competitive Analysis",[11,1616,1617],{},"See exactly what design decisions a competitor made — their color palette, type scale, and spacing system — without guessing.",[100,1619,1621],{"id":1620},"client-onboarding","Client Onboarding",[11,1623,1624],{},"Starting a redesign for a new client? Extract their current design tokens in minutes instead of auditing their site manually for days.",[100,1626,1628],{"id":1627},"design-to-code-handoff","Design-to-Code Handoff",[11,1630,1631],{},"Designers extract tokens from approved mockups deployed to staging, ensuring developers use exact values.",[18,1633,1635],{"id":1634},"get-started","Get Started",[11,1637,1638],{},"Extracting design tokens shouldn't take hours of DevTools spelunking. With MiroMiro, you can go from any live website to a complete, exported set of design tokens in under a minute.",[11,1640,1641,1645],{},[108,1642,1644],{"href":1344,"rel":1643},[112],"Install MiroMiro for Chrome"," — it's free to start.",{"title":295,"searchDepth":296,"depth":296,"links":1647},[1648,1649,1653,1657,1658,1659,1665],{"id":1275,"depth":296,"text":1276},{"id":1325,"depth":296,"text":1326,"children":1650},[1651,1652],{"id":1332,"depth":303,"text":1333},{"id":1383,"depth":303,"text":1384},{"id":1430,"depth":296,"text":1431,"children":1654},[1655,1656],{"id":1437,"depth":303,"text":1438},{"id":1459,"depth":303,"text":1460},{"id":1502,"depth":296,"text":1503},{"id":1533,"depth":296,"text":1534},{"id":1602,"depth":296,"text":1603,"children":1660},[1661,1662,1663,1664],{"id":1606,"depth":303,"text":1607},{"id":1613,"depth":303,"text":1614},{"id":1620,"depth":303,"text":1621},{"id":1627,"depth":303,"text":1628},{"id":1634,"depth":296,"text":1635},"2026-01-20","Extract design tokens — colors, typography, spacing, shadows — from any live website in seconds. Export to CSS variables, Tailwind config, or Figma. No manual copying from DevTools.","あらゆるWebサイトからデザイントークン（カラー、タイポグラフィ、スペーシング、シャドウ）を数秒で抽出。CSS変数、Tailwind設定、Figmaにエクスポート。DevToolsからの手動コピー不要。","/landing/miromiro-hover-inspector.png",{"dateModified":1671},"2026-04-04","/blog/how-to-export-design-tokens-from-website-to-figma-and-code",{"title":1264,"description":1667},"blog/how-to-export-design-tokens-from-website-to-figma-and-code",[1676,1677,1678,1679,1680,1681,1682,1683,1684,1685],"design tokens","design tokens export","extract design system","design tokens tool","css variables","tailwind config","figma design tokens","chrome extension","web development","design systems","7xVGJWEow9y45fmnEvYeTb3AC1zgrdvlIdNMrkZ8qm0",1776757346748]