102.7K+İndir
Claude Code OpenDesign

Claude Code ile
OpenDesign’da
tasarlayın.

OpenDesign'da Claude Code ile arayüz tasarlama: kısıtlar olarak CLAUDE.md ve Frontend Design skill, brief'ten incelenmiş dosyaya tek bir workspace-settings görevi ve Figma round-trip'in nerede durduğu.

OpenDesign'ı indirin Kuruluma gidin

CLAUDE CODE İÇİN ÜÇ GİRİŞ NOKTASI

Claude Code için Başlangıç Noktanızı Seçin

BU KILAVUZ · UI TASARIMI

Claude Code Kullanarak Bir Ürün Arayüzü Yayınlayın

Bu adım adım kılavuz: bir brief, referanslar, tasarım kuralları ve incelenen bir HTML çıktısı.

Bu kılavuzu okuyun KURULUM

Temiz Bir Makinede Claude Code Kurulumu

Yeni bir kurulumdan, arayüz üretip tarayıcıda kontrol edebilen bir Claude Code oturumuna kadar eksiksiz yol.

Kuruluma git KARŞILAŞTIRMA

Claude Code'u Codex ve Cursor ile Karşılaştırın

Claude Code'un tasarım güçlerinin Codex ve Cursor'ın yanındaki yeri ve ne zaman farklı bir ajanın daha uygun olduğu.

Karşılaştırmayı görün
Bu Sayfada Örnek
  1. Örnek
  2. Uygunluk
  3. Uyumluluk
  4. Kurulum
  5. İş Akışı
  6. Kaynaklar
  7. Sınırlamalar
  8. SSS

BİR CLAUDE CODE TASARIM KILAVUZU

Brieften Arayüze: Tek Bir Claude Code Tasarım Görevi

Bu kılavuz, tek bir işi devir teslim boyunca takip eder: Claude Code'a verdiğiniz brief ve kısıtlar, geri döndürdüğü çıktı ve onay öncesi size kalan kontroller. Aşağıdaki arayüz bu sayfa için oluşturulmuş bir örnektir; gerçek bir Claude Code oturumunun görüntüsü değildir.

1Tasarım Brief'i ve Kısıtlar

Brief

Küçük bir SaaS ekibi için çalışma alanı ayarları bölümünü tasarlayın: genel, üyeler, bildirimler ve faturalandırma. Değerleri CLAUDE.md içindeki token'lardan alın; elle ayarlanmış istisna olmasın. Masaüstünde ve telefonda dayanıklı olmalı.

  • Design systemCLAUDE.md'den token'lar ve primitifler; Albert Sans; tek bir yeşil vurgu
  • Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
  • EtkileşimlerBölüm geçişi, anahtarlar, kaydedilmemiş değişiklikler çubuğu ve bir klavye odak sırası
  • ÇıktıKararlı data-od-id kancaları taşıyan tek bir kendi kendine yeten HTML dosyası

2Kim Ne Yapıyor: Siz, Claude Code ve OpenDesign

  • Siz

    Briefi siz yazarsınız, tasarım sistemini siz seçersiniz ve kabul kriterlerini siz belirlersiniz.

  • Claude Code

    Claude Code yerleşimi planlar, HTML, CSS ve JavaScript'i yazar, ardından istek üzerine revize eder.

  • OpenDesign

    OpenDesign tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü bir proje dosyası olarak saklar.

  • İnceleme

    Devir teslimden önce görsel hiyerarşiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi kontrol edin.

3Claude Code Çıktısı: 1440px ve 390px'te Ayarlar Ekranı

Claude Code Çıktısı: 1440px ve 390px'te Ayarlar Ekranı — Masaüstü
Örnek gösterim

4Teslimden Önce İnceleme

Düzen

Izgara ve Boşluklar

Alt navigasyon, form ve eylemler 8px ızgaraya hizalanır; yapışkan kaydetme çubuğu hiçbir alanı kapatmaz.

