Abonelik veya sahne paketi gerekir mi?

Skill ücretsiz indirilir ve kendi gereksinimlerinizle çalışır. Yalnızca bu sitedeki isteğe bağlı paketleri indirmek etkin ücretli abonelik gerektirir.

İki asistanda nasıl çağırabilirim?

Uygun dizine kurduktan sonra Codex’te $ai-ui-designer, Claude Code’da /ai-ui-designer kullanın ve tasarım görevini açıklayın.

Çalışan bir uygulama üretir mi?

Bu akış statik SVG tel kafesler ve UI tasarımları üretir. Uygulama kodu, arka uç ve gerçek etkileşimler ayrıca geliştirilir.

Skill neden görünmüyor?

Yolu ve SKILL.md dosyasının doğrudan ai-ui-designer içinde olduğunu kontrol edin. Gerekirse Codex’i yeniden başlatın; Claude Code’da /ai-ui-designer komutunu arayın.

Kodlamadan önce ekranı netleştirin

Codex ve Claude Code için ücretsiz UI tasarım skill’i

Sayfanızın neler yapacağı belli ama düzeni henüz net değil mi? Önce statik SVG tel kafes oluşturun, alanları ve ana işlemi kontrol edin, ardından görsel tasarımı geliştirin. Başlamak için ücretli sahne paketi gerekmez.

Skill’i ücretsiz indir Kurulum adımları

İndirmek için giriş gerekmez. Çıktı statik SVG’dir; kodlama asistanı ve model kullanımı ayrıca ücretlendirilebilir.

Gereksinimlerden incelenebilir bir düzene

Önce içerik ve işlemlerin yerini belirleyin; sonra yazı tipi, boşluk ve renkleri düzenleyin.

Ürün alanları, boyutlar, oluşturma düğmesi ve dört sonuç kartı bulunan SVG tel kafes — 02 Tel kafesi inceleyin

Mor kontroller ve şişe ürün posterleri içeren aynı aracın renkli SVG tasarımı — 03 Arayüzü geliştirin

Aynı ekranın tel kafesi ve görsel tasarımı

Ürün posteri aracı örneği, ücretli paket olmadan kullanılan akışı gösterir. Alanlar, boyut seçimi ve sonuçlar iki SVG’de de korunur. Dosyaları açıp karşılaştırabilirsiniz.

01 Sayfanın görevini açıklayın

ai-ui-designer skill’ini kullan.
Ürün adı, satış noktaları, boyut seçimi, oluşturma düğmesi ve sonuç ızgarası içeren bir ürün posteri aracı tasarla.

Kullanıcının ne yapacağını ve gerekli alanları belirtin.

Kurun ve ilk ekran taslağını hazırlayın

ZIP’i indirip açın. ai-ui-designer klasörünü mevcut Codex veya Claude Code ortamınızın skills dizinine yerleştirin.

1.Dosyaları doğru dizine koyun
SKILL.md doğrudan ai-ui-designer içinde olmalıdır. Tasarım talimatları, referanslar ve yardımcı betikler indirmeye dahildir.
Codex
~/.agents/skills/ai-ui-designer/
Claude Code
~/.claude/skills/ai-ui-designer/
Arşiv açılırken fazladan iç içe klasör oluşmadığını kontrol edin.

2.Amacı ve ana işlemi belirtin

Asistandan skill’i çağırın; sayfayı, hedef kullanıcıyı ve gerekli içeriği anlatın.

Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Değer önerisi, özellikler ve kayıt işlemi içeren ürün ana sayfam için bir SVG tel kafes tasarla.

3.SVG’yi açıp somut değişiklikler isteyin
Tarayıcıda veya SVG görüntüleyicide inceleyin. Başlıkları belirginleştirmek ya da ana düğmenin boşluğunu artırmak gibi istekler verin.
Görünmüyorsa yolu ve SKILL.md dosyasını kontrol edin. Codex değişiklikleri otomatik algılar; gerekirse yeniden başlatın. Claude Code’da / menüsüne bakın.

Kendi asistanınız ve model erişiminiz gerekir. Yerel paket yardımcıları Python 3.9 veya üzerini gerektirir. Sitedeki isteğe bağlı paketleri indirmek için etkin ücretli abonelik gerekir.

Tasarım kararlarını sırayla verin

Önce bilgi düzeni

İçerik bloklarını, form alanlarını ve işlemleri gri tonlu tel kafeste düzenleyin.

Sonra görsel ayrıntılar

Onaylanan yerleşimde yazı tipi, boşluk, renk ve görselleri geliştirin.

Aynı tasarım üzerinde devam edin

SVG’leri projenizde tutun, gereksinimler netleştikçe asistandan belirli alanları düzeltmesini isteyin.

Ücretsiz indirmeye neler dahil?

Kendi gereksinimlerinizle başlayın

Skill; tel kafes, renkli UI tasarımı, tema uygulama ve yerel paket yönetimini kapsar.

Sahne paketleri isteğe bağlı tasarım referanslarıdır; ücretsiz akış için zorunlu değildir.

İncelenebilir statik tasarımlar

Çıktı SVG dosyaları ve tasarım rehberidir. Çizilen düğmeler giriş, ödeme veya görsel oluşturma işlemi yapmaz.

Uygulama ayrı bir geliştirme görevidir. Asistanın kullanılabilirliği ve model ücretleri ilgili aracın koşullarına bağlıdır.

Başlamadan önce

Abonelik veya sahne paketi gerekir mi?: Skill ücretsiz indirilir ve kendi gereksinimlerinizle çalışır. Yalnızca bu sitedeki isteğe bağlı paketleri indirmek etkin ücretli abonelik gerektirir.
İki asistanda nasıl çağırabilirim?: Uygun dizine kurduktan sonra Codex’te $ai-ui-designer, Claude Code’da /ai-ui-designer kullanın ve tasarım görevini açıklayın.
Çalışan bir uygulama üretir mi?: Bu akış statik SVG tel kafesler ve UI tasarımları üretir. Uygulama kodu, arka uç ve gerçek etkileşimler ayrıca geliştirilir.
Skill neden görünmüyor?: Yolu ve SKILL.md dosyasının doğrudan ai-ui-designer içinde olduğunu kontrol edin. Gerekirse Codex’i yeniden başlatın; Claude Code’da /ai-ui-designer komutunu arayın.

Sonraki sayfanız için net bir başlangıç

Ücretsiz UI tasarım skill’ini asistanınıza kurun. Gereksinimleri, geliştirmeden önce inceleyip iyileştirebileceğiniz bir SVG düzenine dönüştürün.

Skill’i ücretsiz indir Kuruluma dön