Your AI agent is a brilliant engineer with terrible taste.
Ask Claude Code or Cursor to build you a feature, and it delivers. Ask it to design that feature, and you get the same thing everyone gets: purple gradients, glassmorphism cards, and a hero section that screams "an AI made this." It's not the model's fault. It has read the whole internet, so it designs like the average of the whole internet.
The fix, every session, is on you: paste the hex codes, spell out the font stack, explain the spacing rules. Close the tab, and it's all gone. Tomorrow, you do the ritual again.
I got tired of the ritual. So I built StyleSnatch, an open-source tool that turns any website's design language into a single SKILL.md file your agent can read. This is the story of how it works, and why I built it the way I did.
The Insight: Design Taste Is Already Machine-Readable 💡
Here's the thing that unlocked the whole project: every well-designed website already documents its own design system. It's just written in a language meant for browsers, not agents.
The palette lives in the CSS. The type scale lives in the computed styles. The motion personality lives in transition curves. Linear's famous restraint? That's 8px radius, 1px borders, no shadows, and 150ms ease-out transitions. It's all right there.
Meanwhile, the agent ecosystem quietly standardized on skills: markdown files that teach an agent how to do something. Claude Code reads them. Cursor reads them. Codex, Copilot, Gemini CLI, Windsurf. They all read files.
So the question became: can I build a pipeline that reads the invisible grammar of a website and writes it down as a skill?
How It Works: URL → Crawl → Distill → SKILL.md ⚙️
The user-facing flow is three steps. Paste a URL, let AI scan the surface, download the skill:
Under the hood, it's a pipeline with two heavy-lifting stages:
Stage 1: The Deep Crawl 🕷️
My first prototype used plain HTTP fetches, and it fell apart immediately. Modern sites are JavaScript all the way down. Fetch the HTML and you get a <div id="root"> and good luck. And the actual rendered design (the computed colors, the loaded fonts) only exists after the page runs.
So StyleSnatch uses Firecrawl to do the scraping properly. For each scan it pulls:
- The rendered HTML and CSS
- Branding analysis: palette, fonts, weights, spacing, border-radius
- A full rendered screenshot of the page
And it doesn't stop at the homepage. Up to 6 same-origin pages get crawled per scan, because a homepage alone lies about a design system. The real patterns (tables, forms, dense content) live in the inner pages.
Stage 2: AI Distillation, and Why the Screenshot Matters 🧠
This was the most important design decision in the whole tool.
Early versions sent only the extracted CSS to the LLM. The results were technically correct and completely wrong: the model would faithfully report 40 colors from the stylesheet, with no idea which three of them actually define the brand. CSS tells you what's possible; only the rendered page tells you what's true.
So StyleSnatch sends everything together: the HTML, the CSS data, and the screenshot, in one multimodal prompt. The screenshot gives the model eyes: it can see that the ink is near-black, the accent is used sparingly, the whitespace is generous. The CSS gives it ground truth: exact hex values, font names, easing curves. Neither alone is enough.
The model behind it is Gemini 2.5 Flash, called through OpenRouter. A scan takes about 20-40 seconds, and there's no signup.
Stage 3: The Output. One File, Any Agent 📄
Everything distills into a single SKILL.md:
---
name: linear-style
description: "Replicates the visual style of linear.app..."
---
## Design Tokens
- Palette: ink #08090A, paper #F7F8F8, accent #5E6AD2
- Typography: "Inter Display" 600 / -0.02em tracking
- Radius: 8px, subtle 1px border, no shadows
## Motion & Interaction
Hairline transitions (150ms ease-out), never bouncy.
`
Why markdown and not JSON? Because the consumer isn't a program. It's a language model. Markdown is the format agents natively "think" in: it carries structure and nuance ("never bouncy" is doing real work in that file). Drop it into your agent's skills folder, and from that session on, it designs like the site.
The Stack 🧱
For the tech-curious, the app itself is:
| Layer | Choice |
|---|---|
| Framework | TanStack Start (React) |
| Build | Vite + TypeScript |
| Styling | Tailwind CSS v4 |
| Motion | Framer Motion |
| Scraping | Firecrawl API |
| LLM | Gemini 2.5 Flash via OpenRouter |
| Hosting | Vercel |
Fun detail: the landing page had to eat its own dog food. A tool that claims to understand good design can't look like an AI-purple template, so the site runs on the same kind of restrained system StyleSnatch extracts from others: warm paper background, one accent, JetBrains Mono for the technical voice.
Why Open Source, and Why the LLM Is Swappable 🔓
StyleSnatch is 100% open source, and that's not a footnote. It's an architectural decision.
Both external dependencies sit behind clean seams:
- Don't like Firecrawl? Swap in your own scraping service.
- Want a different brain? The model is literally an environment variable: set
OPENROUTER_MODELto Claude, GPT, Llama, whatever OpenRouter serves. Both Firecrawl and OpenRouter have free tiers, so running your own instance costs nothing to start.
Local setup is the usual three lines:
bash
git clone https://github.com/shelar1423/stylesnatch
cp .env.example .env # add FIRECRAWL_API_KEY + OPENROUTER_API_KEY
npm install && npm run dev
And because it's open, the interesting future directions are open too: new output formats for new agents, deeper motion extraction, component-level analysis. If you've got ideas, the issues tab is waiting.
Stylesnatch
Stylesnatch is an elegant web application built for prompt-engineers and AI agents. It scans the sites you love and distills their visual essence into an AI-ready SKILL.md file, allowing your agents to ship interfaces that match that aesthetic.
Tech Stack
- Framework: TanStack Start / React
- Bundler: Vite
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- Data Scraping: Firecrawl
- LLM Processing: OpenRouter
Prerequisites
Before running the project locally, ensure you have the following installed:
- Node.js (v18 or higher)
- npm (comes installed automatically with Node.js)
You will also need API keys for the following services to make the app work:
- Firecrawl API Key: For deeply scraping and extracting color/typography data from websites. Get a free key at Firecrawl.
- OpenRouter API Key: For processing the scraped data into an agent-ready markdown skill using AI. Get a free key at OpenRouter.
Local Setup Instructions
…⭐ A star on the repo goes a long way for an early open-source project.
🔗 Try it live: stylesnatch.vercel.app
Snatch. Distill. Ship. 🚀
Good design taste takes human designers years to develop. Your agent can borrow it in 40 seconds, from any site on the internet.
So here's my question for the comments: which website's design would you want your AI agent to wear? Drop the URL below and I'll snatch a few of the best suggestions and share the resulting skills back. 👇
Top comments (0)