10418 Ağustos 2026·4 içerik

Claude Code ile animasyonlu web sitesi: 4 araçlık kurulum

Kurulum gerçekten çalışıyor — Claude'a tasarım kütüphanesi, animasyon ve hazır bileşen havuzu ekleyip tek cümleyle site kurdurabiliyorsun. Ama dolaşımdaki kurulum rehberi eskimiş: dört komuttan üçü ya bayat pakete ya emekliye ayrılmış bir servise gidiyor. Aşağıdakilerin hepsini kaynağından doğruladım, çalışan hâli bu.

Claude CodeWeb TasarımGeliştirici Araçları

Kaynağın kendisi

Kurulumun orijinali şu depoda duruyor. Sadece ona bakmak istiyorsan buyur.

Aşağısı ise doğrulanmış hâli: her komutu paketin ve projenin kendi dokümanından teyit ettim, eskimiş olanların yerine çalışanını yazdım.

Orijinal kurulumu GitHub'da aç

"Ücretsiz" derken

Dördü de ücretsiz kullanılabiliyor ama ikisinin şartı var, baştan bilmekte fayda var:

Claude Code, kendi aboneliğiyle ücretlidir. Ancak başka bir sağlayıcıya yönlendirilebiliyor: iki ortam değişkeniyle, ücretsiz katman veren bir modele bağlanıyor. Hangi sağlayıcıların ücretsiz katmanı olduğunu ve sınırlarını bir önceki kaynakta, 103'te tek tek yazdım.

Burada bir pürüz var: Claude Code, Anthropic biçiminde konuşan bir adres bekliyor; ücretsiz sağlayıcıların çoğu ise OpenAI biçiminde konuşuyor. Bu yüzden araya çeviri yapan bir katman (LiteLLM gibi bir proxy) gerekiyor. Herkesin takıldığı yer burasıdır — sağlayıcı ücretsiz olsa bile adresi doğrudan yapıştırmak çalışmaz.

LiteLLM kuracaksan sürüme dikkat

24 Mart 2026'da LiteLLM'in PyPI'daki 1.82.7 ve 1.82.8 sürümlerine kimlik bilgisi çalan kod bulaştırıldı — SSH anahtarları, bulut kimlikleri ve kripto cüzdanları hedefteydi. Paket kaldırılıp geri döndürüldü, güncel sürüm temiz. Sürüm belirtmeden kurarsan güncelini alırsın; ama bir yerde "şu sürümü kur" diye sabitlenmiş bir komut görürsen o iki sürüm olmadığından emin ol.

21st.dev tarafında ise arama, yayınlama ve yönetme ücretsiz; bileşen kurulumu günde iki taneyle sınırlı ve yapay zekâyla varyant üretmek kredi istiyor. Yani keşfetmek bedava, seri üretim değil.

Ücretsiz sağlayıcılar → 103

Dolaşımdaki rehberin bozuk komutları

Kurulum mantığı doğru, komutlar eskimiş. Aşağıdakilerin hepsini paketlerin kendi kayıtlarından doğruladım — üsttekini yazarsan ya yanlış paket kurulur ya hiçbir şey olmaz.

npm install -g uipro-cli — projenin kendi README'si bu paketin bayat olduğunu ve güncel içerik için kullanılmaması gerektiğini söylüyor.

npm install -g ui-ux-pro-max-cli — kurduğu komut yine uipro, değişen sadece paket adı.

npm install framer-motion — kütüphane 2025'te Framer'dan ayrıldı; bu ad hâlâ çalışıyor ama artık geliştirilmiyor.

npm install motion — import da "motion/react" adresinden yapılır.

Animasyon kütüphanesini kurulum aşamasında kurmak — ortada proje yokken kurulan paket hiçbir yere yazılmaz.

Önce site projesini oluştur, Motion'ı projenin içinde kur. O bir Claude eklentisi değil, projenin bağımlılığı.

@21st-dev/magic + 21st.dev/magic/console — paket npm'de kullanımdan kaldırıldı; uyarısı "emekliye ayrılmış bir arka uçla konuşuyor, eski anahtarlar sıfırlandı" diyor.

npx @21st-dev/cli@latest init — anahtarı da 21st.dev/mcp adresinden al.

Claude Code — işi yapan araç

Diğer üçü Claude'a yetenek ekliyor; siteyi yazan bu. Terminalde çalışıyor, dosyaları doğrudan oluşturup düzenliyor. Ücretsiz sağlayıcıya bağlayacaksan aşağıdaki iki değişken işin özü.

Başka sağlayıcıya yönlendirme

export ANTHROPIC_BASE_URL="<sağlayıcının Anthropic uyumlu adresi>"
export ANTHROPIC_AUTH_TOKEN="<anahtarın>"
export ANTHROPIC_API_KEY=""

Adresin Anthropic uyumlu olması şart. Ücretsiz sağlayıcıların çoğu OpenAI biçiminde konuşuyor; onlarda araya çevirici proxy koyman gerekir. Sağlayıcı listesi ve sınırları için 103'e bak.

Aç

UI/UX Pro Max — tasarım zekâsı

Claude'a hazır bir tasarım sistemi veriyor: stiller, renk paletleri, font eşleşmeleri, erişilebilirlik kuralları. Farkı şurada görürsün — bu olmadan çıkan sayfa "yapay zekâ yapmış" gibi durur, bununla tasarlanmış gibi.

İki yol var

# Claude Code içinden (en kolayı):
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# Ya da terminalden:
npm install -g ui-ux-pro-max-cli
uipro init --ai claude --global

Paket adı ui-ux-pro-max-cli; eski uipro-cli bayat. Sondaki --global bayrağı ~/.claude/skills/ altına kurar, yani tüm projelerinde açık olur. Tek projede istiyorsan bayrağı at ve proje klasöründe çalıştır.

Aç

Motion — animasyon (eski adı Framer Motion)

Sayfa geçişleri, üzerine gelince oynayan öğeler, kaydırdıkça beliren bölümler. Sitenin "pahalı" hissettiren kısmı büyük ölçüde bu. Claude bu kütüphaneyi zaten biliyor; senin yapman gereken projeye eklemek.

Projenin içinde

npm install motion

// React tarafında:
import { motion } from "motion/react"

Bu bir Claude eklentisi değil — "bağlanacak" bir şey yok. Site projesi oluşturulmadan önce kurulursa hiçbir yere yazılmaz. Sıra: önce proje, sonra bu.

Aç

21st.dev — hazır bileşen havuzu

Topluluğun ürettiği hazır React bileşenleri: butonlar, menüler, açılış bölümleri, kartlar. Beğendiğini seçiyorsun, Claude siteye yerleştiriyor. Sıfırdan bileşen yazdırmaktan hem hızlı hem sonucu daha derli toplu.

Kurulum

npx @21st-dev/cli@latest init

Anahtarı 21st.dev/mcp adresinden al. Eskiden anlatılan @21st-dev/magic paketi ve magic/console adresi artık geçersiz — o paket npm'de kullanımdan kaldırıldı ve eski anahtarlar sıfırlandı. Arama ücretsiz, bileşen kurulumu günde iki tane.

Aç

← Tüm kaynaklar