Hiyerarşi

Görsel Hiyerarşi

Grup başlıkları etiketlerden daha ağır basar; vurgu yalnızca etkin anahtarlarda görünür.

Duyarlı

Mobil Düzen

Mobil genişlikte alt navigasyon bölümlü bir anahtara dönüşür; anahtarlar 44px dokunma alanını korur; kaydet düğmesi tam genişliğe yayılır.

Etkileşim

Etkileşim Kontrolleri

Her alanda Tab ile gezin, bir denetimi değiştirin, ardından kaydedilmemiş değişiklikler uyarısını iptal edip onaylayın.

Uygunluk

Claude Code Nerede Uygun — ve Nerede Değil

Claude Code Şu Durumlarda Uyar

  • Önce tasarım sistemi. Projeye bir DESIGN.md / token'lar / Tailwind yapılandırması koyun; böylece Claude Code “yapay zekâ karmaşasına” kaymak yerine bir markayla eşleşir.
  • Estetik skill'ler. Anthropic'in frontend-design gibi skill'leri, Claude Code'u işaretleme yazmadan önce bir tipografi/renk/hareket yönü seçmeye iter.
  • Figma → kod. Figma MCP sunucusunu bağlayın; Claude Code frame'leri gerçek token'larla üretim bileşenlerine dönüştürür.
  • Ekran görüntüsü döngüsü. Claude Code'un kendi arayüzünün ekran görüntüsünü almasına, bunu bir referansla karşılaştırmasına ve yinelemesine izin verin — ajan tabanlı tasarım geri bildirim döngüsü.

Şu Durumlarda Başka Bir Workflow Seçin

  • Düzenlenebilir vektör dosyalarına ihtiyacınız var. Claude Code HTML döndürür, düzenlenebilir bir tasarım belgesi değil. Bu varlık biçimi için ayrı bir vektör iş akışı kullanın.
  • Ne referansınız ne de kısıtlarınız var. Tasarım sistemi veya örnek olmadan Claude Code genel bir görünüme yönelir; önce briefi taslak olarak yazın.
  • Bu ajanın ihtiyaç duyduğu kimlik bilgisine sahip değilsiniz. Gerekli: Anthropic API anahtarı (kendi anahtarınızı getirin) veya Claude aboneliği. OpenDesign kimlik bilgilerini ne sağlar ne de vekil olarak kullanır.
  • Ekibiniz Codex veya Cursor'da çalışıyor. O ajanların kendi sayfaları var; OpenDesign ajanlar arasında tek bir çalışma alanı tutar, ancak kurulum farklıdır. Bkz. ilgili ajanlar.

Uyumluluk

Başlamadan Önce Claude Code Gereksinimleri

Bu sayfa, Claude Code'un OpenDesign masaüstü uygulaması üzerinden bağlandığını varsayar. Yayımlanmış referanslar 6 Eylül 2026 tarihinde kontrol edilmiştir.

Araç KapsamıClaude Code, Anthropic tarafından

Claude Code, Anthropic'in ajan tabanlı komut satırı aracıdır: bir görevi doğal dille tanımlayın; görev tamamlanana kadar projenizdeki kodu okur, yazar ve çalıştırır. Anthropic'in barındırılan Claude Design ürününden ayrıdır; Claude Design karşılaştırması bu seçimi ele alır. Bu sayfa, OpenDesign aracılığıyla Claude Code ile arayüz tasarlamakla ilgilidir; Claude Code'un kendi arayüzüyle değil. OpenDesign'ın kurulum notları mevcut ajanları listeler.

Hesaplar ve Kimlik DoğrulamaAnthropic API anahtarı (BYOK) veya Claude

Anthropic API anahtarı (BYOK) veya Claude aboneliği. Anthropic API anahtarınızla (BYOK) veya Claude aboneliğinizle kimlik doğrularsınız — hiçbir şey bizim üzerimizden vekil olarak geçmez. Bu sayfada hiçbir kota veya fiyat taahhüt edilmez.

