Deux outils, un workflow d'interface utilisateur squelette.
Le Ghost Wireframe Generator est un outil de navigation gratuit pour l'interface utilisateur squelette et les wireframes fantômes. Choisissez une famille de mise en page (tableau de bord, analyses, kanban, tableau CRM, paramètres), choisissez Single ou Combo (ordinateur de bureau + mobile), ajustez les rôles de couleur de style Happy Hues, puis exportez PNG, SVG ou HTML avec les variables --ghost-* CSS. Tout reste dans votre navigateur — rien n'est téléchargé.
Le Ghost Wireframe Skill est le compagnon portable : copiez une invite compacte ou téléchargez SKILL.md pour Cursor, Claude, Codex, ChatGPT et d'autres outils de codage IA. Utilisez la compétence pour rédiger des fantômes dans le chat, puis ouvrez le générateur lorsque vous souhaitez un aperçu en direct et une exportation de fichiers.
Choisissez une mise en page, puis Single ou Combo.
Ouvrez tinydesignshop.com/tools/ghost-wireframe-generator. Dans la bibliothèque, cliquez sur une fiche de mise en page. Utilisez Theme pour Light ou Dark et View pour Single ou Combo.
Single affiche un appareil à la fois ; faites défiler la bibliothèque pour basculer entre les cartes de bureau et les cartes mobiles. Combo affiche côte à côte les ordinateurs de bureau et mobiles à partir d'une seule carte de mise en page, avec une hauteur d'aperçu partagée et Download both pour les PNG.
Ajustez les rôles de couleur et exportez.
Choisissez un préréglage de palette ou modifiez des rôles individuels (arrière-plan, surface, accent, texte masqué et amis). Les cadres de périphérique génériques en option permettent de lire les captures d'écran comme du chrome du produit sans les cadres de marque Apple.
--ghost-* variables for templates and loading states.Chemins d'exportation : Download PNG (ou Download both dans Combo), Download SVG / Copy SVG et Copy HTML pour les minuscules suppressions de pages et le chargement des squelettes. Aucune attribution requise sur les exportations.
À utiliser comme compétence dans n’importe quel outil de codage d’IA.
Depuis le générateur, le CTA noir pleine largeur Get skill ouvre la page compagnon. Ou allez directement à Ghost Wireframe Skill.
- Ouvrez la page de compétences et copiez l'invite compacte, ou téléchargez
SKILL.md - Déposez la compétence dans le dossier de compétences de votre agent (Cursor, Claude, Codex, etc.) ou collez l'invite compacte dans n'importe quelle discussion.
- Demandez une mise en page filaire fantôme (ordinateur de bureau, mobile ou combo) avec les rôles
--ghost-* - Facultatif : ouvrez le générateur de navigateur pour prévisualiser et exporter PNG/SVG/HTML
Générateur local de navigateur, compétence locale.
Le générateur fonctionne entièrement dans votre navigateur : les mises en page, les palettes et les exportations ne quittent jamais votre appareil. La compétence est un fichier de démarque que vous exécutez dans votre propre session d'outil d'IA. Tiny Design Shop ne télécharge pas vos wireframes.