Wireframe Specvon Owl-Listener

Wireframe Spec Skill.

Machen Sie einen Low-Fidelity-Screen so präzise, dass sich Verhalten und Inhalte besprechen lassen.

Prototyping
Wireframes

OpenDesign herunterladen Anleitung ansehen

Quellenprüfung · Wireframe SpecSKILL.md

Aufgabe Prototyping Ergebnis • Eine annotierte Screen-Struktur mit Inhaltsprioritäten. • Inhaltsanforderungen einschließlich Überschriften, Längen, Bildern und Quellen. • Hinweise zu responsiven Layouts sowie zu leeren, ladenden und fehlerhaften Zuständen. Bevor Sie beginnen Ein bestimmtes Wireframing-Tool ist nicht erforderlich; ein brauchbares Briefing muss Informationen zu Inhalten und Zuständen enthalten.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Struktur festlegen, bevor das visuelle Styling beginnt

Eine Methode für annotierte Wireframes, die Layoutblöcke, Inhaltsvorgaben, responsives Verhalten und die Abdeckung von Zuständen verbindet.

Auf der Quelle basierender WorkflowKein Benchmark zur Ausführung

Die Arbeitsweise

Wireframe Spec definiert die strukturelle Absicht eines Screens, bevor Farben und visueller Feinschliff folgen. Es umfasst Inhaltsblöcke, Platzierung, Priorität und Verhaltensannotationen und lässt Raum für responsive Unterschiede und datengetriebene Inhalte. Echte Navigations- und Button-Beschriftungen machen die Struktur auch bei geringer Detailtiefe verständlich.

Die Quelle geht über Kästchen hinaus: Sie verlangt Überschriftenhierarchie, Erwartungen an Textlängen, Bildproportionen, Pflicht- und optionale Inhalte sowie Inhaltsquellen. Außerdem fordert sie leere, ladende, befüllte und fehlerhafte Zustände, damit das Wireframe nicht auf den Idealscreen beschränkt bleibt.

Erwartete Ergebnisse

Eine annotierte Screen-Struktur mit Inhaltsprioritäten.
Inhaltsanforderungen einschließlich Überschriften, Längen, Bildern und Quellen.
Hinweise zu responsiven Layouts sowie zu leeren, ladenden und fehlerhaften Zuständen.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Detailgrad und Blöcke wählen
Wählen Sie Skizze, niedrige, mittlere oder annotierte Detailtiefe und legen Sie die wichtigsten Inhaltsbereiche fest.
02
Inhalt und Verhalten spezifizieren
Versehen Sie Blöcke mit echten Beschriftungen, Prioritäten, Datenquellen und Interaktionsannotationen.
03
Varianten abdecken
Beschreiben Sie Änderungen an Breakpoints sowie die Versionen für leere, ladende, befüllte und fehlerhafte Zustände.

02 Einsatzbereiche

Wann es sich eignet

Ein bestimmtes Wireframing-Tool ist nicht erforderlich; ein brauchbares Briefing muss Informationen zu Inhalten und Zuständen enthalten.

Gut geeignet

Vor dem visuellen DesignNützlich, wenn Layout- und Inhaltsentscheidungen abgestimmt werden müssen, ohne über Farbe oder Styling zu diskutieren.
Vorbereitung der Design-ÜbergabeMacht versteckte Annahmen zu dynamischen Inhalten und Interaktionen frühzeitig sichtbar.

Zu prüfende Grenzen

Kein finales visuelles SystemDie Quelle vermeidet bewusst Farbentscheidungen und verwendet neutrale Wireframe-Konventionen.
Nicht nur Raster-MechanikSpalten- und Gutter-Berechnungen gehören zu Layout Grid; diese Spezifikation konzentriert sich auf Inhalt und Verhalten.

Diese Eingaben mitbringen

Zweck des ScreensBeschreiben Sie die Aufgabe und die Inhalte, die zu ihrer Erledigung nötig sind.
InhaltsquellenGeben Sie statische Texte, CMS-Felder, API-Daten sowie erforderliche oder optionale Blöcke an.
Anforderungen an Zustände und GeräteListen Sie responsive Kontexte und leere, ladende oder fehlerhafte Zustände auf.

03 Wichtige Entscheidungen

Entscheidende Punkte

Annotationen tragen das fehlende Verhalten
Ein Rechteck kann nicht erklären, ob sich Inhalte aktualisieren, ein Panel öffnen oder von einer API abhängen.
Inhaltsvorgaben früh festlegen
Vorgaben zu Länge und Seitenverhältnis können verhindern, dass spätere Layoutentscheidungen auf unmöglichen Inhalten beruhen.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Nutzen Sie den dokumentierten Installationsweg des Repositorys und behalten Sie alle referenzierten Begleitdateien bei. Dieser Eintrag beschreibt eine fokussierte Designmethode, keine ausführbare Anwendung.

Upstream-Quelldatei

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

Ein bestimmtes Wireframing-Tool ist nicht erforderlich; ein brauchbares Briefing muss Informationen zu Inhalten und Zuständen enthalten.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Verwenden Sie wireframe-spec für eine durchsuchbare Seite mit einer Vorlagenbibliothek. Legen Sie Blockprioritäten, echte Navigationsbeschriftungen, Such- und Filterverhalten, Überschriftenhierarchie, Bildproportionen der Karten und Inhaltsquellen fest. Berücksichtigen Sie mobile Ansicht sowie leere, ladende und fehlgeschlagene Anfragezustände und halten Sie das visuelle Styling neutral.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jede wichtige Interaktion hat eine Annotation.
Erforderliche Inhalte und Datenquellen sind benannt.
Die Spezifikation umfasst mehr als einen befüllten Desktop-Screen.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agents. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: prototyping-testing/skills/wireframe-spec/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Zusammenfassung der Quelle

Eine Methode für annotierte Wireframes, die Layoutblöcke, Inhaltsvorgaben, responsives Verhalten und die Abdeckung von Zuständen verbindet.

Eigene Zusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Entsteht dabei ein ausgearbeitetes Mockup?

Der Schwerpunkt liegt auf annotierter Struktur. Die Quelle verwendet ausdrücklich neutrale Wireframe-Konventionen statt finaler Farbentscheidungen.

Warum Textlängen angeben?

Sie machen Layoutannahmen sichtbar und helfen bei der Inhaltsplanung, bevor Änderungen am visuellen Design teuer werden.

Kann ein Wireframe dynamische Inhalte beschreiben?

Ja. Die Quelle enthält Kennzeichnungen für dynamische Inhalte, Quellentypen und mehrere UI-Zustände.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen