Question 1

Grok Build Gerçekten Tasarım İşi Yapabilir mi?

Accepted Answer

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.

Question 2

Grok Build'de Kimlik Doğrulamasını Nasıl Yaparım?

Accepted Answer

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.

Question 3

Grok Build'i Özellikle Tasarım İçin İyi Yapan Nedir?

Accepted Answer

İ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.

Question 4

Frontend Tasarımı İçin Grok Build mı Claude Code mu?

Accepted Answer

İ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.

Question 5

Grok Build'i Figma'ya Nasıl Bağlarım?

Accepted Answer

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.

Question 6

Grok Build aslında nedir

Accepted Answer

Grok Build, xAI'nin terminal kodlama ajanıdır ve Grok Build adıyla sunulur. Deponuzu okur, dosyaları düzenler, kabuk komutları çalıştırır ve yalnızca satır tamamlamak yerine doğal dildeki görevlerden çok adımlı mühendislik işlerini planlar. xAI'nin Grok modelleri etrafında kurulmuştur — xAI API'sinde grok-build model ailesi olarak sunulur — ve xAI hesabınız üzerinden kimlik doğrulaması yapar, böylece ajan ve modeller aynı satıcıdan gelir.

Tasarım işleri açısından iki özellik öne çıkar. Herhangi bir değişiklik uygulanmadan önce onaylayabileceğiniz, yorumlayabileceğiniz veya yeniden yazabileceğiniz yapılandırılmış bir yaklaşım taslağı hazırlayan bir plan modu vardır — arayüz üzerinde yineleme yaparken faydalı bir kontrol noktası. Ayrıca Grok modelleri görsel girdi kabul eder; böylece ona bir referans ekran görüntüsü verebilirsiniz ve düz metin bir açıklamadan tahmin yürütmek yerine gerçek düzeni değerlendirir.

Bağlam dosyaları: Grok Build, kalıcı proje bağlamı için bir AGENTS.md dosyasını okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yer. Codex'in ve diğer ajanların kullandığı aynı açık AGENTS.md kuralını izler.

Araçlar, MCP + alt ajanlar: Dosyaları düzenler, kabuk komutları çalıştırır ve canlı bir Figma dosyası gibi dış bağlam eklemek için MCP sunucularını destekler; daha büyük görevlerde aynı anda araştıran, geliştiren ve inceleyen paralel alt ajanlara devredebilir.

Hesabınızla oturum açın: Tarayıcınız üzerinden SuperGrok veya X Premium+ aboneliğiyle oturum açarak kimlik doğrulaması yaparsınız; başsız (headless) ve CI kullanımı için bir xAI API anahtarı da getirebilirsiniz.

Kimlik bilgisi: xAI SuperGrok OAuth (`grok login`) veya başsız kullanım için bir xAI API anahtarı (BYOK)

