83.3K+İndir
Kullanım kılavuzuna geç
imagegen-frontend-mobileyazan Leonxlnx

ImageGen Frontend Mobile Skill.

Claude Code ve Codex için mobil uygulama tasarımı skill'i: görsel üretimi yoluyla yüksek kaliteli mobil ekran konseptleri ve akışları.

  • Mobil Uygulamalar
  • Image
OpenDesign İndirKullanım kılavuzunu görüntüle
Leonxlnx/taste-skill · skills/imagegen-frontend-mobile/SKILL.mdSKILL.md
--- name: imagegen-frontend-mobile description: Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. PLATFORM MODE RULE ## 3. MANDATORY SCREEN-FIRST RULE ## 4. GENERATE ENOUGH SCREENS RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. APP DESIGN BIBLE RULE
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okunmuştur · toplam 40.285 karakter

01 Ne yapar

imagegen-frontend-mobile Skill Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, iOS, Android ve platformlar arası ürünler için premium mobil uygulama ekran görselleri üretir; onboarding akışları, panolar, profil ekranları, kimlik doğrulama akışları, e-ticaret, fintech, sağlık, üretkenlik ve sosyal uygulamaları kapsar. Temiz hiyerarşiyi, okunabilir metni, güçlü çok ekranlı tutarlılığı, kontrollü renk paletlerini, sıradan olmayan yaratıcı yönü, dokulu yüzeyleri, görsel odaklı kompozisyonu ve özel ikonografiyi önceliklendirir.

Ekranlar varsayılan olarak görünür çerçeveli, ince premium iPhone veya benzeri telefon mockup'ları içinde görünür. Skill yalnızca görsel üretir—kod yok, uygulama yok, görselden koda dönüşüm yok. Sahte fintech panoları, okunamaz küçük metin, sıradan mor-mavi paletler ve tutarsız ekran setleri gibi genel yapay zeka mobil çıktı kalıplarına aktif olarak karşı çıkmak için DESIGN_VARIANCE: 8, ART_DIRECTION: 9, TEXT_READABILITY_PRIORITY: 10 ve CONSISTENCY_STRENGTH: 10 gibi yapılandırma değerlerini kullanır.

Neler üretir

  • Ana odağın uygulama içeriğinde kaldığı, görünür cihaz kenarlıklarına sahip temiz telefon mockup'ları içinde bir veya daha fazla mobil ekran görseli
  • Bir ayrıntı belirsiz olduğunda, isteğe bağlı olarak ek ayrıntı görünümleri veya büyük görsellerden kırpılmak yerine özel olarak üretilen taze bağımsız ekran görselleri
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Önce Platform Modunu Seçin

    Herhangi bir ekran üretmeden önce gezinme desenlerini, güvenli alan yönetimini ve chrome davranışını belirlemek için iOS-native premium, Android-native premium veya platformlar arası premium neutral seçin.

  2. 02
    Dahili Tasarım İncilini Kilitleyin

    Aynı uygulama için birden çok görsel üretirken, tüm ekranlarda tutarlı platform modu, cihaz çerçeve stili, palet mantığı, tipografi ruh hali, boşluk sistemi, köşe yarıçapı, ikon stili ve gezinme modelini oluşturun ve sürdürün.

  3. 03
    Görsel Yön Sistemini Seçin

    Tekrarlayan çıktıları önlemek için tek bir tema paradigması, tipografi karakteri, yapı eğilimi, görsel sanat yönü eğilimi, doku işleme, palet mantığı, tam olarak 4 imza bileşen, tam olarak 2 dekoratif varlık ve tam olarak 2 hareket-ima dili seçin.

  4. 04
    Gerektiğinde Yeni Detay Render'ları Oluştur

    Bir ekran veya detay için özel bir görünüm gerektiğinde, boşlukları, oranları ve tipografiyi korumak için önceden oluşturulmuş daha büyük bir görüntüden kırpmak yerine yeni, bağımsız bir ekran görüntüsü oluşturun.

  5. 05
    Kalite Doğrulaması Yap

    Sonlandırmadan önce, bunun bir web sitesi değil gerçek bir mobil uygulama gibi hissettirip hissettirmediği, güvenli alanların dikkate alınıp alınmadığı, ilk ekranın temiz olup olmadığı, yazının okunabilir olup olmadığı, yeterli ekran oluşturulup oluşturulmadığı, akışın tutarlı olup olmadığı ve mockup çerçevelemesinin temiz olup olmadığı dahil 27 kontrolü doğrulayın.