Sistem ve SürümlerMasaüstü uygulama veya kaynak kod

Terminal CLI, VS Code / Cursor / JetBrains uzantıları, masaüstü uygulaması ve web olarak kullanılabilir. Masaüstü sürümleri için indirme sayfasına bakın. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırırken önemlidir; bir masaüstü paketi kurarken değil. Uyumlu minimum Claude Code sürümü: burada doğrulanmamıştır.

Bağlantı KontrolüBaşarı sinyali

Kurulu sürümünüzün gösterdiği bağlantı talimatlarını kullanın, ardından küçük bir görev deneyin. Claude Code'un bunu tamamladığını ve çıktının açıldığını doğrulayın. Ajanı tek başına indirmek, çalışan bir bağlantıyı kanıtlamaz.

Masaüstü uygulamasıyla başlayın

Üç Adımda Claude Code Kurulumu

İndirmeyle başlayın, kurulu sürümünüz için Claude Code kurulumunu tamamlayın, ardından küçük bir sonucu doğrulayın. Bu yolu izlemek, OpenDesign'ı kaynaktan derlemeyi gerektirmez.

  1. 1

    OpenDesign Masaüstü Uygulamasını İndirin

    Makineniz için paketi seçin, kurun ve masaüstü uygulamasını açın.

    OpenDesign'ı indirin
    KONTROL NOKTASI
    Masaüstü uygulaması açılır. Zaten kuruluysa bir sonraki adıma geçin; ikinci bir indirmeye gerek yoktur.
  2. 2

    Claude Code Bağlantınızı Hazırlayın

    Kurulu sürümünüzle birlikte gelen Claude Code talimatlarını izleyin. Anthropic API anahtarınızla (BYOK) veya Claude aboneliğinizle kimlik doğrulayın — hiçbir şey bizim üzerimizden vekil olarak geçmez.

    anthropics/skills — frontend-design skill 
    # 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

    Yayımlanmış kılavuzdaki Claude Code kurulum notlarından alınmıştır; güncel komutu satıcı belgelerinde doğrulayın.

    KONTROL NOKTASI
    Kullanmayı amaçladığınız ajanı ve hesabı doğrulayın. Claude Code kullanılamıyorsa, daha büyük bir göreve geçmeden önce uyumluluğu gözden geçirin.
  3. 3

    İlk Küçük Claude Code Görevini Çalıştırın

    İlk briefi ölçülü tutun; böylece bir revizyon dahil tüm döngüyü değerlendirebilirsiniz.

    Başlangıç brief’i

    Profil formu ve kaydetme onayı olan bir ayarlar ekranı oluştur. Tasarım kurallarıma uy. Masaüstü ve mobil genişliklerde kontrol et.

    KONTROL NOKTASI
    Çıktıyı açın, kaydetme durumunu deneyin ve belirli bir değişiklik isteyin. Üretim incelemeyi başlatır; onu bitirmez.

OpenDesign'ı kaynaktan çalıştırmak için bunun yerine teknik hızlı başlangıcı kullanın.

Claude Code tasarım iş akışı

Claude Code Tasarım İş Akışı: Brieften İncelenmiş Dosyaya Beş Adım

