당신의 AI 에이전트는 뛰어난 엔지니어이지만, 미적 감각은 형편없습니다.

Claude Code나 Cursor에게 기능을 만들어 달라고 하면 결과물을 내놓습니다. 하지만 그 기능을 _디자인(design)_해 달라고 하면, 누구나 다 아는 결과물을 받게 됩니다. 보라색 그라데이션, 글래스모피즘 (glassmorphism) 카드, 그리고 "AI가 만들었습니다"라고 외치는 듯한 히어로 섹션(hero section) 말이죠. 이것은 모델의 잘못이 아닙니다. 모델은 인터넷 전체를 읽었기 때문에, 인터넷 전체의 _평균_처럼 디자인하는 것입니다.

매 세션마다 해결책은 당신의 몫입니다. 헥스 코드(hex codes)를 붙여넣고, 폰트 스택(font stack)을 일일이 나열하고, 간격 규칙을 설명해야 합니다. 탭을 닫으면 이 모든 것은 사라집니다. 내일, 당신은 이 의식을 다시 반복해야 합니다.

저는 이 반복되는 의식에 지쳤습니다. 그래서 에이전트가 읽을 수 있는 단일 SKILL.md 파일로 어떤 웹사이트의 디자인 언어든 변환해 주는 오픈 소스 도구인 **StyleSnatch**를 만들었습니다. 이것은 이것이 어떻게 작동하는지, 그리고 왜 제가 이런 방식으로 만들었는지에 대한 이야기입니다.

통찰: 디자인 취향은 이미 기계가 읽을 수 있다 💡

이 프로젝트를 가능하게 한 핵심은 이것입니다. 잘 디자인된 모든 웹사이트는 이미 자신의 디자인 시스템을 문서화하고 있습니다. 단지 에이전트가 아닌 브라우저를 위한 언어로 작성되어 있을 뿐입니다.

색상 팔레트(palette)는 CSS에 들어 있습니다. 타이포그래피 스케일(type scale)은 계산된 스타일(computed styles)에 들어 있습니다. 모션의 개성(motion personality)은 전환 곡선(transition curves)에 들어 있습니다. Linear의 유명한 절제미요? 그것은 8px 반경(radius), 1px 테두리(borders), 그림자 없음, 그리고 150ms의 ease-out 전환입니다. 이 모든 것이 바로 그곳에 있습니다.

한편, 에이전트 생태계는 조용히 **기술 (skills)**을 표준화했습니다. 이는 에이전트에게 무언가를 수행하는 방법을 가르치는 마크다운 (markdown) 파일입니다. Claude Code는 이를 읽습니다. Cursor도 읽습니다. Codex, Copilot, Gemini CLI, Windsurf 모두 파일을 읽습니다.

그래서 질문이 생겼습니다. 웹사이트의 보이지 않는 문법을 읽어서 기술 (skill)로 기록하는 파이프라인을 구축할 수 있을까?

작동 방식: URL → 크롤링 (Crawl) → 추출 (Distill) → SKILL.md ⚙️

사용자 대상 흐름은 세 단계입니다. URL을 붙여넣고, AI가 표면을 스캔하게 한 뒤, 기술 (skill)을 다운로드합니다.

내부적으로는 두 가지 핵심 단계를 거치는 파이프라인 구조입니다:

1단계: 심층 크롤링 (The Deep Crawl) 🕷️

제가 처음 만든 프로토타입은 일반 HTTP 요청을 사용했는데, 바로 무너졌습니다. 요즘 웹사이트들은 전반적으로 JavaScript로 구성되어 있습니다. HTML만 가져오면 <div id="root"> 정도가 전부이고, 실제 렌더링된 디자인(계산된 색상, 로드된 폰트 등)은 페이지가 실행된 후에야 존재하기 때문입니다.

그래서 StyleSnatch는 **Firecrawl**을 사용하여 제대로 크롤링합니다. 스캔할 때마다 다음 정보를 가져옵니다:

• 렌더링된 HTML 및 CSS
• 브랜딩 분석: 팔레트, 폰트, 웨이트(weights), 간격(spacing), border-radius
• 페이지의 전체 렌더링 스크린샷

