Web Tasarımı İçin Claude Skill'leri

Skill, Claude'a belirli bir iş için talimat, betik ve kaynak dosyalarını paketleyen bir klasördür; merkezinde bir SKILL.md dosyası durur. İş, skill'in tarif ettiği türdense Claude onu kendiliğinden devreye alır.

1. 01

   Bağlantıdaki skill klasörünü (SKILL.md dosyasını içeren klasör) indir.

2. 02

   Tek bir projede kullanacaksan projenin .claude/skills/ dizinine, tüm projelerde kullanacaksan ~/.claude/skills/ dizinine koy.

3. 03

   Claude Code'u yeniden başlat. Skill kendiliğinden devreye girer; istersen /skill-adı yazarak doğrudan da çağırabilirsin.

• 01GitHub'da gör

  frontend-design

  Şablon gibi görünmeyen, bilinçli görsel tasarım

  Anthropic'in resmi skill'i. Yeni bir arayüz kurarken ya da var olanı yeniden şekillendirirken estetik yön, tipografi ve kompozisyon kararlarını yönlendirir; hazır şablon gibi duran varsayılan seçimlerden uzak tutar.

  Ne zaman kullan

  Yeni bir arayüzün görsel yönünü belirlerken, ilk taslağı kurmadan önce.

• 02GitHub'da gör

  design-taste-frontend

  Landing page, portföy ve yeniden tasarım için anti-slop kuralları

  Brief'i okuyup doğru tasarım yönünü çıkarır ve şablon gibi görünmeyen arayüzler üretir. Uygun olduğunda gerçek tasarım sistemlerini kullanır, yeniden tasarımlarda önce denetim yapar, teslimden önce sıkı bir kontrol listesinden geçirir.

  Ne zaman kullan

  Landing page, portföy ya da tanıtım sitesi kurarken kalite çıtasını baştan sabitlemek için.

• 03GitHub'da gör

  high-end-visual-design

  Ajans kalitesinde görsel detaylar

  Bir sitenin pahalı hissettirmesini sağlayan fontları, boşlukları, gölgeleri, kart yapılarını ve animasyonları tek tek tanımlar; yapay zekâ tasarımlarını ucuz ya da sıradan gösteren yaygın varsayılanları engeller.

  Ne zaman kullan

  Yerleşim oturmuş ama sayfa hâlâ sıradan görünüyorsa; detay ve cila aşamasında.

• 04GitHub'da gör

  minimalist-ui

  Editoryal, sade arayüzler

  Sıcak tek renkli palet, tipografik kontrast, düz bento ızgaralar ve kısık pastel tonlarla editoryal bir dil kurar. Gradyan ve ağır gölge kullanmaz.

  Ne zaman kullan

  İçeriğin ve tipografinin öne çıkması gereken blog, doküman ve kişisel sitelerde.

• 05GitHub'da gör

  industrial-brutalist-ui

  İsviçre tipografisi ile terminal estetiği

  İsviçre baskı tipografisini askeri terminal estetiğiyle birleştiren ham, mekanik arayüzler: katı ızgaralar, uç tipografik ölçek kontrastı, işlevsel renkler ve analog bozulma efektleri.

  Ne zaman kullan

  Veri ağırlıklı paneller, portföyler ya da gizliliği kaldırılmış bir plan gibi hissettirmesi gereken editoryal siteler için.

• 06GitHub'da gör

  redesign-existing-projects

  Mevcut siteyi premium seviyeye taşıma

  Mevcut tasarımı denetler, yapay zekâ üretimi izlenimi veren genel desenleri bulur ve işlevselliği bozmadan üst düzey tasarım standartlarını uygular. Her CSS çatısıyla ya da saf CSS ile çalışır.

  Ne zaman kullan

  Sıfırdan başlamadan, çalışan bir siteyi ya da uygulamayı elden geçirirken.

• 07GitHub'da gör

  theme-factory

  Hazır ya da anında üretilen renk ve font temaları

  Anthropic'in resmi skill'i. Sunum, doküman, rapor ve HTML landing page gibi çıktılara uygulanabilen 10 hazır renk ve font teması sunar; istenirse yeni bir temayı anında üretir.

  Ne zaman kullan

  Bir çıktıya hızlıca tutarlı bir palet ve font eşleşmesi giydirmek gerektiğinde.

• 08GitHub'da gör

  brand-guidelines

  Anthropic marka renkleri ve tipografisi

  Anthropic'in resmi skill'i. Anthropic'in resmi marka renklerini ve tipografisini her türlü çıktıya uygular.

  Ne zaman kullan

  Çıktının Anthropic'in görünümünü taşıması gerektiğinde.