Brieften doğrulanmış dosyaya izlenen tek bir çalışma alanı ayarları görevi. Her adım neyi devrettiğinizi, Claude Code'un ne yaptığını, OpenDesign'ın neyi katkıda bulunduğunu ve sizin neyi kontrol ettiğinizi gösterir.

  1. 1

    Tasarım Brief'i

    Sade dil, üç ila altı satır. Hedef kitleyi, ekranın işini ve platformları belirtin.

    • SizBriefi yazın; varsa bir referans ekran görüntüsü ekleyin.
    • Claude CodeBriefi ve CLAUDE.md'yi okur; bir şey belirsiz olduğunda sorar.
    • OpenDesignProjeyi, prompt yüzeyini ve çıktı türü için eşleşen skill'i sağlar.
    • KontrolBriefin kabul kriterlerini içerdiğini doğrulayın. Bunları şimdi eklemek, üretimden sonra eklemekten daha az maliyetlidir.
  2. 2

    Tasarım Kısıtları

    Bir tasarım sistemi ve birkaç katı kural. Bu kombinasyon, markaya uygun çıktıyı genel bir görünümden ayıran şeydir.

    • SizBir design system seçin; breakpoint'leri ve kullanılması gereken bileşenleri belirtin.
    • Claude CodeHerhangi bir işaretleme yazmadan önce DESIGN.md token'larını ve duruş kurallarını bağlama yükler.
    • OpenDesignDesign-system kütüphanesini sunar ve seçilen olanı skill şablonuna bağlar.
    • KontrolToken'lar markanızla eşleşir. Bir vurgu rengi, doğru fontlar, doğru radius.
  3. 3

    Arayüzü Oluştur

    Claude Code kendi kendine yeten bir HTML dosyası üretir: yerleşim, stiller, etkileşimler ve kararlı kancalar.

    • SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
    • Claude CodeBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanları düzeltir.
    • OpenDesignArtifact'ı proje klasörüne kaydeder ve önizleme için indeksler.
    • KontrolHenüz yok. Dosyayı kaynak koddan değil, render edildikten sonra değerlendirin.
  4. 4

    Önizleme

    Dosya, belirttiğiniz genişliklerde OpenDesign içinde oluşturulur. Tasarımın değerlendirildiği yer burasıdır.

    • SizGenişlikleri değiştirin, etkileşimlere tıklayın, öğeler üzerine yorum bırakın.
    • Claude CodeÖnizleme üzerindeki yorumlarınızı okur ve sonraki revizyonu hazırlar.
    • OpenDesignÖnizlemeyi oluşturur ve yorumlar ile düzenlemeler için data-od-id hedeflerini açığa çıkarır.
    • KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.
  5. 5

    Revize Et ve Doğrula

    Önizlemedeki öğelere işaret ederek değişiklik talep edin. Her revizyon yeni bir dosya olur; hiçbir şey sessizce üzerine yazılmaz.

    • SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
    • Claude CodeDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
    • OpenDesignSürümleri yan yana tutar; işiniz bittiğinde bir görüntü veya HTML dışa aktarır.
    • KontrolÖnce sadece değişen alanı, ardından her bir kırılma noktasında sayfanın tamamını bir kez yeniden kontrol edin.

Kaynaklar

Claude Code Tasarım Kaynakları

DAHA FAZLA OKUMA

Claude Code İçin Daha Fazla Okuma

Claude Code ile tasarım yapmaya yönelik eğitimler, dokümantasyon ve adım adım anlatımlar, yayımlanmış kılavuzdan alınmıştır.

Skill'ler

Tasarım Skill'leri

Claude Code'un OpenDesign'da üretebileceği artifact türleri, her tür için bir skill.

Skill'lere göz atın Tasarım sistemleri

Tasarım Sistemleri

Claude Code herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenler.

Sistemlere göz atın Şablonlar

Şablonlar

Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.

Şablonlara göz atın

Sınırlamalar