그리고 홈페이지에서 멈추지 않습니다. 한 번의 스캔으로 최대 6개의 동일 출처 페이지를 크롤링하는데, 이는 홈페이지만으로는 디자인 시스템에 대한 정보가 불완전하기 때문입니다. 실제 패턴(테이블, 폼, 밀집된 콘텐츠)은 내부 페이지들에 존재합니다.

2단계: AI 증류 (AI Distillation), 그리고 스크린샷이 중요한 이유 🧠

이것이 전체 도구에서 가장 중요했던 설계 결정이었습니다.

초기 버전에서는 추출된 CSS만 LLM(대규모 언어 모델)에 전송했습니다. 그 결과는 기술적으로는 정확했지만 완전히 틀렸습니다: 모델은 스타일시트에서 40가지 색상을 충실하게 보고할 뿐, 그중 어떤 세 가지가 실제로 브랜드를 정의하는지 전혀 알지 못했습니다. CSS는 무엇이 가능한지 알려줄 뿐이며, 오직 렌더링된 페이지만이 무엇이 진짜인지 알려줍니다.

따라서 StyleSnatch는 HTML, CSS 데이터, 그리고 스크린샷을 하나의 멀티모달 프롬프트 (multimodal prompt)에 모두 함께 담아 보냅니다. 스크린샷은 모델에게 눈을 제공합니다. 모델은 잉크 색상이 거의 검은색에 가깝다는 것, 강조색 (accent)이 절제되어 사용되었다는 것, 여백 (whitespace)이 풍부하다는 것을 볼 수 있습니다. CSS는 모델에게 그라운드 트루스 (ground truth, 실제 정답)를 제공합니다. 정확한 헥스 값 (hex values), 폰트 이름, 이징 커브 (easing curves) 같은 것들 말이죠. 어느 하나만으로는 충분하지 않습니다.

이 기술의 배후에 있는 모델은 OpenRouter를 통해 호출되는 Gemini 2.5 Flash입니다. 스캔에는 약 20~40초가 소요되며, 별도의 가입 절차는 없습니다.

3단계: 출력물. 하나의 파일, 어떤 에이전트든 가능 📄

모든 것이 단 하나의 SKILL.md 파일로 응축됩니다:

---
name: linear-style
description: "Replicates the visual style of linear.app..."
...

왜 JSON이 아니라 마크다운 (markdown)일까요? 소비자가 프로그램이 아니기 때문입니다. 바로 언어 모델 (language model)입니다. 마크다운은 에이전트들이 본래적으로 "생각"하는 형식입니다. 마크다운은 구조와 뉘앙스를 모두 전달합니다 ("never bouncy"와 같은 표현이 해당 파일 내에서 실제로 역할을 수행합니다). 이를 에이전트의 스킬 폴더에 넣기만 하면, 그 세션부터 에이전트는 해당 사이트처럼 디자인하게 됩니다.

기술 스택 (The Stack) 🧱

기술적인 부분에 관심이 있는 분들을 위해, 앱 자체의 구성은 다음과 같습니다:

계층 (Layer)	선택 (Choice)
프레임워크 (Framework)	TanStack Start (React)
...

재미있는 디테일은, 랜딩 페이지가 스스로의 기술을 직접 사용해야 했다는 점입니다 (eat its own dog food). 좋은 디자인을 이해한다고 주장하는 도구가 AI 특유의 보라색 템플릿처럼 보일 수는 없기에, 이 사이트는 StyleSnatch가 다른 사이트에서 추출하는 것과 동일한 종류의 절제된 시스템을 기반으로 작동합니다. 따뜻한 종이 느낌의 배경, 하나의 강조색, 그리고 기술적인 목소리를 위한 JetBrains Mono 폰트를 사용합니다.

왜 오픈 소스인가, 그리고 왜 LLM을 교체 가능한가 🔓

StyleSnatch는 100% 오픈 소스이며, 이는 단순한 각주가 아닙니다. 이는 설계상의 결정입니다.

