42 Tasarım Skill'i, Tek Listede

00 · Nasıl çalışır

Skill dediğimiz şey nedir

Skill; modele belli bir işi belli bir standartla yaptıran, çağırınca yüklenen talimat paketi. Bu 42 skill'i altı katmana ayırdım. Her katman ayrı bir işi çözer: arayüz, görsel/video, Claude'un kendi tasarım yüzeyi, AI ürün etkileşimi, prompt mimarisi ve güven.

Her skill kendi kaynağından geliyor; kurulumu tek satır — hangi kanaldan (npx, plugin marketplace ya da MCP) yükleneceği belli. Altı katmanın tamamı + kurulum satırları ve tam liste aşağıda.

Katman 01 · Frontend & UI

Arayüzün görünen yüzü — 10 skill

Estetik bir yöne bağlanmaya zorlayan, varsayılan fontları yasaklayan, grid ve kontrast için deterministik kalite veren katman. Öne çıkanlar:

• frontend-design — Estetik bir yöne bağlanmaya zorlar, varsayılan fontları yasaklar.
• impeccable — Grid, renk, kontrast için 23 komutla deterministik kalite verir.
• design-taste-frontend — Varyans, motion ve yoğunluk kadranından asimetrik layout üretir.
• animate — Sadece 60fps transform/opacity motion kuralını dayatır.
• theme-factory · figma → code · playwright-mcp — token sistemi, sadık kod çevirisi, viewport iterasyonu.

Kalanlar: design-motion-principles, brandkit, designer-skills.

Katman 02 · Image, 3D & Video

Görsel ve video tarafı — 8 skill

Görsel üretimi, generative sanat ve tam video stüdyosu bu katmanda. Öne çıkanlar:

• nano-banana — Gemini ile görsel üretir/düzenler (görsel başına ~0,04 dolar).
• banana-claude — 13 modlu akıllı görsel wrapper.
• canvas-design · algorithmic-art — düzenlenebilir PNG/PDF; kod tabanlı generative görsel.
• remotion-superpowers — Seslendirme, müzik, altyazı dahil tam video stüdyosu.
• claude-remotion · blender-motion · aftereffects-motion — hafif başlangıç + Blender/AE'yi prompt'tan sürme.

03

Claude Design / Canvas (4 skill)

Claude'un kendi tasarım yüzeyi. Chat üzerinden düzenlenebilir ekranlar çıkarır, canvas'ı markanıza göre eğitir.

• High-fidelity mockups — Chat üzerinden düzenlenebilir web/app ekranları.
• Design systems — Canvas'ı markanıza eğitin, sistematik uygulayın.
• Templates — Bir kez kurun, kaydedin, design system'le eşleyin.
• Slide decks — Template ve marka renklerinden sunum çıkarın.

04

AI Product Interaction (8 skill)

AI ürününün konuşma tarafını tasarlayan katman: modelin ne zaman UI, ne zaman düz metin döneceğine kadar iner.

• context-window-design · conversation-patterns
• generative-ui — ne zaman UI, ne zaman düz metin.
• progressive-disclosure · multimodal-orchestration
• mixed-initiative-flow · frustration-detection · feedback-loops

05

Prompt Architecture (8 skill)

Prompt'u tesadüfe bırakmayan katman. Sistem promptunun yapısını, personayı, tonu ve kısıtları tek tek çözer.

• system-prompt-structure · persona-architecture
• tone-calibration · emotional-design
• template-design · few-shot-patterns
• chain-of-thought-design · constraint-specification

06

Trust & Safety (3 skill)

• guardrail-design — Açık davranış sınırı ve refusal pattern.
• trust-calibration — Güven ve kaynak sinyalleri.
• transparency-patterns — Modelin bildiğini/bilmediğini yüzeye çıkarır.

Kurulum mantığı

Tek bir repo yok; skill'lerin çoğu açık kaynak ve kendi kanalından tek satırla kuruluyor. Üç yol var: npx skills, plugin marketplace ve MCP. Hepsi Claude Code'a on-demand yüklenir — her oturumun bağlamını şişirmez, sadece çağırdığınız iş için devreye girer.

# 1) Anthropic resmi skill'leri (npx skills)
$ npx skills add anthropics/skills --skill frontend-design
# 2) Tek skill kendi kurulumuyla (ör. impeccable)
$ npx impeccable install
# 3) Plugin marketplace üzerinden
$ /plugin marketplace add ComposioHQ/awesome-codex-skills
$ /plugin install nano-banana@devon-claude-skills
# 4) MCP tabanlı olanlar (ör. playwright)
$ claude mcp add playwright -s user -- npx @playwright/mcp@latest
# → her skill on-demand yüklenir, bağlamı şişirmez

Ne alıyorsunuz

• 6 katmanda 42 skill'in tam listesi — her birinin ne işe yaradığı.
• Kanal başına kopyalanabilir kurulum satırları — npx, plugin marketplace ve MCP; kopyalayın, çalıştırın, bitti.
• Katman haritası — hangi katmanın hangi işi çözdüğü; nereden başlayacağınızı bilirsiniz.

42 skill · tek listede

Aşağıdaki listeyi kopyalayıp not defterine ya da doğrudan Claude'a yapıştırabilirsiniz.

## 01 — Frontend & UI (10)
frontend-design · impeccable · design-taste-frontend · animate · theme-factory · figma→code · playwright-mcp · design-motion-principles · brandkit · designer-skills
## 02 — Image, Graphics, 3D & Video (8)
nano-banana · banana-claude · canvas-design · algorithmic-art · remotion-superpowers · claude-remotion · blender-motion · aftereffects-motion
## 03 — Claude Design / Canvas (4)
hi-fi mockups · design systems · templates · slide decks
## 04 — AI Product Interaction (8)
context-window-design · conversation-patterns · generative-ui · progressive-disclosure · multimodal-orchestration · mixed-initiative-flow · frustration-detection · feedback-loops
## 05 — Prompt Architecture (8)
system-prompt-structure · persona-architecture · tone-calibration · emotional-design · template-design · few-shot-patterns · chain-of-thought-design · constraint-specification
## 06 — Trust & Safety (3)
guardrail-design · trust-calibration · transparency-patterns

Kaynak: içerik-üreticinin 42 tasarım skill derlemesi. Kaynak listede 23 numara atlanmış (24'ten devam ediyor); toplam yine 42.