SkillUI nedir? Kurulum, Claude Code ile kullanım ve ağ çağrıları

SkillUI'ye bir web sitesi, git deposu ya da kendi proje klasörünü verirsin; renk, yazı tipi, boşluk, bileşen ve animasyon bilgisini tarayıp Claude Code'un okuyacağı bir tasarım klasörüne yazar (SKILL.md, CLAUDE.md ve DESIGN.md). Adına rağmen kendisi bir skill değil, skill üreten MIT lisanslı bir komut satırı aracı (npm paketi). README "yapay zeka yok, API anahtarı yok, bulut yok" diyor; kaynak kodunda ise ekran görüntüsü için microlink.io'ya ve yazı tipleri için Google Fonts'a ağ çağrısı görülüyor. Kurulum: npm install -g skillui (Node.js 18+).

Ne yapar: Bir siteden ya da depodan tasarım skill'i üretir
Tür: Komut satırı aracı (skill üretir)
Hesap/anahtar: Gerekmez
Ağ çağrısı: Kodda üçüncü taraf çağrısı var
Nerede: Claude Code (belgede yazan)
Son sürüm: 1.3.4 · 7 Mayıs 2026
Ücret: Ücretsiz, MIT

SkillUI ne işe yarar?

Bir sitenin "görünüşünü" Claude Code'a tarif etmek zordur. SkillUI bunu senin yerine yapar: adresini verdiğin siteyi, git deposunu ya da kendi proje klasörünü tarar; renkleri, yazı tiplerini, boşluk düzenini, bileşenleri ve animasyonları çıkarıp bir klasöre yazar. Sonra o klasörde claude komutunu açıp "bu tasarıma uygun bir sayfa yap" dersin; Claude Code klasördeki CLAUDE.md ve SKILL.md dosyalarını kendiliğinden okur (README).

Sitenin tasarım dilini çıkarmakNe alırsın: <ad>-design klasörü: SKILL.md, CLAUDE.md, DESIGN.md, tokens, fontsAyrı kurulum gerekir

SkillUI bir skill ya da eklenti değil, skill üreten bir komut satırı aracı. Önce kendi bilgisayarında çalıştırırsın, çıkan klasör skill gibi davranır. Ayrıca araç, ürettiği SKILL.md'yi kullanıcı düzeyindeki Claude Code skill klasörüne (~/.claude/skills/) de kopyalıyor; ayrıntı "Neye erişir?" bölümünde.

Kime yarar: Bir referans sitenin görsel dilini kodlama ajanına aktarmak isteyen tasarımcı ve geliştiricilere; kendi projesinin tasarım değerlerini Claude Code'a tanıtmak isteyenlere. Başkasının sitesini birebir kopyalamak için değil, ilham ve referans için kullan; telif ve marka hakları ayrı bir konu (hukuki görüş değildir).

SkillUI çıktısında ne var?

Dosya / klasör	Ne işe yarar
SKILL.md	Ana tasarım referansı; Claude Code açılışta okur.
CLAUDE.md	Klasörü açınca "önce SKILL.md'yi oku" diyen proje bağlamı (varsa üzerine yazmaz).
DESIGN.md	Renk, yazı tipi ve boşluk değerlerinin tam listesi.
`<ad>-design.skill`	Hepsini içeren ZIP paketi.
tokens/ ve fonts/	colors, spacing, typography JSON dosyaları ve indirilen yazı tipleri.
references/ ve screens/	Animasyon, yerleşim, bileşen, etkileşim notları ve ekran görüntüleri; README'ye göre ultra modda dolu.

Varsayılan mod HTML ve CSS'i HTTP ile okur, tarayıcı gerektirmez; ultra mod ekran görüntüleri, hover/focus farkları, animasyon ve bileşen çıkarımı ekler (README).

SkillUI nasıl kurulur?

Gerekenler: Node.js 18 veya üstü. Hesap, API anahtarı ya da plan gerekmez. Komutlar README'den aynen alındı.

Kurulum (README)› npm install -g skillui

Ultra mod için ek kurulum

