102.3K+Scarica
Vai alla guida all’uso
Wireframe Specdi Owl-Listener

Wireframe Spec Skill.

Rendi una schermata a bassa fedeltà abbastanza precisa da poter discutere di comportamento e contenuti.

  • Prototipazione
  • Wireframe
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Wireframe SpecSKILL.md
Attività Prototipazione Produce • Una struttura di schermata annotata con le priorità dei contenuti. • Requisiti di contenuto che includono titoli, lunghezze, immagini e fonti. • Note per i layout responsive e per gli stati vuoto, di caricamento ed errore. Prima di iniziare Non è richiesto alcuno strumento di wireframing specifico; un brief utilizzabile deve includere informazioni su contenuti e stati.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Specifica la struttura prima dello stile visivo

Un metodo di wireframe annotati che combina blocchi di layout, contratti di contenuto, comportamento responsive e copertura degli stati.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Wireframe Spec definisce l'intento strutturale di una schermata prima del colore e della rifinitura visiva. Copre blocchi di contenuto, posizionamento, priorità e annotazioni di comportamento, con spazio per differenze responsive e contenuti basati su dati. Etichette reali di navigazione e pulsanti aiutano a rendere comprensibile la struttura anche a bassa fedeltà.

La fonte va oltre i riquadri: richiede gerarchia dei titoli, lunghezze attese dei testi, proporzioni delle immagini, materiale obbligatorio o facoltativo e fonti dei contenuti. Richiede inoltre gli stati vuoto, di caricamento, popolato ed errore, così il wireframe non si limita alla schermata ideale.

Risultati attesi

  • Una struttura di schermata annotata con le priorità dei contenuti.
  • Requisiti di contenuto che includono titoli, lunghezze, immagini e fonti.
  • Note per i layout responsive e per gli stati vuoto, di caricamento ed errore.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Scegli fedeltà e blocchi

    Seleziona la fedeltà tra schizzo, bassa, media o annotata e definisci le principali aree di contenuto.

  2. 02
    Specifica contenuti e comportamento

    Assegna ai blocchi etichette reali, priorità, fonti dei dati e annotazioni di interazione.

  3. 03
    Copri le varianti

    Descrivi i cambiamenti ai breakpoint e le versioni vuota, di caricamento, popolata ed errore.

02 Quando usarlo

Quando usarla

Non è richiesto alcuno strumento di wireframing specifico; un brief utilizzabile deve includere informazioni su contenuti e stati.

Adatta quando

  • Prima del design visivoUtile quando servono decisioni condivise su layout e contenuti senza dibattiti su colore o stile.
  • Preparazione al passaggio di consegne del designRende subito visibili le ipotesi nascoste su contenuti dinamici e interazioni.

Limiti da verificare

  • Non è un sistema visivo finaleLa fonte evita deliberatamente decisioni sul colore e usa convenzioni neutre per i wireframe.
  • Non solo meccanica della grigliaLa matematica di colonne e gutter spetta a Layout Grid; questa specifica si concentra su contenuti e comportamento.

Cosa portare

  • Scopo della schermataIndica l'attività da svolgere e i contenuti necessari per completarla.
  • Fonti dei contenutiIdentifica testi statici, campi CMS, dati API e blocchi obbligatori o facoltativi.
  • Esigenze di stati e dispositiviElenca i contesti responsive e le condizioni di vuoto, caricamento o errore.

03 Decisioni importanti

Decisioni importanti

  1. Le annotazioni portano il comportamento mancante

    Un rettangolo non spiega se il contenuto si aggiorna, apre un pannello o dipende da un'API.

  2. I vincoli sui contenuti arrivano presto

    I requisiti di lunghezza e proporzioni possono evitare che le decisioni di layout successive si basino su contenuti impossibili.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Usa la procedura di installazione documentata nel repository e conserva eventuali file complementari indicati. Questa scheda descrive un metodo di design mirato, non un'applicazione eseguibile.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md

Non è richiesto alcuno strumento di wireframing specifico; un brief utilizzabile deve includere informazioni su contenuti e stati.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa wireframe-spec per una pagina di libreria di template ricercabile. Specifica priorità dei blocchi, etichette reali di navigazione, comportamento di ricerca e filtri, gerarchia dei titoli, proporzioni delle immagini delle card e fonti dei contenuti. Includi gli stati per mobile, vuoto, caricamento e richiesta non riuscita, mantenendo neutro lo stile visivo.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Ogni interazione importante ha un'annotazione.
  • Sono identificati i contenuti richiesti e le fonti dei dati.
  • La specifica include più della sola schermata desktop popolata.

OpenDesign offre un workspace di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa o che strumenti esterni, credenziali e dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata, collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Titolare della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
prototyping-testing/skills/wireframe-spec/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Un metodo di wireframe annotati che combina blocchi di layout, contratti di contenuto, comportamento responsive e copertura degli stati.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Produce un mockup rifinito?

Si concentra sulla struttura annotata. La fonte usa esplicitamente convenzioni neutre per i wireframe anziché decisioni finali sul colore.

Perché includere le lunghezze dei testi?

Rivelano le ipotesi di layout e aiutano a pianificare i contenuti prima che modificare il design visivo diventi costoso.

Un wireframe può descrivere contenuti dinamici?

Sì. La fonte include indicatori di contenuto dinamico, tipi di fonte e più stati dell'interfaccia.

OpenDesign

Fai spazio alla prossima iterazione del design.

Tieni insieme brief, materiale di partenza e lavoro di design in un workspace locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md