Dos herramientas, un flujo de trabajo de interfaz de usuario básico.
Ghost Wireframe Generator es una herramienta de navegador gratuita para UI esquelética y estructuras alámbricas fantasma. Elija una familia de diseño (panel de control, análisis, kanban, tabla CRM, configuración), elija Single o Combo (escritorio + móvil), ajuste las funciones de color del estilo Happy Hues y luego exporte PNG, SVG o HTML con variables --ghost-* CSS. Todo permanece en tu navegador: no se carga nada.
El Ghost Wireframe Skill es el compañero portátil: copie un mensaje compacto o descargue SKILL.md para Cursor, Claude, Codex, ChatGPT y otras herramientas de codificación de IA. Utilice la habilidad para redactar fantasmas en el chat, luego abra el generador cuando desee una vista previa en vivo y una exportación de archivos.
Elija un diseño, luego Single o Combo.
Abra tinydesignshop.com/tools/ghost-wireframe-generator. En la biblioteca, haga clic en una tarjeta de diseño. Utilice Theme para Light o Dark, y View para Single o Combo.
Single muestra un dispositivo a la vez; desplácese por la biblioteca para cambiar entre tarjetas de escritorio y móviles. Combo muestra computadoras de escritorio y dispositivos móviles uno al lado del otro desde una tarjeta de diseño, con una altura de vista previa compartida y Download both para PNG.
Ajuste los roles de color y exporte.
Elija una paleta preestablecida o edite roles individuales (fondo, superficie, acento, texto silenciado y amigos). Los marcos de dispositivos genéricos opcionales ayudan a que las capturas de pantalla se lean como cromo del producto sin biseles de la marca Apple.
--ghost-* variables for templates and loading states.Rutas de exportación: Download PNG (o Download both en Combo), Download SVG / Copy SVG y Copy HTML para Tiny Page Drops y esqueletos de carga. No se requiere atribución en las exportaciones.
Úselo como habilidad en cualquier herramienta de codificación de IA.
Desde el generador, el CTA negro de ancho completo Get skill abre la página complementaria. O vaya directamente a Ghost Wireframe Skill.
- Abra la página de habilidades y copie el mensaje compacto o descargue
SKILL.md - Coloque la habilidad en la carpeta de habilidades de su agente (Cursor, Claude, Codex, etc.) o pegue el mensaje compacto en cualquier chat.
- Solicite un diseño de estructura alámbrica fantasma (escritorio, móvil o combinado) con roles
--ghost-* - Opcional: abra el generador de navegador T1Z para obtener una vista previa y exportar PNG/SVG/HTML
Generador local del navegador, habilidad local.
El generador se ejecuta completamente en su navegador: los diseños, las paletas y las exportaciones nunca salen de su dispositivo. La habilidad es un archivo de rebajas que ejecuta en su propia sesión de herramienta de IA. Tiny Design Shop no carga sus wireframes.