Kullanım kılavuzuna geç
Wireframe Specyazan Owl-Listener

Wireframe Spec Skill.

Düşük detay düzeyli bir ekranı, davranış ve içerik üzerine konuşmaya yetecek kadar net hale getirin.

  • Prototipleme
  • Tel Kafesler
Kaynak İncelemesi · Wireframe SpecSKILL.md
Görev Prototipleme Çıktılar • İçerik öncelikleriyle açıklamalı bir ekran yapısı. • Başlıkları, uzunlukları, görselleri ve kaynakları içeren içerik gereksinimleri. • Duyarlı yerleşimler ile boş, yükleniyor ve hata durumları için notlar. Başlamadan Önce Belirli bir tel kafes aracı gerekmez; kullanılabilir bir brief içerik ve durum bilgisini içermelidir.
Editoryal özet · incelenen kaynak 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Görsel Stilden Önce Yapıyı Belirleyin

Yerleşim bloklarını, içerik sözleşmelerini, duyarlı davranışı ve durum kapsamını birleştiren açıklamalı bir tel kafes yöntemi.

Kaynağa dayalı iş akışıÇalıştırma performans testi değildir

Çalışma Yaklaşımı

Wireframe Spec, renk ve görsel cilalamadan önce bir ekranın yapısal amacını tanımlar. İçerik bloklarını, yerleşimi, önceliği ve davranış notlarını kapsar; duyarlı farklılıklara ve veriye dayalı içeriğe de yer bırakır. Gerçek gezinme ve düğme etiketleri, yapının düşük çözünürlükte bile anlaşılır olmasına yardımcı olur.

Kaynak, kutuların ötesine geçerek başlık hiyerarşisini, metin uzunluğu beklentilerini, görsel oranlarını, zorunlu ve isteğe bağlı içeriği ve içerik kaynaklarını ister. Ayrıca boş, yükleniyor, dolu ve hata durumlarını da gerektirir; böylece tel kafes yalnızca ideal ekranla sınırlı kalmaz.

Beklenen Çıktılar

  • İçerik öncelikleriyle açıklamalı bir ekran yapısı.
  • Başlıkları, uzunlukları, görselleri ve kaynakları içeren içerik gereksinimleri.
  • Duyarlı yerleşimler ile boş, yükleniyor ve hata durumları için notlar.
Örnek Brief'e Bak

Brief'ten İncelemeye

  1. 01
    Detay Düzeyini ve Blokları Seçin

    Eskiz, düşük, orta veya açıklamalı detay düzeyini seçin ve ana içerik alanlarını belirleyin.

  2. 02
    İçeriği ve Davranışı Belirleyin

    Bloklara gerçek etiketler, öncelikler, veri kaynakları ve etkileşim notları verin.

  3. 03
    Varyantları Kapsayın

    Kırılma noktası değişikliklerini ve boş, yükleniyor, dolu ve hata sürümlerini açıklayın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Belirli bir tel kafes aracı gerekmez; kullanılabilir bir brief içerik ve durum bilgisini içermelidir.

Uygun Durumlar

  • Görsel Tasarımdan ÖnceYerleşim ve içerik kararlarında renk veya stil tartışmasına girmeden uzlaşmak gerektiğinde işe yarar.
  • Tasarım Devrine HazırlıkDinamik içerik ve etkileşimle ilgili gizli varsayımları erken aşamada görünür kılar.

Kontrol Edilecek Sınırlar

  • Nihai Görsel Sistem DeğildirKaynak, renk kararlarından bilinçli olarak kaçınır ve nötr tel kafes kurallarını kullanır.
  • Yalnızca Izgara Mekaniği DeğildirSütun ve oluk hesapları Layout Grid kapsamındadır; bu spesifikasyon içeriğe ve davranışa odaklanır.

Bu Girdileri Getirin

  • Ekranın AmacıGörevi ve onu tamamlamak için gereken içeriği belirtin.
  • İçerik KaynaklarıStatik metni, CMS alanlarını, API verilerini ve zorunlu veya isteğe bağlı blokları belirtin.
  • Durum ve Cihaz İhtiyaçlarıDuyarlı bağlamları ve boş, yükleniyor veya hata koşullarını listeleyin.

03 Önemli Kararlar

Önemli Kararlar

  1. Eksik Davranışı Açıklamalar Taşır

    Bir dikdörtgen, içeriğin güncellenip güncellenmediğini, bir panel açıp açmadığını veya bir API değerine bağlı olup olmadığını açıklayamaz.

  2. İçerik Kısıtları Erken Gelir

    Uzunluk ve en-boy oranı gereksinimleri, sonraki yerleşim kararlarının imkânsız içeriğe dayanmasını önleyebilir.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Deponun belgelenmiş kurulum yolunu kullanın ve atıfta bulunulan tüm yardımcı dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini anlatır.

Üst Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md

Belirli bir tel kafes aracı gerekmez; kullanılabilir bir brief içerik ve durum bilgisini içermelidir.

Tek Bir Çıktıyla Başlayın

Beceriyi çalıştırmadan önce bu brief'teki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brief
Aranabilir bir şablon kütüphanesi sayfası için wireframe-spec kullanın. Blok önceliğini, gerçek gezinme etiketlerini, arama ve filtre davranışını, başlık hiyerarşisini, kart görseli oranlarını ve içerik kaynaklarını belirtin. Görsel stili nötr tutarken mobil, boş, yükleniyor ve başarısız istek durumlarını da ekleyin.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Her önemli etkileşimin bir açıklaması var.
  • Gerekli içerik ve veri kaynakları belirtilmiş.
  • Spesifikasyon, yalnızca dolu bir masaüstü ekranından fazlasını içeriyor.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu liste, becerinin pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının sağlandığı anlamına gelmez.

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Üst kaynaktaki davranış ve gereksinimler değişebilir.

Kaynak Sahibi
Owl-Listener
Lisans
MIT
İncelenen Anlık Görüntü
2026-10-07 · 9a6930cf84a8
Editoryal Kaynak Özeti
Yerleşim bloklarını, içerik sözleşmelerini, duyarlı davranışı ve durum kapsamını birleştiren açıklamalı bir tel kafes yöntemi.

Bağlantısı verilen kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; beceri kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Cilalı bir mockup üretir mi?

Odağı açıklamalı yapıdır. Kaynak, nihai renk kararları yerine açıkça nötr tel kafes kurallarını kullanır.

Metin uzunlukları neden ekleniyor?

Yerleşim varsayımlarını görünür kılar ve görsel tasarımın değiştirilmesi pahalı hale gelmeden önce içerik planlamasına yardımcı olur.

Bir tel kafes dinamik içeriği anlatabilir mi?

Evet. Kaynak; dinamik içerik göstergelerini, kaynak türlerini ve birden fazla arayüz durumunu içerir.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brief'inizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce becerinin kendi kurulumunu kontrol edin.

Üst Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md