Due strumenti, un flusso di lavoro dell'interfaccia utente scheletrico.
Ghost Wireframe Generator è uno strumento browser gratuito per interfaccia utente ridotta e wireframe fantasma. Scegli una famiglia di layout (dashboard, analisi, kanban, tabella CRM, impostazioni), scegli Single o Combo (desktop + mobile), ottimizza i ruoli colore in stile Happy Hues, quindi esporta PNG, SVG o HTML con le variabili --ghost-* CSS. Tutto rimane nel tuo browser: nulla viene caricato.
Ghost Wireframe Skill è il compagno portatile: copia un prompt compatto o scarica SKILL.md per Cursor, Claude, Codex, ChatGPT e altri strumenti di codifica AI. Usa l'abilità per disegnare fantasmi in chat, quindi apri il generatore quando desideri un'anteprima dal vivo ed esportare il file.
Scegli un layout, quindi Single o Combo.
Apri tinydesignshop.com/tools/ghost-wireframe-generator. Nella libreria, fai clic su una scheda di layout. Utilizza Theme per Light o Dark e View per Single o Combo.
Single mostra un dispositivo alla volta; scorrere la libreria per passare dalle schede desktop a quelle mobili. Combo mostra desktop e dispositivi mobili fianco a fianco da un'unica scheda di layout, con un'altezza di anteprima condivisa e Download both per PNG.
Ottimizza i ruoli dei colori ed esporta.
Scegli una tavolozza predefinita o modifica i singoli ruoli (sfondo, superficie, accento, testo disattivato e amici). I frame generici opzionali del dispositivo aiutano a leggere gli screenshot come Chrome del prodotto senza cornici con marchio Apple.
--ghost-* variables for templates and loading states.Percorsi di esportazione: Download PNG (o Download both in Combo), Download SVG / Copy SVG e Copy HTML per Tiny Page Drop e scheletri di caricamento. Nessuna attribuzione richiesta sulle esportazioni.
Utilizzare come abilità in qualsiasi strumento di codifica AI.
Dal generatore, il CTA nero a tutta larghezza Get skill apre la pagina complementare. Oppure vai direttamente a Ghost Wireframe Skill.
- Apri la pagina delle abilità e copia il prompt compatto oppure scarica
SKILL.md - Trascina la competenza nella cartella delle competenze dell'agente (Cursor, Claude, Codex, ecc.) o incolla il messaggio compatto in qualsiasi chat
- Richiedi un layout wireframe fantasma (desktop, mobile o combinato) con ruoli
--ghost-* - Opzionale: aprire il generatore di browser per visualizzare in anteprima ed esportare PNG/SVG/HTML
Generatore locale del browser, competenza locale.
Il generatore funziona interamente nel tuo browser: layout, tavolozze ed esportazioni non lasciano mai il tuo dispositivo. L'abilità è un file di markdown che esegui nella tua sessione dello strumento AI. Tiny Design Shop non carica i tuoi wireframe.