Ultra mod gerçek bir tarayıcı açıp kaydırma ekran görüntülerini, hover/focus değişimlerini ve animasyonları çıkarır. README bunun için Playwright ister (isteğe bağlı).

Playwright (README)› npm install playwright

Chromium (README)› npx playwright install chromium

Atlas kartındaki sürüm sabitli komut (skillui@1.3.4) README'de yok; resmî komut sürümsüz. npm'deki güncel sürüm 1.3.4. Kurulumda çalışan betik (preinstall/postinstall) yok. Açılış sayfası hâlâ v1.3.2 yazıyor.

SkillUI nasıl kullanılır?

Tasarımı çıkar: Bir sitenin adresini ver (aşağıdaki ilk komut). Çıktı, çalıştığın klasörde <ad>-design adlı bir klasöre yazılır.
Claude Code'u aç: O klasöre gir ve claude yaz. Claude Code CLAUDE.md ve SKILL.md dosyalarını kendiliğinden okur.
İste: Ne yapmasını istediğini yaz; aşağıdaki örnek istek gibi.

Siteyi tara (README, varsayılan mod)› skillui --url https://linear.app

Daha derin tarama (README, ultra mod)› skillui --url https://linear.app --mode ultra

Kendi projeni tara (README)› skillui --dir ./my-app

Herkese açık git deposunu tara (README)› skillui --repo https://github.com/org/repo

Çıkan tasarımla sayfa yaptırma"Bu tasarım sistemine uygun bir açılış sayfası yap. Önce SKILL.md'yi oku; renkleri, yazı tiplerini ve boşlukları aynen kullan."README'deki örnek istek İngilizce ("Build me a landing page that matches this design system"); Türkçesini de yazabilirsin.

Çıktı klasörü --out ile değişir; --name ile ad verirsin; --format ile yalnız DESIGN.md istersin (design-md), --no-skill .skill paketini atlar.

SkillUI hangi ajanlarda çalışır?

Claude CodeVar	README çıktı klasöründe `claude` açmanı anlatıyor.
Codex, Cursor ve diğer ajanlarNet değil	README bir şey söylemiyor; çalışmaz demek değildir.
Claude.ai (web sohbeti)Net değil	README .skill paketini anıyor ama claude.ai'ye yüklemeyi anlatmıyor.
Windows, macOS, LinuxNet değil	README işletim sistemi listelemiyor.
Türkçe arayüzYok	Komut satırı çıktısı ve README İngilizce.

SkillUI neye erişir, neyi dışarı gönderir?

Okur

URL modunda hedef sitenin HTML ve CSS dosyaları (ultra modda siteyi Playwright ile gerçek tarayıcıda açar). Dir modunda verdiğin klasördeki .css, .scss, .ts, .tsx, .js, .jsx dosyaları. Repo modunda verdiğin depoyu geçici klasöre klonlar.

Yazar

Çıktı klasörü (<ad>-design) ve ek olarak kullanıcı düzeyi skill klasörüne SKILL.md kopyası: ~/.claude/skills/<ad>-design/SKILL.md (kaynak kodu, src/cli.ts).

Siler

Kaynak kodda kullanıcı dosyası silen bir bölüm görünmüyor; yalnız repo modundaki geçici klon temizleniyor.

Ağ

URL modunda hedef adres ekran görüntüsü için api.microlink.io'ya gönderiliyor (başarısızsa atlanıyor). Yazı tipi adları Google Fonts API'sine soruluyor ve yazı tipi dosyaları indiriliyor. Kaynak kodu (main) ve npm 1.3.4 paketi aynı çağrıları taşıyor.

README ve açılış sayfası "No AI, no API keys, no cloud" diyor. Yapay zeka ve anahtar konusunda doğru; ama "bulut yok" ifadesi kodla uyuşmuyor. Gizli, kurum içi ya da henüz yayımlanmamış bir sitenin adresini --url ile verme: adres üçüncü taraf bir servise gidebilir.

Çıkan SKILL.md ve diğer dosyalar tarattığın sitenin içeriğinden üretiliyor. Güvenmediğin bir siteyi taradıysan klasörü Claude Code'a açmadan önce dosyaları göz at.

