Zwei Tools, ein Skelett-UI-Workflow.
Ghost Wireframe Generator ist ein kostenloses Browser-Tool für Skeleton-UI und Ghost-Wireframes. Wählen Sie eine Layoutfamilie (Dashboard, Analysen, Kanban, CRM-Tabelle, Einstellungen), wählen Sie Single oder Combo (Desktop + Mobilgerät), passen Sie die Farbrollen im Happy Hues-Stil an und exportieren Sie dann PNG, SVG oder HTML mit --ghost-* CSS-Variablen. Alles bleibt in Ihrem Browser – nichts wird hochgeladen.
Der Ghost Wireframe Skill ist der tragbare Begleiter: Kopieren Sie eine kompakte Eingabeaufforderung oder laden Sie SKILL.md für Cursor, Claude, Codex, ChatGPT und andere KI-Codierungstools herunter. Nutzen Sie die Fähigkeit, Geister im Chat zu entwerfen, und öffnen Sie dann den Generator, wenn Sie eine Live-Vorschau und einen Dateiexport wünschen.
Wählen Sie ein Layout und dann Single oder Combo.
Öffnen Sie tinydesignshop.com/tools/ghost-wireframe-generator. Klicken Sie in der Bibliothek auf eine Layoutkarte. Verwenden Sie Theme für Light oder Dark und View für Single oder Combo.
Single zeigt jeweils ein Gerät an; Scrollen Sie durch die Bibliothek, um zwischen Desktop- und Mobilkarten zu wechseln. Combo zeigt Desktop- und Mobilgeräte nebeneinander auf einer Layoutkarte mit einer gemeinsamen Vorschauhöhe und Download both für PNGs.
Passen Sie Farbrollen an und exportieren Sie sie.
Wählen Sie eine Palettenvoreinstellung oder bearbeiten Sie einzelne Rollen (Hintergrund, Oberfläche, Akzent, gedämpfter Text und Freunde). Optionale generische Geräterahmen sorgen dafür, dass Screenshots als Produktchrom ohne Blenden mit Apple-Logo lesbar sind.
--ghost-* variables for templates and loading states.Exportpfade: Download PNG (oder Download both in Combo), Download SVG / Copy SVG und Copy HTML für Tiny Page Drops und Ladegerüste. Bei Exporten ist keine Quellenangabe erforderlich.
Als Fertigkeit in jedem KI-Codierungstool verwenden.
Vom Generator aus öffnet der schwarze CTA Get skill in voller Breite die Begleitseite. Oder gehen Sie direkt zu Ghost Wireframe Skill.
- Öffnen Sie die Skill-Seite und kopieren Sie die kompakte Eingabeaufforderung oder laden Sie
SKILL.mdherunter - Legen Sie den Skill in Ihrem Agenten-Skills-Ordner ab (Cursor, Claude, Codex usw.) oder fügen Sie die kompakte Eingabeaufforderung in einen beliebigen Chat ein
- Fragen Sie nach einem Ghost-Wireframe-Layout – Desktop, Mobilgerät oder Kombination – mit
--ghost-*-Rollen - Optional: Öffnen Sie den -Browsergenerator , um eine Vorschau von PNG/SVG/HTML anzuzeigen und zu exportieren
Browser-lokaler Generator, lokaler Skill.
Der Generator läuft vollständig in Ihrem Browser – Layouts, Paletten und Exporte verlassen nie Ihr Gerät. Der Skill ist eine Markdown-Datei, die Sie in Ihrer eigenen KI-Tool-Sitzung ausführen. Tiny Design Shop lädt Ihre Wireframes nicht hoch.