Claude Code 
OpenDesign 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.
“Bir şablonu değil, token'larımızı
takip eden çalışma alanı ayarları.”
BU CLAUDE CODE KILAVUZUNA ÜÇ GİRİŞ YOLU
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun KURULUMTemiz bir makineden UI oluşturup doğrulayabilen bir Claude Code'a kadar giden tüm yol burada.
Kuruluma git KARŞILAŞTIRMAClaude Code'un Codex, Cursor'dan tasarım çalışması açısından farkları ve başka bir workflow'un ne zaman seçilmesi gerektiği.
Karşılaştırmayı görünEksiksiz Bir Claude Code Tasarım Görevi
Uçtan uca gösterilen tek bir görev: teslim ettiğiniz brief ve kısıtlar, geri gelen artifact ve iş bitmeden önce yine de yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir; kaydedilmiş bir Claude Code çalıştırması değildir.
BriefKüçük bir SaaS ekibi için workspace settings alanını tasarlayın: genel, üyeler, bildirimler ve faturalandırma. CLAUDE.md içindeki tokenları kullanın; elle ayarlanmış hiçbir şey olmasın. Masaüstünde ve telefonda çalışmalı.
data-od-id kancalarına sahip kendi kendine yeterli tek bir HTML dosyasıBrief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
Düzeni planlar, HTML, CSS ve JavaScript'i yazar ve talep üzerine gözden geçirir.
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
Alt navigasyon, form ve eylemler 8px grid üzerinde yer alır; sabit kaydet çubuğu hiçbir alanla çakışmaz.
Grup başlıkları etiketlerden önceliklidir; vurgu rengi yalnızca etkin toggle'ları işaretler, başka hiçbir şeyi işaretlemez.
Alt gezinme bir bölümlü anahtara dönüşür; geçiş düğmeleri 44px'lik dokunma alanını korur; kaydet düğmesi genişliğin tamamını kaplar.
Her alanda Tab ile gezinin, bir geçiş düğmesini değiştirin, kaydedilmemiş değişiklikler istemini iptal edin ve onaylayın.
Uygunluk
Uyumluluk
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Claude Code'u kapsar. Yayınlanan referanslar 6 Eylül 2026 tarihinde kontrol edilmiştir.
Claude Code, Anthropic'in ajan tabanlı komut satırı aracıdır: bir görevi doğal dille tanımlarsınız ve o, görev tamamlanana kadar projenizdeki kodu okur, yazar ve çalıştırır. Bu sayfa, OpenDesign üzerinden Claude Code ile arayüz tasarlamayla ilgilidir, Claude Code'un kendi arayüzüyle ilgili değildir. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Anthropic API anahtarı (BYOK) veya Claude aboneliği. Anthropic API anahtarınız (BYOK) veya Claude aboneliğinizle kimlik doğrulaması yapın — hiçbir şey bizim üzerimizden proxy'lenmez. Bu sayfa bir kota veya fiyat garantisi vermez.
Yüzeyler: terminal CLI, VS Code / Cursor / JetBrains uzantıları, masaüstü uygulaması, web. Masaüstü sürümleri için indirme sayfasını kontrol edin. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırmaya uygulanır, bir masaüstü paketi kurulumuna değil. Minimum uyumlu Claude Code sürümü: burada doğrulanmamıştır.
Yüklü sürümünüzün gösterdiği bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Claude Code'un görevi işlediğini ve üretilen çıktının açıldığını doğrulayın. Sadece indirme işlemi çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Önce indirin, yüklü sürümünüz için Claude Code kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu takip etmek için OpenDesign'ı kaynaktan derlemeniz gerekmez.
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinYüklü sürümünüzdeki Claude Code talimatlarını izleyin. Anthropic API anahtarınız (BYOK) veya Claude aboneliğinizle kimlik doğrulaması yapın — hiçbir şey bizim üzerimizden proxy'lenmez.
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 keyYayınlanan kılavuzdaki Claude Code kurulum notlarından; güncel komut için satıcı belgelerine bakın.
Bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.
Bir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Design kurallarımı kullanın. Masaüstü ve mobil genişliklerde kontrol edin.
OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
Claude Code tasarım iş akışı
Aynı ayarlar ekranı görevi, brief'ten doğrulanmış dosyaya kadar adım adım. Her adımda sizin sağladığınız şey, Claude Code'un yaptığı şey, OpenDesign'ın kattığı şey ve sizin kontrol ettiğiniz şey listelenir.
Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.
Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.
Claude Code, kendi içinde bütünlüklü bir HTML dosyası yazar: düzen, stiller, etkileşimler ve kararlı bağlantı noktaları.
Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. Tasarımın değerlendirildiği yer burasıdır.
data-od-id hedeflerini açığa çıkarır.Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.
Kaynaklar
Yayınlanan kılavuzda listelendiği gibi, Claude Code ile tasarım yapmaya yönelik öğreticiler, belgeler ve anlatımlar.
Claude Code'un OpenDesign'da üretebileceği artifact türleri, her tür için bir skill.
Claude Code herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenler.
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
SSS
Küçük bir görevle başlayın, gidiş-dönüşü değerlendirin, ardından gerçek brief'i getirin. Kurulumunuza uyan seçeneği seçin; sayfa bunu algılamaz.