Kimi ile
OpenDesign’da
tasarlayın.

notification-preferences.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

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

   Kurulu sürümünüzdeki Kimi talimatlarını izleyin. Moonshot API anahtarınızla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.

   Kimi CLI belgeleri — Başlarken

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

   Yayınlanan kılavuzdaki Kimi kurulum notlarından; geçerli 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

   Bir Küçük Kimi 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.
   • KimiBrief'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 · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
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.
   • KimiBir 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.

   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

   Kimi, kendi kendine yeten 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.
   • KimiBölümleri planlar, HTML, CSS ve JavaScript kodunu yazar, dosyayı çalıştırır ve hataları 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

   • notification-preferences.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.
   • KimiÖnizlemeye yaptığınız yorumları 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 · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
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.
   • KimiDeğ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

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you