Modeller: xAI Grok modelleri (xAI API'sinde grok-build ailesi), görsel girdi destekli

Satıcı: xAI

Question 7

Plan modu ve görsel farkındalıklı modeller neden tasarıma uyar

Accepted Answer

Grok Build'in tasarım avantajı iki özellikten gelir — ancak her ajanda olduğu gibi, zevkin yine de dışarıdan sağlanması gerekir.

Görsel farkındalıklı akıl yürütme: Grok modelleri görsel girdi kabul ettiği için ajan referans ekran görüntülerini okur — düz metin bir açıklamadan tahmin yürütmek yerine, oluşturduğu çıktıyı bir görselle karşılaştırır.

Değişiklikler uygulanmadan önce plan modu: Plan modu, dosyalar değişmeden önce onayladığınız yapılandırılmış bir yaklaşım taslağı hazırlar; böylece tasarım niyeti diff'ten sonra keşfedilmek yerine baştan incelenir.

AGENTS.md içindeki kurallar: Bir AGENTS.md (artı Figma MCP sunucusu), ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.

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

Ders, her ajanın öğrettiği aynı ders: Grok Build varsayılan olarak zevke sahip değildir. Ona kısıtlar verdiğinizde — bir tasarım sistemi, estetik bir beceri ve somut referanslar — iyi tasarım üretir. OpenDesign tam da bu girdileri paketler; ikisinin birbirine uymasının nedeni de budur (aşağıda daha fazlası).

Question 8

Grok Build'i tasarım işleri için sıfırdan kurun

Accepted Answer

Kurulum sırası: yükle → kimlik doğrula → AGENTS.md'yi yapılandır → bir beceri ekle → tarayıcı doğrulamasını etkinleştir.Tasarım kurallarınızı kodlayın: Token'larınızı, temel öğelerinizi ve kurallarınızı AGENTS.md'ye koyun ve Grok'u bunlara yönlendirin; böylece çıktı, genel bir görünüme düşmek yerine bir markayla uyuşur.Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP'si bağlayın; böylece Grok gerçek bir tarayıcıda render eder ve yalnızca derlemenin geçtiğini doğrulamakla kalmayıp çıktısını kırılma noktaları genelinde kontrol eder.Komutlar ve sürüme özgü, değişebilecek ayrıntılar için güncel kurulum bölümünü kullanın.# 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-...

# 3. Add project context
#    create an AGENTS.md at the repo root with your design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it to your MCP server configurationÖnceki kılavuzdan alınan tarihsel komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.

Question 9

Bir ekran görüntüsünü UI'ye dönüştürme

Accepted Answer

Grok Build ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görselini çalışan, duyarlı bir arayüze dönüştürmek ve eşleşene kadar yinelemektir — yaklaşım üzerinde anlaşmak için plan moduna, çıktıyı referansla karşılaştırmak için görsel farkındalıklı modele dayanarak.Elinizdeki en net görsel referanslarla başlayın — ve yalnızca tek bir vitrin görselini değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) ekleyin.İstemde spesifik olun; belirsiz istemler güçlü bir modelle bile genel arayüzler üretir.Tasarım sisteminizi ve kurallarınızı AGENTS.md'de tutun ve Grok'a token'ların ve kanonik temel öğelerin nerede olduğunu söyleyin.Yaklaşımı incelemek için plan modunu kullanın, ardından bir geliştirme sunucusu çalıştırın ve Grok'un gerçek bir tarayıcıda render etmesini, sonucu kontrol etmek için kırılma noktalarına göre yeniden boyutlandırmasını sağlayın.Grok'un uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamasını değil.Referans görsellerinizi ekleyin ve somut kısıtlar verin:İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit'leyin ve kötüleri geri alın (geri aldığınızda Grok'a söyleyin); böylece her tur temiz bir taban üzerine inşa edilir.grok
# in the prompt (attach reference-desktop.png and reference-mobile.png):
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Show me the plan first, then render it in the browser and iterate
  until it matches the references across breakpoints.Önceki kılavuzdan alınan tarihsel komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.

Question 10

AGENTS.md, MCP ve alt ajanlar

Accepted Answer

Üç genişletme noktası Grok Build'i sürekli tasarım işleri için pratik hale getirir ve üçü de açık bir tasarım iş akışına temiz biçimde oturur.

AGENTS.md bağlamı: Proje kuralları depo kökündeki bir AGENTS.md'de yaşar. Tasarım kurallarınız için kalıcı yuvadır ve her çalıştırmada okunur — ayrıca diğer ajanların anladığı aynı açık biçimdir, böylece kurallar sizinle birlikte taşınır.

MCP sunucuları: Tasarım bağlamı ve dış araçları getirmek için MCP sunucularını yapılandırın; bunların en ilgilisi Figma MCP sunucusudur — gerçek spesifikasyonları koda beslemenin taşınabilir yolu olup yalnızca Grok'ta değil, tüm ajanlarda çalışır.

Alt ajanlar ve yerleşik araçlar: Grok Build, aynı anda araştırmak, geliştirmek ve incelemek için paralel alt ajanlar başlatabilir; dosya, kabuk ve arama araçları da terminalden çıkmadan referans toplamasını ve doğrulama döngüsünü çalıştırmasını sağlar.

Bunlar taşınabilir, çok ajanlı yeteneklerdir — OpenDesign'ın her projede yeniden oluşturmak yerine düzenlemek için tasarlandığı şeyin tam da kendisi.

Question 11

Tasarım için Grok Build vs Codex vs Claude Code vs Cursor vs Gemini CLI

Accepted Answer

Tasarım işleri için tek bir kazanan yoktur — her ajanın farklı bir güçlü yanı vardır ve deneyimli ekipler bunları üst üste kullanır. Adil bir özet:

Grok Build — Değişiklikler uygulanmadan önce plan modunda inceleme, görsel farkındalıklı Grok modelleri ve paralel alt ajanlar; SuperGrok hesabınızla oturum açar — xAI modelleri sürecin içindeyken, incelenmiş, plan öncelikli arayüz geliştirme

Codex — Bir frontend becerisiyle güçlü görsel cila; korumalı alanda asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları

Claude Code — Spesifik tasarım kararları (hex, boşluk, tipografi) ve kod tabanına duyarlı UX — Frontend akıl yürütme ve büyük bağlamlı refaktörler

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

Gemini CLI — Güçlü çok kipli görsel anlama ve çok büyük bir bağlam; ücretsiz katmanı olan açık kaynak — Ekran görüntüsü yoğun işler ve tüm bir tasarım sistemini bağlamda tutma

Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: beceriler, referanslar ve kısıtlar olmadan hepsi genel bir estetiğe düşer. Çözülmesi gereken gerçek sorun budur — ve sorun model şeklinde değil, tasarım aracı şeklindedir.

Ajan — Tasarım gücü — En uygun olduğu alan

Question 12

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

Accepted Answer

Yapay zekâ ile üretilen tasarımla ilgili en yaygın şikâyet, genel görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir yapay zekâ yaptı diye bağıran” Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil yerleşimler ve talimatların arayüz metnine sızması var. Bunların hiçbiri Grok Build'e özgü değil; herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.

Estetik bir beceri ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.

Gerçek bir tarayıcıda doğrulayın: Kırılma noktaları genelinde render edin ve kendi kendini kontrol etsin; böylece yerleşimler mobilde sessizce bozulmaz.

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

Dikkat edin: her önlem, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her projede elle sürdürmek, OpenDesign'ın ortadan kaldırdığı angaryadır.

Question 13

OpenDesign içinde Grok Build ile tasarım yapmak

Accepted Answer

OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. Grok Build'i birinci taraf bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kitaplığı, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzüyle sarar — böylece Grok'u iyi yapan tasarım bağlamı, her seferinde elle bir araya getirilmek yerine ilk çalıştırmadan itibaren oradadır. OpenDesign bağımsızdır ve Apache-2.0'dır; kendi makinenizde çalışır, bu da ikiliyi doğal bir eşleşme yapar.

SuperGrok hesabınızla veya bir xAI API anahtarıyla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.

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

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

Aynı Grok Build ajanı, aynı kimlik bilgileri — üstüne etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır; yani işinizle veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.

OpenDesign'ı kurun ve ajanınız olarak Grok Build'i seçin.

Question 14

OpenDesign xAI ile bağlantılı mı?

Accepted Answer

Hayır. OpenDesign bağımsızdır; Grok, xAI'nin ticari markasıdır.

Grok ile
OpenDesign’da
tasarlayın.

Grok Başlangıç Noktanızı Seçin

Grok Kullanarak Bir Ürün Arayüzü Oluşturun

Grok'u Sıfırdan Kurun

Grok'u Diğer Ajanlarla Karşılaştırın

Tek Bir Grok Görevi: Brief, Artifact, İnceleme

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

2Kim Ne Yapar: Siz, Grok, OpenDesign

3Grok Artifact: 1440px ve 390px'te Etkinlik Sayfası

4Teslimden Önce İnceleme

Izgara ve Boşluklar

Görsel Hiyerarşi

Mobil Düzen

Etkileşim Kontrolleri

Grok Nereye Uyar — ve Nereye Uymaz

Grok Şu Durumlarda Uygundur

Şu Durumlarda Başka Bir Workflow Seçin

Başlamadan Önce Grok Gereksinimleri

Araç KapsamıGrok, xAI tarafından

Hesaplar ve Kimlik DoğrulamaxAI SuperGrok OAuth (`grok login`)

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

Bağlantı KontrolüBaşarı sinyali

Üç Adımda Grok Kurulumu

OpenDesign Masaüstü Uygulamasını İndirin

Grok Bağlantınızı Hazırlayın

Küçük Bir Grok Görevi Çalıştırın

Bir Grok Build Tasarım Görevinin Beş Adımı

Tasarım Brief'i

Tasarım Kısıtları

Arayüzü Oluştur

Önizleme

Revize Et ve Doğrula

Grok Tasarım Kaynakları

Grok İçin Ek Okumalar

Tasarım Skill'leri

Tasarım Sistemleri

Şablonlar

Grok Sınırları, Manuel Kontroller ve Yedek Yollar

Grok ve OpenDesign Hakkında Sık Sorulan Sorular

Grok ile OpenDesign’da tasarlayın.