• 09GitHub'da gör

  design-dna

  Referans tasarımı okunabilir bir profile çevirme

  Görsel, ekran görüntüsü ya da URL'den bir tasarımın DNA'sını üç boyutta çıkarır: tasarım sistemi (token'lar), stil (niteliksel his) ve görsel efektler (Canvas, WebGL, 3D, parçacıklar, kaydırma efektleri). Sonuç bir JSON profilidir; yeni tasarımlar bu profilden üretilebilir.

  Ne zaman kullan

  Beğendiğin bir sitenin dilini çözüp kendi projene tutarlı biçimde aktarmak istediğinde.

• 10GitHub'da gör

  imagegen-frontend-web

  Her bölüm için ayrı tasarım referans görseli

  Dönüşüm odaklı, premium web sitesi tasarım referansları üretir. Kuralı net: her bölüm için ayrı, yatay bir görsel; 8 bölümlük bir landing page 8 görsel demektir. Kompozisyon çeşitliliğini, farklı hero ölçeklerini ve tüm görsellerde tek bir paleti zorunlu tutar.

  Ne zaman kullan

  Kodlamadan önce sayfanın görsel taslağını bölüm bölüm görmek istediğinde.

• 11GitHub'da gör

  image-to-code

  Önce tasarım görseli, sonra birebir kod

  Görsel olarak önemli web işlerinde önce tasarım görsellerini kendisi üretir, onları ayrıntılı analiz eder, ardından siteyi bu görsellere olabildiğince yakın kodlar. Codex için yazılmıştır.

  Ne zaman kullan

  Tasarımı ve uygulamayı görselden koda giden tek bir akışta istediğinde.

• 12GitHub'da gör

  scroll-craft

  Kaydırmaya bağlı, sürükleyici landing page'ler

  Kaydırmayı zaman çizelgesine çevirir: video tekerlekle kare kare oynar, bölümler sabitlenip ilerler, başlıklar satır satır kurulur, sayfanın zemin rengi yol boyunca değişir. Önce marka hakkında sorular sorar, her sayfa için farklı bir iskelet ve imza hareketi seçer, sonucu kendi kaydırmasının ekran görüntüleriyle doğrular.

  Ne zaman kullan

  Sitenin bir belge değil bir deneyim gibi hissettirmesi gerektiğinde; ürün ve marka tanıtımlarında.

• 13GitHub'da gör

  algorithmic-art

  p5.js ile üretken sanat

  Anthropic'in resmi skill'i. Tohumlu rastgelelik ve etkileşimli parametrelerle p5.js üzerinde algoritmik sanat üretir: akış alanları, parçacık sistemleri, üretken desenler. Var olan sanatçıları kopyalamak yerine özgün işler çıkarır.

  Ne zaman kullan

  Hero arka planı, yükleme ekranı ya da marka dokusu için koddan üretilen bir görsel gerektiğinde.

• 14GitHub'da gör

  motion-studio

  Koddan render edilen motion grafik ve tanıtım videosu

  Kısa bir filmi kodla kurar: saf motion grafik olarak ya da üretilmiş bir çekimin üstüne hareket katmanı olarak. Her film için ayrı bir stil rehberi, ritme oturan çekim listesi, yaylı kinetik tipografi, sentezlenmiş müzik ve ses tasarımı ile render edilen her kareye bakan bir eleştiri döngüsü içerir. reel-taste ile birlikte çalışır.

  Ne zaman kullan

  Hero videosu, ürün lansmanı ya da sosyal medya için kısa bir tanıtım filmi gerektiğinde.

• 15GitHub'da gör

  brandkit

  Marka kılavuzu panoları ve logo sistemleri

  Üst düzey marka kılavuzu panoları, logo sistemleri, kimlik sunumları ve görsel dünya sunumları için görsel üretir. Minimalist, sinematik, editoryal, koyu teknoloji ve lüks gibi farklı marka dünyalarına göre ayarlıdır; logo konseptlerinde sembolik anlamı ve sade tipografiyi öne çıkarır.

  Ne zaman kullan

  Bir markanın kimliğini site tasarımından önce görsel olarak sabitlemek istediğinde.

• 16GitHub'da gör

  canvas-design

  PNG ve PDF olarak statik görseller

  Anthropic'in resmi skill'i. Bir tasarım felsefesinden yola çıkarak poster, sanat işi ya da statik tasarımları PNG ve PDF olarak üretir; birlikte gelen açık lisanslı font kütüphanesini kullanır.

  Ne zaman kullan

  Kapak görseli, OG görseli ya da poster gibi tek parça statik bir iş gerektiğinde.

• 17GitHub'da gör

  webapp-testing

  Playwright ile yerel siteyi test etme

  Anthropic'in resmi skill'i. Yerel web uygulamalarını Playwright ile açar, etkileşime girer ve test eder: ön yüz işlevlerini doğrular, arayüz davranışını ayıklar, ekran görüntüsü ve tarayıcı günlüğü alır.

  Ne zaman kullan

  Bir değişikliğin tarayıcıda gerçekten doğru göründüğünü ve çalıştığını kontrol ederken.

• 18GitHub'da gör

  find-docs

  Kütüphanelerin güncel dokümantasyonu

  Context7 üzerinden herhangi bir programlama kütüphanesinin ya da çatısının güncel dokümantasyonunu ve kod örneklerini getirir; kurulum soruları, geçiş rehberleri ve sürüme özel belgeler dahil.

  Ne zaman kullan

  Next.js, Tailwind ya da framer-motion gibi bir kütüphanenin API'sinden emin olmak gerektiğinde; modelin bilgisi eski kalmış olabileceğinde.

• 19GitHub'da gör

  full-output-enforcement

  Kısaltmasız, eksiksiz kod çıktısı

  Modelin varsayılan kısaltma eğilimini devre dışı bırakır: kodun tamamını yazdırır, yer tutucu kalıpları yasaklar ve token sınırına takılan çıktıyı düzgünce parçalara böler.

  Ne zaman kullan

  Uzun bir bileşenin ya da sayfanın tek seferde, eksiksiz yazılması gerektiğinde.