Vibe UI ist ein AI-Coding-Agent-Skill, der die nahtlose Anwendung von Design-Richtlinien, Seitengenerierung und automatisierte Stilkonsistenzprüfungen für Web-Schnittstellen ermöglicht.
Installieren & Herunterladen
1. ClawHub CLI
Der schnellste Weg, einen Skill direkt aus der Registry zu installieren.
npx clawhub@latest install vibe-ui
2. Manuelle Installation
Kopiere den Skill-Ordner an einen dieser Orte
~/.openclaw/skills/ <project>/skills/ Priorität: Workspace > Lokal > Integriert (Bundled)
3. Prompt-Installation
Kopiere diesen Prompt in OpenClaw, um ihn automatisch zu installieren.
Hilf mir, vibe-ui über Clawhub zu installieren. Falls Clawhub nicht installiert ist, installiere es bitte zuerst (npm i -g clawhub).
Lieber herunterladen?
Hole dir die rohen Skill-Dateien in einem ZIP-Archiv.
Was ist Vibe UI?
Vibe UI dient als umfassendes DESIGN.md-Workflow-Dienstprogramm, das für die Erstellung von Web-UIs entwickelt wurde. Dieses Tool läuft unter dem Openclaw Skills-Framework und ermöglicht es Softwareentwicklern und AI-Coding-Agenten, visuelle Designs zu erstellen, zu verwalten und anhand kuratierter Branchen-Benchmarks oder offener Design-Paradigmen zu überprüfen. Es verhindert gängige von AI generierte Design-Fallstricke und stellt sicher, dass Produktionsanwendungen bewusste, kohärente und professionelle ästhetische Entscheidungen aufweisen.
Im Kern verfügt das Dienstprogramm über die Vibe Gate 2.0-Ausführungsschleife. Dieses Standard-Betriebssystem interpretiert Projektbriefings, legt geeignete ästhetische Stile oder Rezepte fest, erzwingt implizite Design-Einschränkungen während der Codegenerierung und führt strenge Überprüfungen nach der Implementierung durch. Durch die Arbeit mit einer Designbibliothek mit hochgradig vertrauenswürdigen, integrierten Stilen und umfangreichen Upstream-Vorlagen werden die Entwicklungszyklen bewusster und bewegen sich weg von generischen LLM-Design-Standards hin zu strukturierten, markensicheren Benutzeroberflächen.
Vibe UI Anwendungsfälle
- Auswählen und Anwenden strukturierter DESIGN.md visueller Stile auf neue oder bestehende Webprojekte.
- Erstellen von produktionsreifen Frontend-Layouts unter Verwendung kuratierter, offline-fähiger Seitenvorlagen-Rezepte.
- Validieren von Frontend-Codebasen gegen voreingestellte Design-Einschränkungen, um die Integrität von Typografie, Farbe und Abständen zu wahren.
- Auflösen generischer UI-Muster durch AI-gestützte Design-Kritiken und automatisierte Polishing-Workflows.
- Extrahieren von Stilrichtlinien aus aktiven URLs, rohem HTML, Figma-Notizen oder Benutzer-Screenshots.
So funktioniert Vibe UI
- Briefing-Interpretation: Der Agent liest die Projektanforderungen des Benutzers, um Käuferängste, den Kontext der Zielgruppe und Sektionsstrategien zu ermitteln, und protokolliert die Konfigurationsdetails in lokalisierten Projektdateien.
- Stilauswahl: Das System empfiehlt oder verwendet ein bestimmtes Design-Token-Set aus einer Registrierung kuratierter integrierter Stile oder breiterer Bibliotheken für offene Design-Systeme.
- Preflight-Vertrag: Das Tool führt Strukturprüfungen durch, um invariante Parameter zu definieren und Watchlists für Anti-Pattern zu erstellen, bevor eine Implementierung beginnt.
- Vorbereitung der Ausführungskette: Ein zielgerichtetes Workflow-Layout wird für den spezifischen Seitentyp abgebildet, wodurch Vorlagenstrukturen vorbereitet werden, die verborgene Design-Richtlinien enthalten.
- Komponentengenerierung: Der Code wird unter Verwendung von Vorlagenquellen mit Namensräumen erstellt, während die festgelegte Farbpalette, der räumliche Layout-Rhythmus und die Komponenten-Einschränkungen eingehalten werden.
- Audit nach der Implementierung: Das System überprüft die generierten Verzeichnisse, erstellt einen umfassenden Design-Compliance-Bericht, bietet konstruktive Kritik und gibt Reparatur-Prompts aus, um die fertige UI aufzupolieren.
Vibe UI Einrichtung
Prerequisites
Ensure that the core Openclaw Skills environment is configured in your project space. Navigating to the skill directory or using absolute execution paths is required for the scripts to operate successfully.
Installation & Initialization
Execute commands natively from the skills\/vibe-ui directory, or interface with the engine globally using the Node runtime:
# List all available built-in and open-source designs
node scripts\/design.mjs list --source all
# Initialize and read a project brief to establish context
node scripts\/design.mjs read "Build a high-converting developer analytics dashboard" --page dashboard
# Lock down a specific visual style for the project workspace
node scripts\/design.mjs use linear
Vibe UI Datenschema & Taxonomie
Vibe UI protokolliert und liest Konfigurations-Fußabdrücke in einem lokalisierten strukturellen Verzeichnis (.vibe-ui\/). Es kategorisiert Daten anhand der folgenden Dateitaxonomie:
| Directory / File Location | Format | Purpose / Metadata Description |
|---|---|---|
.vibe-ui\/brief-read.json |
JSON | Erfasst Zielgruppen-Persona, Register-Ton, Regler, Beweisstrategie und strukturelle Layout-Abschnitte. |
.vibe-ui\/product-context.json |
JSON | Enthält spezifische projektbezogene Zielsetzungen, Hinweise zur Minderung von Verbraucherängsten und Design-Vektoren. |
.vibe-ui\/current-design.json |
JSON | Verfolgt die aktiv erzwungenen design_id-Konfigurationen zusammen mit aktiven Themenregeln. |
.vibe-ui\/vibe-gate-contract.json |
JSON | Enthält Preflight-Regeln, Design-Invarianten und die durch Briefing-Prüfungen generierte Anti-Pattern-Watchlist. |
DESIGN.md / DESIGN.generated.md |
Markdown | Dient als explizite Design-Token-Source-of-Truth für Abstände, Radius, Schriftarten und dunkle/helle Farbmodelle. |
DESIGN-REPORT.md |
Markdown | Ausgabebericht mit statischen Verifizierungsergebnissen, strukturellen Drift-Warnungen und Stil-Compliance-Scores. |
Vibe UI Erweiterte Funktionen
- Vibe Gate 2.0-Ausführungsschleife: Gewährleistet eine tiefe Design-Konsistenz, indem Einschränkungen vor der Generierung gesperrt und strenge automatisierte Überprüfungsleitplanken nach der Generierung durchgesetzt werden.
- Stil-Remixing-Engines: Ermöglicht Entwicklern, unterschiedliche strukturelle Attribute von zwei separaten Design-Systemen durch automatisierte Blending-Algorithmen zu kombinieren.
- Asset-Invariante-Leitplanken: Schützt Workflows, indem das illegale Kopieren von Marken blockiert und interne Scaffolding-Logik aus produktionsreifen Assets entfernt wird.
- Offline-Full-Bibliotheksverpackung: Bietet eine Zero-Latency-Indizierung von über 150 Upstream-Design-Systemen und 111 architektonischen Layout-Vorlagen vollständig offline.
- Automatisierte Umkehrung der Entwicklung (Reverse-Engineering): Verfügt über dedizierte Extraktionsmechanismen, die in der Lage sind, Screenshots, rohe HTML-Strings und Live-Webziele direkt in verwendbare DESIGN.md-Dateien umzuwandeln.
SKILL.md
Laden
Verwandte Openclaw-Skills
Skill Creator
Eine Meta-Kompetenz (meta-skill), die entwickelt wurde, um den gesamten Lebenszyklus der Erstellung, des Testens, des Benchmarkings und der Optimierung maßgeschneiderter Fähigkeiten für KI-Codierungsagenten (AI coding agents) zu orchestrieren.
PPT Generator
Ein automatisiertes, layoutgesteuertes Tool, das entwickelt wurde, um direkt aus natürlichsprachlichen Eingabeaufforderungen eigenständige, schön formatierte HTML-Folien und editierbare PPTX-Präsentationen zu erstellen.
Ultimate Domain Payload
Ultimate Domain Payload bietet eine umfassende Meta-Domänen-Struktur-Payload, die systemische Grenzen über 12 Schlüssel-Lebensbereiche hinweg eliminiert und eine nahtlose domänenübergreifende Workflow-Orchestrierung über das Universal Task OS ermöglicht.
StatementEdge
Ein sicheres, EU-gehostetes Dienstprogramm, das PDF-Kontoauszüge automatisch in strukturierte CSV-, Excel-, QuickBooks- und OFX-Dateien umwandelt.
rapprochement-paiements
Ein Assistent für Bankabgleich und Zahlungsnachverfolgung, der Transaktionen mit Rechnungen abgleicht und strukturierte Daten für das Frontend generiert.
identification-client
Eine intelligente Kundenerkennungs-Skill, die analysierte Buchhaltungsdokumente automatisch dem richtigen Kundenprofil zuordnet und die Transaktionsrichtung bestimmt.
classement-document
Ein automatisierter Skill zur Ablage von Buchhaltungsbelegen, der Finanzdaten organisiert, umbenennt und dedupliziert – ganz ohne Entscheidungsaufwand.
Hervorgehoben*
