I Built StyleSnatch, an Open-Source Tool That Turns Any Website Into a Skill Your AI Can Wear

Description and use

StyleSnatch automatically extracts a website’s design tokens into a SKILL.md file that AI agents can use to generate interfaces matching the source site’s style.

Problem

AI agents often produce generic, unstyled UI because they lack a clear design language from target websites, leading to repetitive and unappealing visual results.

Outcome

StyleSnatch reduces the design hand‑off time from hours to seconds, producing a reusable SKILL.md that AI agents can use to generate UI that faithfully reproduces a target website’s visual style.

Workflow

• 1. User pastes a website URL into the StyleSnatch web app.
• 2. The app uses Firecrawl to deep‑crawl up to six same‑origin pages, retrieving rendered HTML, CSS, branding data, and a full screenshot.
• 3. The collected data is sent as a multimodal prompt to Gemini 2.5 Flash via OpenRouter.
• 4. The LLM distills the design tokens (palette, typography, radius, motion) into a markdown SKILL.md file.
• 5. The user downloads the SKILL.md and places it in their agent’s skills folder, after which the agent can generate UI that matches the source site.

Evidence

StyleSnatch uses Firecrawl to do the scraping properly. For each scan it pulls: rendered HTML and CSS, branding analysis, and a full rendered screenshot.

Source

The model behind it is Gemini 2.5 Flash, called through OpenRouter. A scan takes about 20‑40 seconds, and there's no signup.

Source