# HTML-Mockup-Skizzierer > Generieren Sie 2-3 interaktive HTML-Mockup-Varianten, um UI/UX-Designrichtungen zu vergleichen, bevor Sie sich auf einen einzigen Ansatz festlegen. Erkunden Sie schnell verschiedene visuelle Haltungen und sammeln Sie Feedback. - Canonical: https://nanoskill.ai/de/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/de/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: de - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About Der HTML-Mockup-Skizzierer ist eine leistungsstarke Fähigkeit, die Benutzern hilft, schnell UI/UX-Designrichtungen anhand von wegwerfbaren HTML-Mockups zu erkunden und zu vergleichen. Anstatt sich auf ein einziges Design festzulegen, generiert dieses Tool 2-3 interaktive Varianten, die einen direkten Vergleich verschiedener visueller Haltungen ermöglichen. Es ist ideal für die Design-Erkundung in der Frühphase und hilft Ihnen, Konzepte zu visualisieren und Feedback zu sammeln, bevor Sie erheblich in die Entwicklung investieren. Diese Fähigkeit konzentriert sich auf die Erstellung funktionaler, interaktiver HTML-Mockups, die über statische Bilder hinausgehen. Jede Variante ist eine eigenständige HTML-Datei mit Inline-CSS, Systemschriftarten und realistischen Inhalten. Entscheidend ist, dass die Mockups grundlegende Interaktivität wie anklickbare Links, Hover-Zustände und mindestens einen Zustandsübergang enthalten, was ein greifbareres Gefühl für die Benutzererfahrung vermittelt. Integrierte Browser-Tools ermöglichen eine visuelle Überprüfung, sodass die Mockups sauber und fehlerfrei sind. Um eine fundierte Entscheidungsfindung zu erleichtern, bietet der HTML-Mockup-Skizzierer einen strukturierten Vergleich. Jede Variante wird mit einer detaillierten \`README.md\` geliefert, die ihre Entwurfsprinzipien, wichtigsten Entscheidungen, Kompromisse und am besten geeigneten Anwendungsfälle darlegt. Nach der Generierung fasst eine Vergleichstabelle die Unterschiede in verschiedenen Designdimensionen zusammen, begleitet von einer meinungsstarken Analyse, die Ihnen hilft, einen Gewinner auszuwählen, Elemente zu kombinieren oder weiter zu iterieren. ## Key features - **Mehrere Designvarianten generieren**: Erzeugen Sie gleichzeitig 2-3 verschiedene HTML-Mockup-Varianten, die jeweils einen anderen Designansatz (z. B. Dichte, Schwerpunkt, Ästhetik, Layout) für einen direkten Vergleich erkunden. - **Interaktive HTML-Mockups**: Erstellen Sie eigenständige HTML-Dateien mit Inline-CSS, Systemschriftarten und realistischen Platzhalterinhalten. Die Mockups sind interaktiv und ermöglichen anklickbare Links, Hover-Effekte und mindestens einen Zustandswechsel. - **Visuelle Überprüfung mit Browser-Tools**: Nutzen Sie integrierte Browser-Navigation und Vision-Tools, um jedes HTML-Mockup visuell zu überprüfen und zu verifizieren, und stellen Sie sicher, dass die Layouts sauber, lesbar und fehlerfrei sind, bevor Sie sie präsentieren. - **Strukturierte Variantendokumentation**: Jede HTML-Mockup-Variante enthält eine \`README.md\`, die ihren Designansatz, die wichtigsten Entscheidungen (Layout, Typografie, Farbe, Interaktion), Kompromisse und ideale Anwendungsfälle beschreibt, um einen fundierten Vergleich zu erleichtern. - **Vergleichende Analysetabelle**: Präsentieren Sie alle generierten HTML-Mockup-Varianten in einer Vergleichstabelle und heben Sie Unterschiede in Schlüsseldimensionen wie Dichte, Sichtbarkeit der primären Aktion, Scanbarkeit und allgemeines Gefühl hervor, zusammen mit einer meinungsbasierten Zusammenfassung. ## Use cases - **UI/UX-Designrichtungen erkunden**: Generieren und vergleichen Sie schnell mehrere HTML-Mockup-Varianten, um verschiedene Ideen für Benutzeroberflächen- und Benutzererfahrungsdesigns zu erkunden, bevor Sie erhebliche Entwicklungszeit investieren. - **Feedback zu visuellen Konzepten einholen**: Präsentieren Sie interaktive HTML-Mockups Stakeholdern oder Benutzern, um frühzeitig Feedback zu verschiedenen visuellen Richtungen einzuholen, um Konzepte zu verfeinern und fundierte Designentscheidungen zu treffen. - **Schnelles Prototyping für neue Funktionen**: Erstellen Sie wegwerfbare HTML-Mockups, um schnell neue Funktionen oder Bildschirme zu prototypisieren, wobei der Schwerpunkt auf Kernfunktionalität und visuellem Ablauf liegt, nicht auf produktionsreifem Code. ## Result preview Sehen Sie echte HTMLs über Boutique-Hotel-Websites, die von dieser Agentenfähigkeit generiert wurden. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Schritt 1：Installieren Fügen Sie die Fähigkeit zu Ihrem Agenten hinzu. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Schritt 2：Beschreiben Sie Ihre Website Erläutern Sie die detaillierten Informationen (z. B. Stil, Typ) der Website, die Sie erstellen möchten. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Schritt 3：Ergebnis überprüfen Überprüfen und vergleichen Sie die generierten HTML-Mockups. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Skizze Verwenden Sie diese Fähigkeit, wenn der Benutzer **eine Designrichtung sehen möchte, bevor er sich festlegt** – eine UI/UX-Idee als Einweg-HTML-Mockups erkunden. Der Zweck ist, 2-3 interaktive Varianten zu generieren, damit der Benutzer visuelle Richtungen nebeneinander vergleichen kann, nicht um lieferbaren Code zu produzieren. Laden Sie diese Fähigkeit, wenn der Benutzer Dinge sagt wie „skizziere diesen Bildschirm“, „zeig mir, wie X aussehen könnte“, „vergleiche Layout A mit B“, „gib mir 2-3 Varianten dieser UI“, „lass mich ein paar Varianten sehen“, „mockup dies, bevor ich baue“. ## Wann diese Fähigkeit NICHT verwendet werden sollte - Benutzer möchte eine Produktionskomponente — verwenden Sie `claude-design` oder bauen Sie es ordnungsgemäß - Benutzer möchte ein ausgefeiltes Einweg-HTML-Artefakt (Landing Page, Präsentation) — `claude-design` - Benutzer möchte ein Diagramm — `excalidraw`, `architecture-diagram` - Das Design ist bereits festgelegt — einfach bauen ## Wenn der Benutzer das vollständige GSD-System installiert hat Wenn `gsd-sketch` als eine Schwester-Fähigkeit erscheint (installiert über `npx get-shit-done-cc --hermes`), bevorzugen Sie **`gsd-sketch`** für den vollständigen Workflow: persistentes `.planning/sketches/` mit MANIFEST, Frontier-Modus-Analyse, Konsistenzprüfungen über vergangene Skizzen hinweg und Integration mit dem Rest von GSD. Diese Fähigkeit ist die leichtgewichtige eigenständige Version — einmaliges Skizzieren ohne die Zustandsmaschinerie. ## Kernmethode ``` intake → variants → head-to-head → pick winner (or iterate) ``` ### 1. Aufnahme (überspringen, wenn der Benutzer bereits genug gegeben hat) Bevor Sie Varianten generieren, holen Sie drei Dinge ein — eine Frage nach der anderen, nicht alle auf einmal: 1. **Gefühl.** „Wie soll sich das anfühlen? Adjektive, Emotionen, eine Stimmung.“ — *„ruhig, editorisch, wie Linear“* sagt mehr als *„minimal“*. 2. **Referenzen.** „Welche Apps, Websites oder Produkte fangen das Gefühl ein, das du dir vorstellst?“ — echte Referenzen schlagen abstrakte Beschreibungen. 3. **Kernaktion.** „Was ist die wichtigste Sache, die ein Benutzer auf diesem Bildschirm tut?“ — die Varianten sollten dies alle gut bedienen; wenn nicht, sind sie nur Dekoration. Reflektieren Sie jede Antwort kurz vor der nächsten Frage. Wenn der Benutzer alle drei bereits im Voraus gegeben hat, springen Sie direkt zu den Varianten. ### 2. Varianten (2-3, niemals 1, selten 4+) Produzieren Sie **2-3 Varianten** auf einmal. Jede Variante ist eine vollständige, eigenständige HTML-Datei. Beschreiben Sie die Varianten nicht — bauen Sie sie. Der Zweck ist der Vergleich. Jede Variante sollte eine **andere Designhaltung** einnehmen, nicht unterschiedliche Pixelwerte. Drei gute Achsen für Varianten: - **Dichte:** kompakt / luftig / ultradicht (wählen Sie zwei gegensätzliche Pole) - **Schwerpunkt:** inhaltsorientiert / aktionsorientiert / werkzeugorientiert - **Ästhetik:** editorisch / nützlich / verspielt - **Layout:** einspaltig / Seitenleiste / geteilte Ansicht - **Fundierung:** kartenbasiert / reiner Inhalt / Dokumentenstil Wählen Sie eine Achse und ziehen Sie sie auseinander. Zwei Varianten, die sich nur in der Akzentfarbe unterscheiden, sind verschwendete Mühe — der Benutzer kann sie nicht unterscheiden. **Variantenbenennung:** beschreiben Sie die Haltung, nicht die Nummer. ``` sketches/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. Machen Sie sie zu echtem HTML Jede Variante ist eine **einzelne in sich geschlossene HTML-Datei**: - Inline ` ``` ### 4. Varianten-README Jede README.md der Variante beantwortet: ```markdown ## Variant: {stance name} ### Design stance One sentence on the principle driving this variant. ### Key choices - Layout: ... - Typography: ... - Color: ... - Interaction: ... ### Trade-offs - Strong at: ... - Weak at: ... ### Best for - The kind of user or use case this variant actually serves ``` ### 5. Kopf-an-Kopf Nachdem alle Varianten gebaut sind, präsentieren Sie sie als Vergleich. Nicht nur auflisten — **meinungsstark sein**: ```markdown ## Three takes on the home screen | Dimension | Calm editorial | Utilitarian dense | Playful split | |-----------|----------------|-------------------|---------------| | Density | Low | High | Medium | | Primary action visibility | Low | High | Medium | | Scan-ability | High | Medium | Low | | Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic | **My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither. ``` Lassen Sie den Benutzer einen Gewinner wählen, oder kombinieren Sie zwei zu einem Hybrid, oder fragen Sie nach einer weiteren Runde. ## Theming (wenn das Projekt eine visuelle Identität hat) Wenn der Benutzer ein bestehendes Theme hat (Farben, Schriften, Tokens), legen Sie gemeinsame Tokens in `sketches/themes/tokens.css` ab und importieren Sie sie mit `@import` in jede Variante. Halten Sie die Tokens minimal: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Übertokenisieren Sie eine Wegwerf-Skizze nicht — drei Farben und eine Schriftart sind normalerweise genug. ## Interaktivitätsgrad Eine Skizze ist interaktiv genug, wenn der Benutzer: 1. **Eine primäre Aktion anklicken** und etwas Sichtbares passiert (Zustandsänderung, Modal, Toast, Navigations-finö) 2. **Einen sinnvollen Zustandsübergang sehen** (eine Liste filtern, einen Modus umschalten, ein Panel öffnen/schließen) 3. **Über erkennbare Affordanzen hovern** (Schaltflächen, Zeilen, Tabs) Mehr als das ist Über-Engineering eines Wegwerfartikels. Weniger als das ist ein Screenshot. ## Frontier-Modus (Auswahl, was als nächstes skizziert werden soll) Wenn bereits Skizzen existieren und der Benutzer sagt: „Was soll ich als nächstes skizzieren?“: - **Konsistenzlücken** — zwei Gewinnervarianten aus verschiedenen Skizzen haben unabhängige Entscheidungen getroffen, die noch nicht zusammengeführt wurden - **Nicht skizzierte Bildschirme** — referenziert, aber nie erkundet - **Zustandsabdeckung** — der glückliche Pfad ist skizziert, aber nicht leer / laden / Fehler / 1000 Elemente - **Responsive Lücken** — bei einem Viewport validiert; hält es bei Mobilgeräten / Ultrabreit? - **Interaktionsmuster** — statische Layouts existieren; Übergänge, Ziehen, Scrollverhalten nicht Schlagen Sie 2-4 benannte Kandidaten vor. Lassen Sie den Benutzer wählen. ## Ausgabe - Erstellen Sie `sketches/` (oder `.planning/sketches/`, wenn der Benutzer GSD-Konventionen verwendet) im Repo-Stamm - Ein Unterverzeichnis pro Variante: `NNN-stance-name/index.html` + `README.md` - Sagen Sie dem Benutzer, wie er sie öffnen kann: `open sketches/001-calm-editorial/index.html` auf macOS, `xdg-open` auf Linux, `start` auf Windows - Halten Sie Varianten wegwerfbar — eine Skizze, bei der Sie das Bedürfnis verspürten, sie zu bewahren, sollte in echten Projektcode befördert werden, nicht als Asset kuratiert werden **Typische Werkzeugabfolge für eine Variante:** ``` terminal("mkdir -p sketches/001-calm-editorial") write_file("sketches/001-calm-editorial/index.html", "...") write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") browser_vision(question="How does this look? Any obvious layout issues?") ``` Wiederholen Sie dies für jede Variante und präsentieren Sie dann die Vergleichstabelle. ## Zuordnung Angepasst vom `/gsd-sketch`-Workflow des GSD (Erledige den Kram)-Projekts — MIT © 2025 Lex Christopherson ([gsd-build/erledige-den-kram](https://github.com/gsd-build/get-shit-done)). Das vollständige GSD-System liefert einen persistenten Skizzenzustand, Theme-/Variantenmusterreferenzen und Konsistenzprüfungs-Workflows; Installation mit `npx get-shit-done-cc --hermes --global`. ## FAQ ### Was ist ein HTML-Mockup? Ein HTML-Mockup ist eine wegwerfbare, interaktive Webseite, die mit HTML und grundlegendem Styling (häufig Inline-CSS) erstellt wird, um verschiedene UI-/UX-Designideen schnell zu visualisieren und zu vergleichen. Es ist nicht für die Produktion gedacht, sondern für die Erkundung von Designkonzepten in der Frühphase. ### Wie viele HTML-Mockup-Varianten generiert dieser Skill? Dieser Skill generiert in der Regel 2-3 interaktive HTML-Mockup-Varianten auf einmal. Ziel ist es, gegensätzliche Designansätze zum Vergleich bereitzustellen, nicht eine erschöpfende Liste kleiner Variationen. ### Kann ich diesen Skill verwenden, um produktionsreifen Code zu erstellen? Nein, dieser Skill ist speziell für 'Wegwerf'-HTML-Mockups zur Erkundung von Designrichtungen konzipiert. Für produktionsreife Komponenten oder ausgefeilte Artefakte sollten Sie andere Tools oder Skills wie \`claude-design\` verwenden. ### Welche Art von Interaktivität bieten die HTML-Mockups? Die generierten HTML-Mockups sind interaktiv, das heißt, Links sind anklickbar, Hover-Effekte sind echt, und es gibt mindestens einen Zustandswechsel (z. B. ein Panel öffnen/schließen, eine Liste filtern). Das ermöglicht ein realistischeres Gefühl als statische Bilder. ### Wie hilft mir dieser Skill, verschiedene Designs zu vergleichen? Nach der Generierung der HTML-Mockups stellt der Skill eine Vergleichstabelle bereit, die die wichtigsten Unterschiede in verschiedenen Designdimensionen hervorhebt (z. B. Dichte, Layout, Ästhetik). Außerdem bietet er eine meinungsbasierte Zusammenfassung, um Ihre Entscheidungsfindung zu leiten. ### Welche Informationen muss ich bereitstellen, um ein HTML-Mockup zu generieren? Um effektive HTML-Mockups zu generieren, werden Sie nach dem gewünschten 'Gefühl' (Adjektive, Vibe), nach Referenz-Apps/Websites, die dieses Gefühl einfangen, und nach der wichtigsten 'Kernaktion', die ein Benutzer auf dem Bildschirm ausführt, gefragt.