Frontend Design eklentisi: Claude Code'a özgün arayüz tasarımı yaptırmak
Eklentiyi kurup Claude Code'a bir web arayüzü kodlatırsın; Claude önce konuya özgü kısa bir tasarım planı çıkarır, "yapay zekâ yapmış" görünen kalıplardan kaçınır, sonra kodlar ve kendi işini eleştirir. Anthropic'in Claude Code için yayımladığı resmî eklenti; içinde tek bir skill (talimat dosyası) var. Ücretsiz ve açık kaynak (Apache-2.0); ama Claude Code ücretsiz planda yok. Dosyalarına ya da internete kendisi erişmez: yalnız bir talimat metni içerir.
- Ne yapar
- Claude'un arayüzü kodlamadan önce tasarım planı yapmasını sağlar
- Tür
- Plugin (içinde 1 skill)
- Yapımcı
- Anthropic (resmî)
- İçerik
- Yalnız talimat metni, kod çalıştırmaz
- Dikkat
- Vitrin/README eski sürümü anlatıyor
- Nerede
- Claude Code: terminal, VS Code, masaüstü Code sekmesi
- Ücret
- Eklenti ücretsiz; Claude Code ücretli plan ya da API ister
Frontend Design ne işe yarar?
Claude'a yaptırılan açılış sayfaları ve paneller çoğu zaman birbirine benzer: aynı renk düzeni, aynı kart dizilimi, her başlığın üstünde büyük harfli küçük etiket. Bu eklenti Claude Code'a, arayüzü kodlamadan önce işe özgü bir tasarım yönü seçmesini söyleyen bir talimat ekler.
- Konuyu, kitleyi ve sayfanın asıl işini belirler; brief söylemiyorsa önerip onaylatır.
- Kısa bir tasarım planı çıkarır: 4–6 renk, yazı tipleri, kaba yerleşim, ilkeler.
- Planı "genel varsayılan mı?" diye brief'e karşı gözden geçirir, neyi neden değiştirdiğini söyler.
- Kodlar; ortam izin veriyorsa ekran görüntüsüyle kendi işini eleştirir.
Yeni bir arayüz kurarken de var olan bir arayüzü yeniden biçimlendirirken de kullanılır. Hareketi az kullanmayı, mobil uyumu, klavye odağını ve sade arayüz metnini de ister.
!Eklentinin GitHub README'si ve vitrin sayfası eski sürümü anlatıyor ("yüksek etkili animasyonlar", kaydırınca beliren efektler). Güncel talimat (SKILL.md) bunun tersine yakın: kullanıcının tetiklemediği hareket az ve bilinçli olmalı, her bölümde beliren giriş animasyonları "yapay zekâ işi" işareti sayılıyor, azaltılmış hareket tercihi gözetilmeli. Bu rehber güncel talimatı esas alır.
Kime yarar: Claude Code ile pazarlama sayfası, portfolyo ya da panel yaptıran ve çıktıların şablon gibi görünmesinden şikâyet edenlere. Ürün uygulaması ekranları için ayrıca kendi tasarım sistemini tanıt.
Frontend Design nasıl kurulur?
Komutlar Claude Code eklenti belgelerinden alındı. Kurulum komutu hemen kurmaz; eklentinin panelini açar.
› /plugin install frontend-design@claude-plugins-officialAçılan panelde kapsamı seç: yalnız sen (tüm projeler), bu proje (depodaki herkes) ya da yalnız sen bu projede. Açık oturumda hemen etkinleştirmek için /reload-plugins yaz ya da Claude Code'u yeniden başlat.
› claude plugin install frontend-design@claude-plugins-officialCode sekmesinde (yerel oturum) mesaj kutusunun yanındaki + › Plugins › Add plugin › frontend-design yolunu izle.
Kurduktan sonra bir şey çağırmana gerek yok: ön yüz işi istediğinde Claude skill'i kendiliğinden yükler. Elle çağırmak istersen /frontend-design:frontend-design yaz.
Frontend Design nasıl kullanılır?
İsteği normal yaz; Claude önce tasarım planını çıkarır. Planı görmeden kodlamasını istemiyorsan bunu açıkça söyle.
Mobil uyum, klavye odağı ve azaltılmış hareket tercihi skill'in kendi kalite tabanında var; yine de çıktıyı küçük ekranda ve klavyeyle sen de dene.
Nerede çalışır? Claude Code ve claude.ai
| Claude Code (terminal, VS Code)Var | Eklenti olarak kurulur. |
|---|---|
| Claude masaüstü, Code sekmesiVar | Yerel oturumda + › Plugins ile. |
| Claude Code bulut oturumları (claude.ai/code)Yok | Bilgisayarına kurduğun eklenti bulut oturumlarında yüklenmez; orada claude.ai hesabında açık skill'ler kullanılır. |
| claude.ai sohbetiKısmen | Aynı talimat Anthropic'in örnek skill setinde var; Customize sonra Skills'ten açılır ve kod çalıştırma açık olmalı. |
claude.ai'de hangi planda açık olduğu resmî kaynaklarda çelişkili: bir yardım sayfası ücretsiz plan dahil diyor, skill deposu ücretli planlarda diyor. Listende görünmüyorsa Claude Code'da eklenti olarak kurabilirsin.
İkisini birden kurma: Claude Code'da hem bu eklentiyi hem örnek skill setini (example-skills) kurmak aynı talimatın iki kopyası demektir.
Dosyalarıma ya da internete erişir mi?
Eklentinin kendisi hiçbir şey okumaz: yalnız bir talimat metni (SKILL.md) içerir. Kodu Claude kendi araçlarıyla, senin Claude Code izin kurallarına göre yazar.
Eklenti yazmaz; ajan senin izinlerinle proje dosyalarını yazar.
Eklentide silme adımı yok.
Eklenti ağ çağrısı yapmaz. Resmî eklenti pazarında otomatik güncelleme varsayılan açık: talimat değişirse sonraki oturumda yeni hâli gelir.
Otomatik güncellemeyi kapatmak için /plugin › Marketplaces › claude-plugins-official › Disable auto-update.
!Ekip projesine "proje" kapsamında kurduğun eklenti depoya girer ve projedeki herkese gelir.
Eklenti klasöründe hook, MCP sunucusu, betik, ajan ve komut yok; yalnız SKILL.md ve LICENSE.txt var. Depo için GitHub güvenlik danışmanlığı kaydı yok (15 Ekim 2026 kontrolü); kayıtlı uyarı görünmüyor. Bu bir güvenlik denetimi ya da sertifika değil, "güvenli" demek de değildir.
Frontend Design ücretsiz mi?
Eklentinin kendisi ücretsiz ve açık kaynak (Apache-2.0). Ama çalıştığı Claude Code, Claude'un ücretsiz planında yok: ücretli bir Claude planı (Pro, Max, Team, Enterprise) ya da kullandıkça ödenen Anthropic Console hesabı gerekir. Masaüstü uygulamasının Code sekmesi ücretli abonelik ister.
Skill talimatı Claude'un okuduğu bağlama girer; bu da kullanım hakkından biraz pay alır. Claude Code'daki /plugin panelinde eklentinin "Context cost" tahmini görünür. TL fiyatı yok.
Sık sorunlar ve çözümleri
| Ne oluyor | Ne yapmalı |
|---|---|
| Kurduktan sonra etkisini görmüyorum | Açık oturumda /reload-plugins yaz ya da Claude Code'u yeniden başlat; ön yüz işi istediğinde skill kendiliğinden yüklenir. |
| Çıktılar yine şablon gibi | Brief'i özgünleştir (hedef kitle, ton, referans); Claude'dan önce tasarım planını göstermesini iste ve neyi neden değiştirdiğini sor. |
| Hem bu eklenti hem örnek skill seti kurulu | Aynı talimatın iki kopyası demektir; birini kaldır. |
| Bulut oturumunda (claude.ai/code) çalışmıyor | Bilgisayara kurulan eklenti bulut oturumlarında yüklenmez; skill'i claude.ai hesabında aç. |
| Talimat birden değişti | Resmî pazarda otomatik güncelleme açıktır; kapatmak için /plugin panelinden Disable auto-update. |
Frontend Design nasıl kaldırılır?
- Eklenti paneli: Claude Code'da /plugin panelinden frontend-design eklentisini kaldır.
- Komutla:
claude plugin uninstall frontend-design@claude-plugins-official(Claude Code'un genel eklenti komutu; bu eklentinin belgesinde ayrıca yazmıyor). - Proje kapsamında kurduysan: Depodaki eklenti ayarını da kaldır; yoksa projedeki herkese gelmeye devam eder.
Özet: ne yapar, hangi koşulla
- Açılış sayfası ya da panel gibi bir web arayüzünü "yapay zekâ yapmış" gibi durmayan, konuya özgü bir tasarımla kodlatmakAyrı kurulum gerekirÜcretli plandaÖnce kısa tasarım planı (renkler, yazı tipleri, yerleşim), sonra kod ve öz eleştiri · Eklenti ücretsiz (Apache-2.0); Claude Code ücretsiz planda yok
- claude.ai sohbetinde sayfa ya da arayüz ürettirirken aynı tasarım talimatını devreye almakPlan koşulu net değilSohbette ya da yapıtta üretilen sayfa kodu · Ayarlarda kod çalıştırma açık; Customize > Skills'ten açılır. Resmî kaynaklar plan konusunda çelişiyorNe yapabilirsin: Customize > Skills listesinde görünmüyorsa hesabında açık değildir; Claude Code'da eklenti olarak kurabilirsin
Etiketler: "Bağlantı gerekir" başka bir hesabı ya da uygulamayı bağlamayı, "Ayrı kurulum gerekir" ayrı bir program kurmayı anlatır. Ücret bilgisi her özellik için ayrı; ürünün ücretsiz planı olması bütün özelliklerin ücretsiz olduğu anlamına gelmez. Bilgi 13 Ekim 2026 tarihinde resmî kaynaklardan derlendi.
Sık sorulan sorular
Frontend Design nedir?
Anthropic'in Claude Code için resmî eklentisi. Claude'a web arayüzünü kodlamadan önce işe özgü bir tasarım planı çıkarmasını ve şablon gibi duran kalıplardan kaçınmasını söyleyen tek bir skill içerir.
Frontend Design nasıl kurulur?
Claude Code'da /plugin install frontend-design@claude-plugins-official yazıp açılan panelde kapsamı seç; ya da kabukta claude plugin install frontend-design@claude-plugins-official.
Her seferinde çağırmam gerekir mi?
Hayır. Ön yüz işi istediğinde Claude skill'i kendiliğinden kullanır. Elle çağırmak için /frontend-design:frontend-design yazılır.
Frontend Design ücretsiz mi?
Eklenti ücretsiz ve açık kaynak; ama Claude Code ücretli Claude planı ya da kullandıkça ödenen API hesabı ister.
claude.ai'de çalışır mı?
Aynı talimat Anthropic'in örnek skill setinde var; claude.ai'de kod çalıştırma açıkken Customize › Skills'ten açılır. Hangi planda açık olduğu resmî kaynaklarda çelişkili; listende yoksa Claude Code'da eklenti olarak kur.
Dosyalarıma ya da internete erişir mi?
Hayır. Yalnız bir talimat metni içerir; kodu Claude kendi araçlarıyla, senin izin kurallarına göre yazar.
README'deki "etkileyici animasyonlar" neden talimatla çelişiyor?
GitHub README'si ve vitrin sayfası eski sürümü anlatıyor. Güncel SKILL.md hareketi az ve bilinçli kullanmayı ister; bu rehber güncel talimatı esas alır.
Frontend Design hangi işlerde, hangi setlerde?
İlgili rehberler
Kaynaklar
- Eklenti klasörü (resmî repo)
- SKILL.md
- Claude Code eklenti kurulumu
- Claude Code eklentileri
- claude.ai'de skill kullanma
- Örnek skill deposu
Resmî kaynaklarda net olmayanlar: claude.ai sohbetinde skill'in hangi planda açık olduğu (kaynaklar çelişiyor) · eklentiyi kaldırma komutunun bu eklenti belgesindeki karşılığı · Türkçe arayüz metinlerinde sonuç kalitesi · skill'in çıktılarının bağımsız bir kalite ölçümü (yok). Her biri ilgili bölümde yazılı.