DAHA FAZLA OKUMA
Grok İçin Ek Okumalar
Yayımlanan kılavuzda listelendiği şekliyle, Grok ile tasarım yapmak için eğitimler, dokümantasyon ve rehberler.
Grok 
OpenDesign Grok ile
OpenDesign’da
tasarlayın.
OpenDesign'da Grok Build ile arayüz tasarlama: referans olarak bir etkinlik posteri, herhangi bir değişiklikten önce bir plan, brief'ten incelenmiş dosyaya tek bir landing page görevi ve başlamadan önce bilinmesi gereken sınırlar.
Briften arayüze01 / Grok
FİKRİ SİZ GETİRİN↗
“Bir posterden etkinlik sayfası,
koddan önce bir planla.”
BU GROK KILAVUZUNA GİRİŞ İÇİN ÜÇ YOL
Grok İle Nereden Başlayacağınızı Seçin
BU KILAVUZ · UI TASARIMI
Grok İle Bir Ürün Arayüzü Oluşturun
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun KURULUMGrok'u Sıfırdan Kurun
Temiz bir makineden UI oluşturup doğrulayabilen bir Grok Build'e kadar tam yol burada.
Kuruluma git KARŞILAŞTIRMAGrok'u Diğer Ajanlarla Karşılaştırın
Tasarım işleri için Grok'un Codex, Claude Code, Cursor'dan farkları ve ne zaman başka bir iş akışı seçmeniz gerektiği.
Karşılaştırmayı görünUçtan Uca Bir Grok Tasarım Görevi
Bir Grok Tasarım Görevi: Brief'ten Arayüze
Uçtan uca gösterilen tek bir görev: teslim ettiğiniz brief ve kısıtlar, geri gelen çıktı ve tamamlanmadan önce yine de yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir; kayıtlı bir Grok çalışması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefEkteki poster görselinden iki günlük bir geliştirici konferansı için landing page tasarlayın: tarih ve mekan, program ön izlemesi, konuşmacılar ve bilet çağrısı. Masaüstü ve telefon.
- Tasarım sistemiOpenDesign kağıt tuvali: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerBilet CTA'sı, program günü değiştirme, konuşmacı kartları
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2İş Bölümü: Siz, Grok ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Grok
Düzeni planlar, HTML, CSS ve JavaScript'i yazar ve talep üzerine gözden geçirir.
- OpenDesign
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
- İnceleme
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
3Grok Artifact: 1440px ve 390px'de Etkinlik Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Hero, parçalar ve kanıt 8px ızgarada; poster görseli sıkıştırılmadan kırpılır.
Hiyerarşi
Görsel Hiyerarşi
Önce tarih ve başlık, ardından bilet butonu; vurgu rengi yalnızca o butonu işaretler.
Duyarlı
Mobil Düzen
Başlık, tarih ve bilet butonu görselin üzerinde; parçalar sırayla alt alta dizilir.
Etkileşim
Etkileşim Kontrolleri
Biletleri açın, program günlerini değiştirin, bir konuşmacı kartını takip edin.
Uygunluk
Grok Görev İçin Ne Zaman Uygun, Ne Zaman Değil
Grok Şu Durumlarda Uygundur
- Görsel farkındalıklı ekran görüntüsü → UI. Grok modelleri görsel girdiyi kabul eder, bir referans görseli duyarlı markup'a dönüştürür ve sonucu ona göre kontrol eder.
- Değişikliklerden önce plan modu. Dosyalar değişmeden önce onayladığınız yapılandırılmış bir plan; böylece tasarım amacı, diff'ten sonra değil önceden gözden geçirilir.
- AGENTS.md + MCP. Bağlam dosyaları kurallarınızı taşır; Figma MCP sunucusu gerçek tasarım bağlamını koda getirir.
- Hesabınızla oturum açın. OAuth ile SuperGrok veya X Premium+ üzerinden kimlik doğrulaması yapın veya headless kullanım için kendi xAI API anahtarınızı (BYOK) getirin.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Üretilen ürün HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gereken varlık formatı için ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlarınız yok. Bir design system veya örnek olmadan çıktı genel bir görünüme kayma eğilimindedir; önce brief'i yazın.
- Bu ajanın gerektirdiği kimlik bilgisine sahip değilsiniz. Gerekli: xAI SuperGrok OAuth (`grok login`). OpenDesign kimlik bilgisi sağlamaz veya bunlara aracılık etmez.
- Ekibiniz Hermes veya Codex ile çalışıyor. Bu ajanların kendi sayfaları vardır; çalışma alanı aynıdır, kurulum farklıdır. İlgili ajanlara bakın.
Uyumluluk
Başlamadan Önce Grok Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Grok'u kapsar. Yayınlanan referanslar 6 Eylül 2026 tarihinde kontrol edilmiştir.
Araç KapsamıGrok, xAI tarafından
Grok Build, xAI'nin terminal kodlama ajanıdır ve Grok Build olarak sunulur. Kod tabanınızı okur, dosyaları düzenler, shell komutları çalıştırır ve harekete geçmeden önce çok adımlı mühendislik çalışmalarını planlar. Bu sayfa, Grok'un kendi arayüzüyle ilgili değil, OpenDesign üzerinden Grok ile arayüz tasarlamakla ilgilidir. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaxAI SuperGrok OAuth (`grok login`)
xAI SuperGrok OAuth (`grok login`). SuperGrok hesabınızla veya bir xAI API anahtarıyla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır. Bu sayfa bir kota veya fiyat garantisi vermez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
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ü paketini kurmaya değil. Uyumlu minimum Grok 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ı izleyin, ardından küçük bir görev çalıştırın. Grok'un bunu işlediğini ve üretilen dosyanın açıldığını doğrulayın. Yalnızca indirme işlemi çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Grok Kurulumu
Önce indirin, kurulu sürümünüz için Grok kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu izlemek için OpenDesign'ı kaynaktan derlemeniz gerekmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok. - 2
Grok Bağlantınızı Hazırlayın
Kurulu sürümünüzdeki Grok talimatlarını izleyin. SuperGrok hesabınızla veya bir xAI API anahtarıyla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.
xAI modelleri dokümantasyonu# 1. Install Grok Build (Grok Build) on macOS/Linux curl -fsSL https://x.ai/cli/install.sh | bash # 2. Start it in your project and authenticate on first run cd your-project grok login # opens your browser; sign in with SuperGrok / X Premium+ # or, for headless / CI use, set an xAI API key: # export XAI_API_KEY=xai-...Yayımlanan kılavuzdaki Grok kurulum notlarından; güncel komut için satıcı belgelerini kontrol edin.
KONTROL NOKTASIHedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin. - 3
Küçük Bir Grok Görevi Çalıştırın
Bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.
Başlangıç brief’iBir 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.
KONTROL NOKTASISonucu açın, kayıt durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan bir dosya, incelemenin sonu değil başlangıcıdır.
OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
Grok tasarım iş akışı
Beş Adımda Grok Tasarım İş Akışı
Aynı etkinlik sayfası görevi, brief'ten doğrulanmış dosyaya kadar adım adım. Her adımda sizin sağladığınız şey, Grok'un yaptığı şey, OpenDesign'ın kattığı şey ve sizin kontrol ettiğiniz şey listelenir.
- 1
Tasarım Brief'i
Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.
- SizBrief'i yazın; varsa referans bir ekran görüntüsü ekleyin.
- GrokBrief'i ve projenin talimat dosyasını okur; bir şey belirsiz olduğunda sorar.
- OpenDesignProjeyi, prompt yüzeyini ve ilgili artifact türü için skill'i sağlar.
- KontrolBrief'in kabul kriterlerini belirttiğini doğrulayın. Bunları şimdi eklemek, üretimden sonra eklemekten daha ucuzdur.
- 2
Tasarım Kısıtları
Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.
- SizBir design system seçin; breakpoint'leri ve kullanılması gereken bileşenleri belirtin.
- GrokBir satır yazmadan önce DESIGN.md token'larını ve tutum 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
Arayüzü Oluştur
Grok, kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve kararlı hook'lar.
- SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
- GrokBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olan kısımları 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
Önizleme
Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. 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.
- GrokÖnizlemeye yazdığınız yorumları okur ve sonraki revizyonu hazırlar.
- OpenDesignÖnizlemeyi render eder, yorumlar ve düzenlemeler için
data-od-idhedeflerini açığa çıkarır. - KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.
- 5
Revize Et ve Doğrula
Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.
- SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
- GrokDeğ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
Grok Tasarım Kaynakları
Skill'ler Skill'lere göz atın Tasarım sistemleri Sistemlere göz atın Şablonlar Şablonlara göz atın
Tasarım Skill'leri
Grok'un OpenDesign içinde üretebildiği artifact türleri, her tür için bir skill.
Tasarım Sistemleri
Grok herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenler.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Grok Sınırlamaları, Manuel Kontroller ve Yedek Çözümler
- KapsamBu sayfa Grok'u OpenDesign'a bağlı bir ajan olarak ele alır, Grok'un tüm özelliklerini kapsamaz.
- Kullanım LimitleriKullanım limitleri ve maliyet kullandığınız kimlik bilgisine göre değişir (xAI SuperGrok OAuth (`grok login`)). Bu sayfa ücretsiz kotalar hakkında herhangi bir iddiada bulunmaz.
- 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'lar HTML dosyalarıdır, vektör tasarım dosyaları değildir.
- Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede sizin tarafınızdan incelenir. Ajan tarafından yapılan herhangi bir kendi kendini kontrolü 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
Grok ve OpenDesign Hakkında Sık Sorulan Sorular
Grok Build Gerçekten Tasarım İşi Yapabilir mi?
Evet — bir estetik skill, bir design system ve bağlamda gerçek referans görseller ile Grok Build üretim kalitesinde, responsive bir UI üretir; görsel farkındalığa sahip Grok modelleri de çıktıyı referanslara karşı doğrulamaya yardımcı olur. Bu bağlam olmadan genellikle jenerik bir görünüme kayar, OpenDesign'ın kapattığı boşluk da tam olarak budur.
Grok Build'de Kimlik Doğrulamasını Nasıl Yaparım?
SuperGrok veya X Premium+ aboneliğinizle (`grok login`) tarayıcınız üzerinden oturum açarsınız, yani yönetmeniz gereken bir API anahtarı yoktur. Headless veya CI kullanımı için bunun yerine bir xAI API anahtarı getirebilirsiniz. OpenDesign her iki durumda da kimlik bilgilerinizi asla proxy'lemez.
Grok Build'i Özellikle Tasarım İçin İyi Yapan Nedir?
İki şey: plan modu herhangi bir değişiklik uygulanmadan önce yaklaşımı gözden geçirmenizi sağlar ve Grok modelleri görsel girdi kabul eder, bu sayede referans ekran görüntülerini iyi okur. Her ikisi de yardımcı olur — ama zevk hâlâ sağladığınız design system, skill ve referanslardan gelir.
Frontend Tasarımı İçin Grok Build mı Claude Code mu?
İkisi de güçlüdür. Claude Code, kod tabanına duyarlı, spesifik tasarım kararlarıyla tanınır; Grok Build'in avantajı ise plan modu incelemesi ve görsel farkındalığa sahip xAI modelleridir. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.
Grok Build'i Figma'ya Nasıl Bağlarım?
Figma MCP sunucusunu MCP yapılandırmanıza ekleyin. Grok böylece gerçek tasarım bağlamını — bileşenler, değişkenler, layout verisi — çekebilir, böylece üretilen kod kaynağı yaklaşık olarak taklit etmek yerine ona uyar.
Grok ile İlk Tasarım Görevine Başlayın
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.