Claude Code Sınırlamaları, Manuel Kontroller ve Yedek Çözümler

  • KapsamBu bir kodlama ajanıdır, tasarım aracı değildir — yine de tasarım, onun en güçlü ortaya çıkan kullanımlarından biridir. Doğru beceriler ve bağlamda bir tasarım sistemiyle üretim HTML/CSS/React üretir, ekran görüntüleri üzerinde iterasyon yapar ve tasarım token'larını korur. Bu sayfa, OpenDesign ile bağlantılı bir ajan olarak Claude Code'u kapsar; Claude Code'un her özelliğini değil.
  • Kullanım SınırlarıKullanım sınırları ve maliyet, kullandığınız kimlik bilgisine (Anthropic API anahtarı veya Claude aboneliği) bağlıdır. Burada ücretsiz kotalarla ilgili herhangi bir iddiada bulunulmamaktadır.
  • AğYerel proje dosyaları, çevrimdışı çıkarım anlamına gelmez. Hassas girdileri paylaşmadan önce ajanınızın sağlayıcı ayarlarını ve veri politikalarını inceleyin.
  • Çıktı HTML'dirArtifact'ler HTML dosyalarıdır, vektör tasarım dosyaları değildir. Figma gidiş-dönüşleri Claude Code'un kendi Figma entegrasyonu üzerinden gerçekleşir.
  • Manuel İncelemeÖnizlemede erişilebilirliği, gerçek içeriği, marka uyumunu ve etkileşim doğruluğunu siz incelersiniz. Ajanın yaptığı herhangi bir öz denetimi ilk geçiş olarak değerlendirin.
  • Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, kurulu sürümün bağlantı talimatlarını ve kimlik doğrulamasını kontrol edin. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan üretilen dosyayı koruyun.

SSS

Claude Code ve OpenDesign Hakkında Sık Sorulan Sorular

Claude Code Tasarım İşleri İçin İyi mi?
Evet — en iyi frontend zevkine sahip kodlama ajanı olarak kabul edilir; hex değerleri, boşluklar ve tip ölçekleri hakkında koda özgü, bilinçli kararlar verir. Frontend Design skill'i, bir tasarım sistemi ve bağlamda gerçek referans görsellerle üretim kalitesinde, duyarlı bir UI üretir ve bunu bir tarayıcıda doğrulayabilir. Bu bağlam olmadan genellikle sıradan bir görünüme kayar; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Claude Code İle Tasarım Yapmak İçin Claude Aboneliğine İhtiyacım Var mı?
Bir Anthropic API anahtarı (BYOK, Console üzerinden) veya bir Claude aboneliği (Pro / Max) kullanabilirsiniz. Her iki durumda da OpenDesign kimlik bilgilerinizi asla vekil sunucu üzerinden geçirmez — bunlar doğrudan makinenizdeki ajanınız tarafından kullanılır.
Frontend Tasarımı İçin Claude Code mu, Codex mi?
Her ikisi de güçlü. Claude Code, koda özgü tasarım kararları ve frontend akıl yürütmesiyle tanınır; Codex ise görsel cilada güçlüdür ve devredilen, sandbox içindeki derlemelerde başarılıdır. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım workflow'unuzu değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.
Claude Code'u Figma'ya Nasıl Bağlarım?
claude plugin install figma@claude-plugins-official komutuyla resmi Figma eklentisini kurun. Ardından tasarım bağlamını kullanarak Figma frame'lerini kodda uygulayabilir ve “Send this to Figma” ile çalışan bir UI'yi düzenlenebilir Figma frame'lerine geri gönderebilirsiniz. Dev Mode MCP, ücretli bir Figma planı gerektirir.
Skill'ler ve CLAUDE.md Nedir?
CLAUDE.md, Claude Code'un her oturumun başında okuduğu, proje kök dizininizde bulunan bir markdown dosyasıdır — tasarım kurallarınızı kodlayacağınız yer. Skill'ler, Claude'un talep üzerine yüklediği tekrarlanabilir talimatları ve kaynakları paketler; Anthropic'in resmi Frontend Design skill'i de bunlardan biridir. OpenDesign, proje başına kurulum yapmaktan kurtulmanız için her ikisinin de derlenmiş bir kütüphanesini sunar.
Claude Code aslında nedir
Claude Code, Anthropic'in ajan tabanlı kodlama aracıdır. Kod tabanınızı okur, dosyaları düzenler, komutları çalıştırır ve geliştirici araçlarınızla entegre olur — sadece satırları otomatik tamamlamak yerine doğal dil görevlerinden işleri planlar, yazar ve doğrular.

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

