Antigravity ile
OpenDesign’da
tasarlayın.

signup-flow.html · 1440px

4Teslimden Önce İnceleme

1. 1

   OpenDesign Masaüstü Uygulamasını İndirin

   Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.

   OpenDesign'ı indirin

   KONTROL NOKTASI

   Masaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok.
2. 2

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

   Yüklü sürümünüzdeki Antigravity talimatlarını izleyin. Google hesabınızla kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.

   # 1. Download Antigravity for your OS (macOS, Windows, Linux)
   #    from the official download page: antigravity.google/download
   
   # 2. Launch it and sign in
   agy               # opens Antigravity; sign in with your Google account
   
   # 3. Accept the data-use policy, pick a theme, and open your project folder

   Yayınlanan kılavuzdaki Antigravity kurulum notlarından alınmıştır; güncel komut için satıcı belgelerini kontrol edin.

   KONTROL NOKTASI

   Hedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin.
3. 3

   Küçük Bir Antigravity 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’i Kopyala

   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.

   KONTROL NOKTASI

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

1. 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.
   • AntigravityBrief'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.

   New project · PromptAntigravity

   You

   Design a three-step signup: account, workspace, invite. Verify each step in the browser at 1440 and 390 before handoff.

   Antigravity

   Understood. Should the URL slug be editable, or derived from the workspace name and locked?
2. 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.
   • AntigravityBir satır 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.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Arayüzü Oluştur

   Antigravity, kendi içinde bütünlüklü bir HTML dosyası yazar: düzen, stiller, etkileşimler ve sabit hook'lar.

   • SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
   • AntigravityBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanı 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.

   Project files3 files

   • signup-flow.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 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.
   • AntigravityÖnizlemedeki yorumlarınızı okur ve sonraki revizyonu hazırlar.
   • OpenDesignÖnizlemeyi render eder, yorumlar ve 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ığı.

   Preview · 390pxComment mode

   Comment on · stepper

   Only the current step in green; done steps get a check, not the accent.

   Comment on · summary

   On the phone keep only “Due today”; the rest is noise here.
5. 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.
   • AntigravityDeğ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.

   Verification · v23 of 4

   • ✓Current step only in accent
   • ✓Summary collapses at 390px
   • ✓No horizontal scroll at 390px
   • Validation states — checked by you