Lucent-Snow

Lucent-Snow / style-extractor

Public

一个能够提取最大化提取网页风格的skill

311
18
89% credibility
Found Feb 03, 2026 at 70 stars 4x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

A helper pack for AI assistants to analyze live websites and create Markdown style guides capturing colors, fonts, spacing, components, and dynamic animations.

How It Works

1
🕵️ Spot a Cool Website

You see an amazing website and want to capture its colors, fonts, spacing, and smooth animations for your own projects.

2
📥 Grab the Helper Tool

Download the style extractor pack and drop it into your AI assistant's special folder so it's ready to use.

3
💬 Chat with Your AI

Open your favorite AI helper and mention the style extractor by name.

4
✨ Request Style Capture

Simply tell it 'extract the style from this website link' and watch it spring into action.

5
🔍 AI Studies the Site

Your AI opens the real website, takes notes on designs, movements, and details, feeling like a design detective.

📄 Get Your Style Guide

Celebrate as a beautiful document appears with all the colors, fonts, animations, and tips ready for you to recreate the magic.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 70 to 311 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is style-extractor?

Style-extractor is a JavaScript skill for AI tools like Codex or Claude that pulls colors, fonts, spacing, components, and state matrices from live web pages, even capturing runtime dynamic effects like timing, easing, keyframes, and JS-driven animations via Chrome DevTools MCP. Feed it a URL, and it spits out a Markdown style guide—optionally with an HTML prototype—saving hours of manual inspection. It's built for Node.js environments with Chrome, turning vague site visuals into actionable design docs.

Why is it gaining traction?

Unlike basic CSS rippers, it grabs evidence from real browser sessions, including animation chains and library hints, making outputs reliable for complex sites. Developers dig the zip download simplicity and public skills folder integration—no heavy setup, just drop into your Codex or Claude workflow. With 273 stars, it's hooking frontend teams tired of screenshot guessing, especially as a MCP skill on GitHub alongside anthropic and copilot variants.

Who should use this?

UI engineers reverse-engineering competitor designs for clones or audits. Design system maintainers documenting dynamic UIs from legacy sites. Freelance devs pitching style extractor deliverables to clients needing quick prototypes from references like endfield or motherduck.

Verdict

Grab the style extractor zip if you're in AI-assisted workflows—solid for dynamic sites, with strong reference docs and Chrome MCP backbone. At 273 stars and 0.8999999761581421% credibility, it's early but battle-tested; watch for JS animation expansions before production scale.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.