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

说明与用途

StyleSnatch 自动提取网站的设计令牌，并生成 SKILL.md 文件，AI 代理可使用该文件生成与源站点风格一致的界面。

问题

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

结果

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.

工作流

• 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.

证据

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

来源

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

来源