두 가지 외부 의존성(External dependencies) 모두 깔끔한 이음매(Seams) 뒤에 위치합니다:

• Firecrawl이 마음에 들지 않나요? 여러분만의 스크래핑 서비스(Scraping service)로 교체하세요.
• 다른 두뇌를 원하시나요? 모델은 말 그대로 환경 변수(Environment variable)입니다. OPENROUTER_MODEL을 Claude, GPT, Llama 등 OpenRouter가 제공하는 무엇이든으로 설정하세요. Firecrawl과 OpenRouter 모두 무료 티어(Free tiers)를 제공하므로, 자체 인스턴스를 실행하는 데 초기 비용은 들지 않습니다.

로컬 설정은 평소와 다름없이 세 줄이면 됩니다:

bash git clone https://github.com/shelar1423/stylesnatch cp .env.example .env # FIRECRAWL_API_KEY + OPENROUTER_API_KEY 추가 npm install && npm run dev

그리고 오픈 소스이기 때문에, 흥미로운 미래 방향성 또한 열려 있습니다: 새로운 에이전트(Agents)를 위한 새로운 출력 형식, 더 깊은 모션 추출(Motion extraction), 컴포넌트 수준의 분석(Component-level analysis) 등이 있습니다. 아이디어가 있다면 이슈(Issues) 탭이 기다리고 있습니다.

shelar1423 / stylesnatch

Stylesnatch

Stylesnatch는 프롬프트 엔지니어(Prompt-engineers)와 AI 에이전트(AI agents)를 위해 구축된 우아한 웹 애플리케이션입니다. 여러분이 좋아하는 사이트를 스캔하여 그 시각적 본질을 AI가 즉시 사용할 수 있는 SKILL.md 파일로 추출하며, 이를 통해 여러분의 에이전트가 해당 미학(Aesthetic)과 일치하는 인터페이스를 구현할 수 있도록 합니다.

기술 스택 (Tech Stack)

• 프레임워크 (Framework): TanStack Start / React
• 번들러 (Bundler): Vite
• 스타일링 (Styling): Tailwind CSS v4
• 애니메이션 (Animations): Framer Motion
• 데이터 스크래핑 (Data Scraping): Firecrawl
• LLM 처리 (LLM Processing): OpenRouter

사전 요구 사항 (Prerequisites)

프로젝트를 로컬에서 실행하기 전에 다음 항목이 설치되어 있는지 확인하세요:

• Node.js (v18 이상)
• npm (Node.js 설치 시 자동으로 포함됨)

앱을 작동시키려면 다음 서비스의 API 키도 필요합니다:

1. Firecrawl API Key: 웹사이트로부터 색상/타이포그래피 (typography) 데이터를 깊이 있게 스크래핑(scraping)하고 추출하기 위해 필요합니다. Firecrawl에서 무료 키를 받으세요.
2. OpenRouter API Key: AI를 사용하여 스크래핑된 데이터를 에이전트(agent)가 즉시 사용할 수 있는 마크다운 (markdown) 스킬 (skill)로 처리하기 위해 필요합니다. OpenRouter에서 무료 키를 받으세요.

로컬 설정 안내 (Local Setup Instructions)

…

View on GitHub

⭐ 초기 오픈 소스 (open-source) 프로젝트에게 리포지토리(repo)의 스타(star)는 큰 힘이 됩니다.
🔗 라이브 체험하기: stylesnatch.vercel.app

낚아채고(Snatch), 추출하고(Distill), 출시하세요(Ship). 🚀

훌륭한 디자인 감각을 갖추기 위해서는 인간 디자이너가 수년의 시간을 들여야 합니다. 하지만 여러분의 에이전트는 인터넷상의 어떤 사이트에서든 40초 만에 그 감각을 빌려올 수 있습니다.

댓글로 질문을 하나 드릴게요: 여러분의 AI 에이전트가 어떤 웹사이트의 디자인을 입기를 원하시나요? 아래에 URL을 남겨주시면, 가장 좋은 제안 중 몇 가지를 골라 스내치(snatch)한 뒤 결과물인 스킬 (skills)을 다시 공유해 드리겠습니다. 👇