Tasarım için Claude Code.

Claude Code gerçekte nedir

Claude Code, Anthropic'in ajansal kodlama aracıdır. Kod tabanınızı okur, dosyaları düzenler, komutları çalıştırır ve geliştirme araçlarınızla entegre olur — yalnızca satırları otomatik tamamlamak yerine doğal dildeki görevlerden işi planlar, yazar ve doğrular.

Hepsi aynı motoru paylaşan birkaç yüzey üzerinden sunulur: bir terminal CLI'si, VS Code, Cursor ve JetBrains için IDE eklentileri, görsel diff incelemesi olan bir masaüstü uygulaması ve uzun süren görevler için bir web deneyimi. CLAUDE.md dosyalarınız, ayarlarınız ve MCP sunucularınız hepsinde geçerlidir.

• Talimat dosyası: Claude Code, her oturumun başında proje kökünüzdeki bir CLAUDE.md dosyasını okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yer.
• Skills: Agent Skills, Claude'un talep üzerine yüklediği yinelenebilir talimatları, betikleri ve kaynakları paketler; buna zevk için Anthropic'in resmi Frontend Design skill'i de dahildir.
• Plan ve alt ajanlar: Eylemden önce plan yapabilir ve bir görevin farklı parçaları üzerinde paralel çalışan alt ajanlar başlatabilir; bu da büyük UI yeniden düzenlemelerini tutarlı tutar.

• Sağlayıcı: Anthropic
• Kimlik bilgisi: Anthropic API anahtarı (BYOK, Console üzerinden) veya bir Claude aboneliği (Pro / Max)
• Yüzeyler: terminal CLI, VS Code / Cursor / JetBrains eklentileri, masaüstü uygulaması, web

Claude Code tasarımda neden iyi

Kodlama ajanları arasında Claude Code, frontend çalışmasında zevk konusunda bir üne sahiptir. Birkaç şey bunu açıklar.

• Belirsiz değil, spesifik kararlar: Claude Code, el sallayarak geçiştirmek yerine somut seçimlere bağlanma eğilimindedir — tam hex değerleri, boşluk ölçekleri, tipografi rampaları ve bileşen hiyerarşisi — gerçek bir arayüzü bir yer tutucudan ayıran şey de budur.
• Kod tabanının farkında akıl yürütme: Geniş bir çalışma bağlamıyla, UI'ı bir kerede birçok dosya boyunca yeniden düzenler; tek seferlik stiller icat etmek yerine mevcut bileşenlerinizi ve token'larınızı yeniden kullanır.
• Resmi bir frontend skill'i: Anthropic, Claude'un önce bir tasarım yönü yazmasını sağlayan ve jenerik sistem yazı tiplerinden ve tahmin edilebilir mor degradelerden bilinçli olarak uzaklaşan bir Frontend Design skill'i sunar.

Çıkarılan ders, Anthropic'in kendi modelleri hakkında söylediğiyle aynıdır: Claude varsayılan olarak zevke sahip değildir — kendi haline bırakılırsa web tasarımının istatistiksel merkezine yakınsar (Inter, mor degradeler, yumuşak gölgeler). Ona kısıtlar verdiğinizde iyi tasarım üretir. Open Design tam olarak bu girdileri paketler; ikisinin neden birbirine uyduğunun nedeni de budur (daha fazlası aşağıda).

Claude Code'u tasarım çalışması için sıfırdan kurun

Temiz bir makineden, UI oluşturabilen ve doğrulayabilen bir Claude Code'a giden tam yol şudur.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Tasarım kurallarınızı kodlayın: Token'larınızı, ilkellerinizi ve kurallarınızı CLAUDE.md içine koyun ve Claude'u bunlara yönlendirin; böylece çıktı jenerik bir görünüme dönmek yerine bir markayla eşleşsin.
• Tarayıcı doğrulaması ekleyin: Bir Playwright veya Chrome MCP bağlayın, böylece Claude yalnızca derlemenin geçtiğini onaylamak yerine gerçek bir tarayıcıda işlesin ve çıktısını kırılma noktaları boyunca kontrol etsin.

CLAUDE.md ve Skills iş akışı

Claude Code ile en yüksek kaldıraçlı tasarım döngüsü, ona gerçek referansları artı tasarım bağlamınızı beslemek ve ardından UI eşleşene kadar yinelemektir — CLAUDE.md ve Skills kısıtları taşır, böylece bunları her komutta yeniden açıklamazsınız.

1. Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca tek bir hero görseli değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
2. Komutta spesifik olun; belirsiz komutlar, güçlü bir ajanla bile jenerik UI üretir.
3. Tasarım sisteminizi ve kurallarınızı CLAUDE.md içinde tutun ve Claude'a token'ların ve kanonik ilkellerin nerede yaşadığını söyleyin.
4. Frontend Design skill'ini ekleyin, böylece Claude kod yazmadan önce gerçek bir estetik yöne bağlansın.
5. Tarayıcı doğrulamasını bağlayın, böylece Claude işlesin, kırılma noktalarına yeniden boyutlandırsın ve referanslarla karşılaştırsın — yalnızca derlendiğini onaylamasın.

Oturuma bir referans görseli bırakın ve somut kısıtlarla komut verin:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Yanında bir dev sunucusu çalıştırın, komutları küçük ve odaklı tutun, iyi yinelemeleri commit edin / kötü olanları geri alın (geri aldığınızda Claude'a söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilsin. Büyük yeniden düzenlemeler için plan modunu kullanın, böylece herhangi bir dosya değişikliğinden önce yaklaşımı inceleyebilirsiniz.

Claude Code + Figma: tasarım ↔ kod gidiş-dönüşü

Şubat 2026'da Anthropic ve Figma, Figma MCP sunucusu aracılığıyla birinci sınıf, çift yönlü bir entegrasyon yayınladı. Her iki yönde de çalışır.

• Tasarım → Kod: Figma'da bir frame seçin veya Claude Code'a bir bağlantı yapıştırın, tasarım bağlamını çekin ve ondan mevcut bileşen kütüphanenizi kullanarak tasarımı uygulamasını isteyin. Code Connect, çıktıyı gerçek bileşenlerinizle hizalı tutar.
• Kod → Tasarım: Bir özelliği tarayıcıda oluşturup önizleyin, ardından çalışan UI'ı düzenlenebilir Figma katmanları olarak yakalamak için “Send this to Figma” deyin — tüm ekran veya seçili bir öğe.

Bir kez claude plugin install figma@claude-plugins-official ile kurun (Dev Mode MCP, ücretli bir Figma planı gerektirir). Aynı Figma MCP; Claude Code, Codex, Cursor ve VS Code için kullanılabilir — tam olarak Open Design'ın düzenlemek için inşa edildiği türden taşınabilir, çok ajanlı bir yetenek.

Tasarım için Claude Code, Codex ve Cursor

Tasarım çalışması için tek bir kazanan yoktur — her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları üst üste yığar. Adil bir özet:

Tekrarlanan topluluk kararı, zevkin insanlardan geldiğidir: üçü de skill'ler, referanslar ve kısıtlar olmadan jenerik bir estetiğe varsayılan olarak kayar. Çözülmesi gereken asıl sorun budur — ve bu sorun, model biçimli değil, tasarım aracı biçimlidir.

Tuzaklar ve “AI çöplüğü” görünümünden nasıl kaçınılır

Claude Code'un zevk konusundaki ününe rağmen, AI tarafından üretilen tasarımla ilgili en yaygın şikayet, jenerik görünmesidir — Inter yazı tipleri, beyaz üzerine mor degradeler, yumuşak gölgeler, aşırı büyük yuvarlatılmış köşeler, “bunu bir AI yaptı diye bağıran” bir estetik. Anthropic bunu dağılımsal yakınsamaya bağlar: güvenli seçimler web eğitim verilerine hakimdir. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI metnine sızan talimatlar yer alır.

• Frontend Design skill'ini kurun: Claude'u gerçek bir yöne bağlanmaya zorlar ve AI tarafından aşırı kullanılan yazı tiplerinden ve degradelerden açıkça kaçınır.
• Tarayıcı doğrulamasını etkinleştirin: Claude'un kırılma noktaları boyunca işlemesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmasın.
• Token ve referans sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
• Kuralları CLAUDE.md içinde kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” gibi kuralları, ajanın her çalıştırmada okuduğu yere koyun.

Her hafifletmenin, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmettir.

Open Design içinde Claude Code ile tasarım

Open Design, yukarıdaki iş akışının sürekli istediği açık kaynaklı tasarım katmanıdır. Claude Code'u birinci taraf bir adaptör olarak ele alır ve onu özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü UI'sı ile sarmalar — böylece Claude Code'u iyi yapan tasarım bağlamı, her seferinde elle bir araya getirilmek yerine ilk çalıştırmadan itibaren oradadır.

1. Open Design'ı kurun ve ajanınız olarak Claude Code'u seçin.
2. Anthropic API anahtarınız (BYOK) veya Claude aboneliğinizle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.
3. Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
4. Her artefakt ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi reponuzda yaşar.

Aynı Claude Code ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, bu yüzden çalışmanız veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.

Sıkça sorulan sorular

1. 01 Claude Code tasarım çalışması için iyi mi? +

   Evet — frontend konusunda en iyi zevke sahip kodlama ajanı olarak yaygın biçimde kabul edilir; hex değerleri, boşluk ve tipografi ölçekleri hakkında spesifik, kod tabanının farkında kararlar verir. Frontend Design skill'i, bir tasarım sistemi ve bağlamdaki gerçek referans görsellerle, üretim kalitesinde, duyarlı UI üretir ve bunu bir tarayıcıda doğrulayabilir. Bu bağlam olmadan jenerik bir görünüme dönme eğilimindedir; Open Design'ın doldurduğu boşluk da budur.

2. 02 Claude Code ile tasarım yapmak için bir Claude aboneliğine ihtiyacım var mı? +

   Bir Anthropic API anahtarı (BYOK, Console üzerinden) veya bir Claude aboneliği (Pro / Max) kullanabilirsiniz. Her iki durumda da Open Design kimlik bilgilerinizi asla proxy'lemez — bunlar doğrudan makinenizdeki ajanınız tarafından kullanılır.

3. 03 Frontend tasarımı için Claude Code mı yoksa Codex mı? +

   İkisi de güçlüdür. Claude Code, spesifik, kod tabanının farkında tasarım kararları ve frontend akıl yürütmesiyle bilinir; Codex'in güçlü bir görsel cilası vardır ve devredilen, sandbox'lanmış derlemelerde öne çıkar. Birçok ekip ikisini de kullanır — Open Design, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.

4. 04 Claude Code'u Figma'ya nasıl bağlarım? +

   Resmi Figma eklentisini claude plugin install figma@claude-plugins-official ile kurun. Ardından tasarım bağlamını kullanarak Figma frame'lerini kod olarak uygulayabilir ve çalışan bir UI'ı “Send this to Figma” ile düzenlenebilir Figma frame'lerine geri gönderebilirsiniz. Dev Mode MCP, ücretli bir Figma planı gerektirir.

5. 05 Skills ve CLAUDE.md nedir? +

   CLAUDE.md, Claude Code'un her oturumun başında okuduğu, proje kökünüzdeki bir markdown dosyasıdır — tasarım kurallarınızı kodlama yeri. Skills, Claude'un talep üzerine yüklediği yinelenebilir talimatları ve kaynakları paketler; buna Anthropic'in resmi Frontend Design skill'i de dahildir. Open Design her ikisinden de özenle seçilmiş bir kütüphane sunar, böylece proje başına kurulumu atlarsınız.

6. 06 Jenerik “AI çöplüğü” estetiğinden nasıl kaçınırım? +

   Frontend Design skill'ini kurun, gerçek tasarım token'ları ve referans ekran görüntüleri sağlayın, marka kurallarını CLAUDE.md içinde kodlayın ve tarayıcı doğrulamasını etkinleştirin. Open Design bunları özenle seçilmiş bir kütüphane olarak sunar, böylece proje başına kurulumu atlarsınız.

7. 07 Open Design, Anthropic ile bağlantılı mı? +

   Hayır. Claude Code, Anthropic'in bir ürünüdür; Open Design, onu birinci taraf bir adaptör olarak destekleyen bağımsız bir açık kaynaklı projedir. Claude ve Claude Code, Anthropic'in ticari markalarıdır.

8. 08 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel öncelikli ve Apache-2.0'dır. Dosyalarınız, artefaktlarınız ve DESIGN.md'niz kendi reponuzda kalır ve Anthropic kimlik bilgileriniz doğrudan ajanınız tarafından kullanılır, asla Open Design sunucuları üzerinden yönlendirilmez.