02 Uyumunuzu bulun

imagegen-frontend-mobile Skill Ne Zaman Kullanılır

Bu tür mobil uygulama tasarımı işlerinde Claude Code veya Codex'te imagegen-frontend-mobile becerisini kullanın. Uygunluk ve sınırlamalar becerinin kendi dosyasından alınmıştır.

İyi Uyum

  • Temiz hiyerarşi ve güçlü çok ekranlı tutarlılık gerektiren premium, uygulama-native ekran konseptlerine ihtiyaç duyan iOS, Android ve platformlar arası mobil ürünler

Sınırları Bilin

  • daha büyük bir panodan bir ayarlar görünümünü kırpın
  • çok ekranlı bir kolajdan küçük onboarding metnini kırpın
  • incelemek için daha geniş bir ekrandan küçük bir kartı kırpın
  • boşlukları, oranları veya tipografiyi bozuyorlarsa kesitlere güvenmeyin

Ne Sağlamalısınız

  • GereksinimlerGörsel oluşturma servisi — SKILL.md içinde zorunlu olarak belirtilmiştir.

03 Skill'in içinde

imagegen-frontend-mobile Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Sadece Görüntü Üretimi

    Kodlama moduna geçmeyin, kodu tarif etmeyin veya SwiftUI, React Native, Flutter ya da HTML oluşturmayın. Sadece mobil ekran görüntüleri ve ekran-akış görüntüleri oluşturun.

  2. Metin Okunabilirliği Önceliği

    TEXT_READABILITY_PRIORITY: 10, metnin normal görüntüleme boyutunda hiçbir zaman küçük hissettirmemesi gerektiği anlamına gelir. Metin küçük hissettiriyorsa, tasarım henüz tamamlanmamıştır.

  3. Ekran Sayısı Disiplini

    IMAGE_GENERATION_EAGERNESS: 10, ekran sayısı konusunda tembel olmama anlamına gelir. Daha fazla ekran akışı iyileştirecekse, daha fazla ekran oluşturun.

  4. Varsayılan Telefon Mockup'ı Varlığı

    Varsayılan olarak, mobil UI'yi görünür bir cihaz kenarlığı veya çerçevesi olan temiz bir telefon mockup'ı içinde sunun.

  5. Renk Paleti Disiplini

    COLOR_PALETTE_DISCIPLINE: 10, her zaman temiz, kontrollü, premium palet mantığı gerektirir.

04 İşe koyun

imagegen-frontend-mobile'ı Claude Code veya Codex'e Yükle

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

imagegen-frontend-mobile'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile

skills/imagegen-frontend-mobile/SKILL.md için genel skills CLI formu; depo kendi yolunu farklı belgeleyebilir.

Skill'e İlk Mobil Uygulama Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Design a 5-screen onboarding flow for a premium fitness tracking app targeting iOS users. Include a welcome screen with hero imagery, permissions requests for health data and notifications, personalized goal-setting with activity level selection, and a first dashboard view showing progress rings and weekly activity. Use calm wellness aesthetics with controlled green and slate palette, generous breathing room, and motivating lifestyle photography with fade-to-transparent treatments behind headlines.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Bu, bir telefondaki web sitesi değil gerçek bir mobil uygulama gibi hissettiriyor mu? Güvenli alanlar görsel olarak dikkate alınıyor mu?
  • İstenen akış için yeterli ekran var mı? Tembellikten dolayı çok az ekran mı oluşturuldu? Bir detay belirsizse, yeni bir detay render'ı oluşturuldu mu?
  • Telefon mockup çerçevesi temiz mi ve tüm kenarlarda eşit şekilde dolgulu mu? Metin rahatça okunabilir ve çok küçük değil mi?