Yönerge 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.

Yetenekler: Agent Skills, Claude'un talep üzerine yüklediği tekrarlanabilir talimatları, komut dosyalarını ve kaynakları paketler; buna Anthropic'in zevk için resmi Frontend Design skill'i de dahildir.

Plan ve alt ajanlar: Harekete geçmeden önce plan yapabilir ve bir görevin farklı bölümleri üzerinde paralel çalışan alt ajanlar oluşturabilir, bu da büyük UI yeniden düzenlemelerini tutarlı tutar.

Kimlik bilgisi: Anthropic API anahtarı (BYOK, Console üzerinden) veya bir Claude aboneliği (Pro / Max)

Satıcı: Anthropic
Claude Code neden tasarımda iyidir
Kodlama ajanları arasında Claude Code, ön uç çalışmalarında zevk sahibi olmakla ünlenmiştir. Bunu birkaç şey açıklar.

Belirli, muğlak olmayan kararlar: Claude Code 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 — ki gerçek bir arayüzü bir yer tutucudan ayıran da budur.

Kod tabanı farkındalıklı akıl yürütme: Geniş bir çalışma bağlamıyla, tek seferde birçok dosyada UI'ı yeniden düzenler; tek seferlik stilleri yeniden icat etmek yerine mevcut bileşenlerinizi ve token'larınızı yeniden kullanır.

Resmî bir ön uç becerisi: Anthropic, Claude'un önce bir tasarım yönü yazmasını sağlayan ve kasıtlı olarak genel sistem yazı tiplerinden ve tahmin edilebilir mor gradyanlardan uzaklaştıran bir Frontend Design becerisi sunar.

Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.

Ders, Anthropic'in kendi modelleri hakkında söylediğiyle aynıdır: Claude varsayılan olarak zevk sahibi değildir — kendi başına bırakıldığında web tasarımının istatistiksel merkezine yakınsar (Inter, mor gradyanlar, yumuşak gölgeler). Kısıtlamalar verdiğinizde iyi tasarım üretir. OpenDesign tam da bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Claude Code'u tasarım çalışmaları için sıfırdan kurun
Kurulum sırası: kur → kimlik doğrula → CLAUDE.md'yi yapılandır → Frontend Design becerisini ekle → tarayıcı doğrulamayı etkinleştir.

Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı CLAUDE.md'ye koyun ve Claude'u bunlara yönlendirin; böylece çıktı genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.

Tarayıcı doğrulama ekleyin: Claude'un gerçek bir tarayıcıda render etmesi ve çıktısını yalnızca derlemenin geçtiğini onaylamak yerine kırılma noktaları genelinde denetlemesi için Playwright veya Chrome MCP'yi bağlayın.

Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.

# 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
Önceki kılavuzdan alınmış tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
CLAUDE.md ve Skills iş akışı
Claude Code ile en etkili tasarım döngüsü, ona gerçek referanslar artı tasarım bağlamınızı sunmak, ardından arayüz eşleşene kadar yinelemektir — CLAUDE.md ve Skills kısıtlamaları taşıyacak şekilde, böylece her istemde onları yeniden açıklamazsınız.

Sahip olduğunuz en net görsel referanslardan başlayın — ve birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin, sadece bir ana görsel değil.

İstemde spesifik olun; belirsiz istemler güçlü bir ajanla bile genel arayüz üretir.

Tasarım sisteminizi ve kurallarınızı CLAUDE.md'de tutun ve Claude'a token'ların ve kanonik temel bileşenlerin nerede olduğunu söyleyin.

Frontend Design skill'ini ekleyin ki Claude kod yazmadan önce gerçek bir estetik yön belirlesin.

Tarayıcı doğrulamasını devreye alın, böylece Claude render eder, kırılma noktalarına göre yeniden boyutlandırır ve referanslarla karşılaştırır — sadece derlendiğini onaylamaz.

Oturuma bir referans görüntüsü bırakın ve somut kısıtlamalarla istemde bulunun:

