Wireframe Specpar Owl-Listener

Wireframe Spec Skill.

Rendre un écran basse fidélité assez précis pour discuter du comportement et du contenu.

Prototypage
Wireframes

Télécharger OpenDesign Voir le guide d’utilisation

Revue de la source · Wireframe SpecSKILL.md

Tâche Prototypage Produit • Une structure d’écran annotée avec des priorités de contenu. • Des exigences de contenu : titres, longueurs, images et sources. • Des notes pour les mises en page responsives et pour les états vide, de chargement et d’erreur. Avant de commencer Aucun outil de wireframing particulier n’est requis ; un brief exploitable doit inclure des informations sur le contenu et les états.

Résumé éditorial · source consultée 2026-10-07 · exemple non généré

01 Fonctionnement

Spécifier la structure avant le style visuel

Une méthode de wireframe annoté combinant blocs de mise en page, contrats de contenu, comportement responsive et couverture des états.

Workflow fondé sur la sourcePas un benchmark d’exécution

L’approche de travail

Wireframe Spec définit l’intention structurelle d’un écran avant la couleur et la finition visuelle. Il couvre les blocs de contenu, leur placement, leur priorité et les annotations de comportement, avec de la place pour les différences responsives et le contenu piloté par les données. De vrais libellés de navigation et de boutons aident à rendre la structure compréhensible, même en basse fidélité.

La source va au-delà des rectangles : elle demande une hiérarchie de titres, des attentes de longueur de texte, des proportions d’image, la distinction entre éléments requis et facultatifs, et les sources du contenu. Elle appelle aussi à couvrir les états vide, de chargement, renseigné et d’erreur, afin que le wireframe ne se limite pas à l’écran idéal.

Livrables attendus

Une structure d’écran annotée avec des priorités de contenu.
Des exigences de contenu : titres, longueurs, images et sources.
Des notes pour les mises en page responsives et pour les états vide, de chargement et d’erreur.

Voir le brief d’exemple

Du brief à la revue

01
Choisir la fidélité et les blocs
Sélectionnez une fidélité de croquis, basse, moyenne ou annotée, et définissez les grandes zones de contenu.
02
Spécifier le contenu et le comportement
Donnez aux blocs de vrais libellés, des priorités, des sources de données et des annotations d’interaction.
03
Couvrir les variantes
Décrivez les changements aux points de rupture ainsi que les versions vide, de chargement, renseignée et d’erreur.

02 Cas d’usage

Quand l’utiliser

Aucun outil de wireframing particulier n’est requis ; un brief exploitable doit inclure des informations sur le contenu et les états.

Un bon choix

Avant la conception visuelleUtile quand il faut s’accorder sur la mise en page et le contenu sans débat sur la couleur ou le style.
Préparation de la transmission du designRend visibles très tôt les hypothèses implicites sur le contenu dynamique et l’interaction.

Limites à vérifier

Pas un système visuel finalLa source évite délibérément les choix de couleur et utilise des conventions de wireframe neutres.
Pas seulement la mécanique de grilleLe calcul des colonnes et des gouttières relève de Layout Grid ; cette spécification se concentre sur le contenu et le comportement.

Éléments à fournir

Objectif de l’écranIndiquez la tâche et le contenu nécessaire pour l’accomplir.
Sources de contenuIdentifiez le texte statique, les champs du CMS, les données API et les blocs requis ou facultatifs.
Besoins d’états et d’appareilsListez les contextes responsives et les situations de vide, de chargement ou d’échec.

03 Décisions importantes

Décisions qui comptent

Les annotations portent le comportement manquant
Un rectangle ne peut pas expliquer si un contenu se met à jour, ouvre un panneau ou dépend d’une API.
Les contraintes de contenu arrivent tôt
Les exigences de longueur et de proportions peuvent éviter que les décisions de mise en page ultérieures reposent sur un contenu impossible.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez la méthode d’installation documentée du dépôt et conservez les fichiers complémentaires référencés. Cette entrée décrit une méthode de conception ciblée, et non une application exécutable.

Fichier source amont

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

Aucun outil de wireframing particulier n’est requis ; un brief exploitable doit inclure des informations sur le contenu et les états.

Commencer par un seul livrable

Adaptez la portée, les sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple

Utilisez wireframe-spec pour une page de bibliothèque de modèles avec recherche. Précisez la priorité des blocs, de vrais libellés de navigation, le comportement de la recherche et des filtres, la hiérarchie des titres, les proportions des images de cartes et les sources de contenu. Incluez les états mobile, vide, de chargement et de requête échouée, tout en gardant un style visuel neutre.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Chaque interaction importante a une annotation.
Le contenu requis et les sources de données sont identifiés.
La spécification ne se limite pas à un écran de bureau renseigné.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette entrée ne signifie pas que le skill est fourni avec le produit, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source épinglée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: Owl-Listener
Dépôt: Owl-Listener/designer-skills
Fichier du skill: prototyping-testing/skills/wireframe-spec/SKILL.md
Licence: MIT
Instantané consulté: 2026-10-07 · 9a6930cf84a8

Résumé éditorial de la source

Une méthode de wireframe annoté combinant blocs de mise en page, contrats de contenu, comportement responsive et couverture des états.

Résumé original par OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Produit-il une maquette soignée ?

Il se concentre sur la structure annotée. La source utilise explicitement des conventions de wireframe neutres plutôt que des choix de couleur définitifs.

Pourquoi inclure des longueurs de texte ?

Elles révèlent les hypothèses de mise en page et aident à planifier le contenu avant que le design visuel devienne coûteux à modifier.

Un wireframe peut-il décrire du contenu dynamique ?

Oui. La source inclut des indicateurs de contenu dynamique, des types de sources et plusieurs états d’interface.

OpenDesign

Préparez la place de la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design réunis dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design