GitHub Güvenlik Danışmanlıkları listesi boş; OSV'de skillui (npm) için kayıt yok (15.10.2026, iki tarama tamamlandı). Kayıtlı uyarı görünmüyor; bu "güvenli" demek değildir. npm paketinde kurulum betiği yok.

SkillUI ücretsiz mi?

Evet. SkillUI MIT lisanslı açık kaynak; README ve açılış sayfası ücret, plan ya da hesap koşulu yazmıyor. Kullandığın ajan aracının (Claude Code) kendi planı ayrı. TL fiyatı yok.

Lisans MIT diye README'de ve npm kaydında yazıyor; ama depoda LICENSE dosyası yok ve GitHub lisans alanı boş. Kurumsal kullanımda lisans dosyasını yapımcıdan teyit et.

Sık sorunlar

Ne oluyor	Ne yapmalı
Ultra modda "page.goto: Timeout 30000ms" hatası, çıktı boş	Kullanıcıların bildirdiği Sohbet widget'ı, izleme betiği ya da Cloudflare olan sitelerde görülüyordu (depo kaydı #4). 1.3.4 sürümü bunu "networkidle yerine domcontentloaded, 60 sn" diye düzeltiyor; eski sürümdeysen yeniden kur.
Ekran görüntüsünü çerez penceresi kaplıyor	Kullanıcıların bildirdiği Bunu çözen öneri (PR #7) ana dalda görünmüyor. Ultra modda sonucu gözle kontrol et.
Giriş isteyen sayfalar taranamıyor	Kullanıcıların bildirdiği README giriş desteği anlatmıyor; giriş ve tek sayfa uygulama keşfi öneren PR #1 açık.

Depoda 5 açık kayıt var; biri "Why no update??" (11 Eylül 2026). Son commit ve son sürüm 7 Mayıs 2026, yani yaklaşık beş aydır güncelleme yok.

SkillUI nasıl kaldırılır?

Aracı kaldır: npm uninstall -g skillui (README kaldırmayı anlatmıyor; bu genel npm yöntemi).
Çıktıyı sil: Ürettiği <ad>-design klasörünü sil.
Kopyayı sil: Claude Code'un kullanıcı skill klasöründeki ~/.claude/skills/<ad>-design klasörünü sil.

Sık sorulan sorular

SkillUI Claude Code ile nasıl kullanılır?

README'ye göre önce skillui --url ile bir siteyi (ya da --dir ile projeni) taratırsın. Çıkan klasöre girip claude yazarsın; Claude Code klasördeki CLAUDE.md ve SKILL.md dosyalarını kendiliğinden okur ve ondan sonra "bu tasarıma uygun sayfa yap" diyebilirsin.

SkillUI GitHub reposu nerede, nasıl kurulur?

Repo github.com/amaancoderx/npxskillui, npm paketi adı skillui. README kurulum için npm install -g skillui diyor (Node.js 18+). Lisansı README ve npm MIT olarak yazıyor ama depoda LICENSE dosyası yok.

SkillUI Codex gibi başka ajanlarda çalışır mı?

README yalnız Claude Code'dan söz ediyor. Codex, Cursor ve diğer istemciler için belgede bir şey yazmıyor; bu çalışmaz demek değildir.

SkillUI plugin mi, skill mi?

İkisi de değil: bir komut satırı aracı (npm paketi). Çalıştırınca bir tasarım klasörü üretiyor; o klasördeki SKILL.md Claude Code'da skill gibi kullanılıyor ve araç bu dosyayı kullanıcı skill klasörüne (~/.claude/skills) da kopyalıyor.

İlgili rehberler

DESIGN.md

21st MCP

ai-memory awwwards-animations

Brave Search MCP

Chrome DevTools MCP

Kaynaklar

Resmî kaynaklarda net olmayanlar: Çıktının Claude.ai (web), Codex ya da Cursor ile işe yarayıp yaramadığı · desteklenen işletim sistemleri · GitHub'da LICENSE dosyasının yokluğu (README ve npm MIT diyor) · README'deki "bulut yok" ifadesi ile kod arasındaki fark · Türkçe destek. Her biri ilgili bölümde yazılı.