Yanında bir geliştirme sunucusu çalıştırın, istemleri küçük ve odaklı tutun ve 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 edilir. Daha büyük yeniden düzenlemeler için plan modunu kullanın, böylece herhangi bir dosya değişikliğinden önce yaklaşımı gözden geçirebilirsiniz.

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."
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
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 çerçeve seçin veya Claude Code'a bir bağlantı yapıştırın, tasarım bağlamını çekin ve mevcut bileşen kitaplığınızı kullanarak tasarımı uygulamasını isteyin. Code Connect, çıktıyı gerçek bileşenlerinizle uyumlu tutar.

Kod → Tasarım: Tarayıcıda bir özellik oluşturun ve önizleyin, ardından çalışan arayüzü 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 yükleyin (Dev Mode MCP, ücretli bir Figma planı gerektirir). Aynı Figma MCP, Claude Code, Codex, Cursor ve VS Code için kullanılabilir — tam da OpenDesign'in orkestre etmek için inşa edildiği türden taşınabilir, çoklu ajan yeteneği.
Tasarım için Claude Code vs Codex vs Cursor
Tasarım işi için tek bir kazanan yok — her ajanın farklı bir gücü var ve deneyimli ekipler bunları bir arada kullanır. Adil bir özet:

Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanına duyarlı UX muhakemesi — Ön yüz muhakemesi ve büyük bağlamlı refaktörler

Codex — Güçlü görsel cila ve görüntü anlama; sanal alanda eşzamansız derlemeler — Devredilen eşzamansız derlemeler ve taşınabilir AGENTS.md kuralları

Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel yap-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle arayüz çalışması

Toplulukta tekrar eden hüküm, zevkin insanlardan geldiğidir: üçü de beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken asıl sorun bu — ve bu model şeklinde değil, tasarım aracı şeklinde bir sorundur.

Ajan — Tasarım gücü — En uygun kullanım
Tuzaklar ve “yapay zekâ çöpü” görünümünden nasıl kaçınılır
Claude Code'un zevk konusundaki itibarına rağmen, yapay zekâ tarafından üretilen tasarım hakkındaki en yaygın şikâyet, genel görünmesidir — Inter yazı tipleri, beyaz üzerine mor gradyanlar, yumuşak gölgeler, aşırı büyük yuvarlatılmış köşeler, “bunu bir yapay zekâ yaptı diye bağıran” bir estetik. Anthropic bunu dağılımsal yakınsamaya bağlıyor: güvenli seçimler web eğitim verisine hâkim. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve arayüz metinlerine sızan talimatlar yer alıyor.

Frontend Design becerisini yükleyin: Claude'u gerçek bir yöne bağlanmaya zorlar ve yapay zekânın aşırı kullandığı yazı tipleri ile gradyanlardan açıkça kaçınır.

Tarayıcı doğrulamasını etkinleştirin: Claude'un kırılma noktaları arasında render etmesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmaz.

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'ye kodlayın: “hero kart yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalışmada okuduğu yere koyun.

Her hafifletmenin, ajana küratörlüğü yapılmış bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
OpenDesign içinde Claude Code ile tasarım yapmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Claude Code'u birinci taraf bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzüyle sarar — böylece Claude Code'u iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle birleştirilmez.

OpenDesign'ı kurun ve ajanınız olarak Claude Code'u seçin.

Anthropic API anahtarınızla (BYOK) veya Claude aboneliğinizle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve bizim üzerimizden asla proxy'lenmez.

Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.

Her eser ve DESIGN.md dosyası kendi deponuzda yaşar, barındırılan bir bulutta değil.

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, böylece işiniz veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.
Bu resmi bir Anthropic ürünü mü?
Hayır. OpenDesign bağımsız bir açık kaynak projesidir. Claude Code, Anthropic'in bir ticari markasıdır; ona birinci taraf adaptör olarak entegre oluyoruz.