OpenDesign'da imagegen-frontend-mobile paket olarak sunulur: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill dosyası
skills/imagegen-frontend-mobile/SKILL.md Doğrulamada kaydedilen içerik checksum'ı; commit ccbc156
License
MIT LICENSE dosyasından.
Repository yıldızları
86.946 Katalogda 11 skill içeren Leonxlnx/taste-skill deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. imagegen-frontend-mobile için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. ÇEKİRDEK DİREKTİF: PREMIUM MOBİL UYGULAMA GÖRÜNTÜ YÖNETİMİGenel mockup'lar değil, premium uygulama-native ekran görüntüleri üreten elit mobil ürün tasarım sanat yönetmeni rolünü belirler
  2. AKTİF TEMEL YAPILANDIRMADESIGN_VARIANCE: 8, ART_DIRECTION: 9, TEXT_READABILITY_PRIORITY: 10, CONSISTENCY_STRENGTH: 10 dahil 19 yapılandırma değerini ayarlar
  3. PLATFORM MOD KURALIÖnce iOS-native premium, Android-native premium veya platformlar arası premium nötr seçin ve tutarlılığı koruyun
  4. EKRAN ÖNCELİKLİ ZORUNLU KURALAna teslimat olarak doğrudan ekran görselleri veya ekran setleri üretin, yalnızca metinle yanıt vermeyin
  5. YETERİNCE EKRAN ÜRETME KURALIEkran sayısında tembellik etmeyin, istenen veya inandırıcı bir akış için gereken kadar ekran üretin
  6. ESKİ GÖRSELLERİ KIRPMAMA KURALIDetaylar için önceden üretilmiş daha büyük görsellerden kırpmak yerine yeni, bağımsız ekran görselleri üretin
  7. UYGULAMA TASARIM KİTABI KURALIAynı uygulama setindeki tüm ekranlarda platformu, paleti, tipografiyi, boşlukları, ikonları ve dokuyu tutarlı şekilde kilitleyin
  8. ÇOK EKRANLI TUTARLILIK KURALITüm ekranlarda marka havasını, tip hiyerarşisini, paleti, navigasyonu, bileşen ailesini ve yüzey işlemesini tutarlı tutun
  9. MANTIKLI AKIŞ KURALIEkran sırası inandırıcı bir kullanıcı yolculuğu olarak mantıklı olmalı, rastgele ilgisiz ekranlar olmamalıdır
  10. VARSAYILAN MAKET GÖSTERİM KURALIVarsayılan olarak arayüzü görünür cihaz kenarlığı olan temiz bir telefon maketi içinde gösterin, yalnızca açıkça istenirse kaldırın
  11. CİHAZ MAKET ÇERÇEVESİ KURALITutarlı bir cihaz stili kullanın, ölçeği sabit tutun, maketi ortalayın, dış boşlukları dengeleyin, çerçeveyi görünür ve temiz tutun
  12. STİL ÇEŞİTLENDİRME MOTORUTekrarlayan çıktılardan kaçınmak için tema paradigması, tipografi karakteri, yapı eğilimi, görsel sanat yönetimi, doku, palet mantığı, 4 imza bileşen ve 2 dekoratif öğe seçin
Skill'in Kendi Açıklaması
"Premium, uygulama-yerel ekran konseptleri ve akışlar oluşturmak için elit mobil uygulama görsel üretim skill'i. iOS, Android ve platformlar arası mobil ürünler için tasarlanmıştır. Temiz hiyerarşi, rahatça okunabilir metin, güçlü çoklu ekran tutarlılığı, kontrollü renk paletleri, jenerik olmayan yaratıcı yönetim, dokulu yüzeyler, görsel odaklı kompozisyon, zevkli özel ikonografi ve temiz telefon mockup çerçevelemesine öncelik verir. Varsayılan olarak, ekranlar görünür çerçeveli ince bir premium iPhone veya benzer telefon mockup'ı içinde gösterilirken, ana odak uygulamanın içeriğinde kalır. Bu skill yalnızca görseller üretir. Kod yazmaz."

SKILL.md'den ön madde açıklaması. Tam dosya yaklaşık 40.285 karakterdir. Tam dosyayı GitHub'da okuyun.

ImageGen Frontend Mobile

imagegen-frontend-mobile'ı Gerçek Bir Mobil Uygulama Tasarım Görevinde Çalıştırın.

imagegen-frontend-mobile skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'de skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile