Duas ferramentas, um fluxo de trabalho de UI básico.
O Ghost Wireframe Generator é uma ferramenta de navegador gratuita para UI esqueleto e wireframes fantasmas. Escolha uma família de layout (painel, análise, kanban, tabela CRM, configurações), escolha Single ou Combo (desktop + celular), ajuste as funções de cores no estilo Happy Hues e exporte PNG, SVG ou HTML com variáveis --ghost-* CSS. Tudo permanece no seu navegador – nada é carregado.
O Ghost Wireframe Skill é o companheiro portátil: copie um prompt compacto ou baixe SKILL.md para Cursor, Claude, Codex, ChatGPT e outras ferramentas de codificação de IA. Use a habilidade para criar fantasmas no bate-papo e, em seguida, abra o gerador quando desejar uma visualização ao vivo e exportação de arquivo.
Escolha um layout e depois Single ou Combo.
Abra tinydesignshop.com/tools/ghost-wireframe-generator. Na biblioteca, clique em um cartão de layout. Use Theme para Light ou Dark e View para Single ou Combo.
Single mostra um dispositivo por vez; role a biblioteca para alternar entre cartões para desktop e dispositivos móveis. Combo mostra desktop e dispositivos móveis lado a lado em um cartão de layout, com altura de visualização compartilhada e Download both para PNGs.
Ajuste as funções das cores e exporte.
Escolha uma predefinição de paleta ou edite funções individuais (plano de fundo, superfície, destaque, texto silenciado e amigos). Molduras de dispositivos genéricas opcionais ajudam as capturas de tela a serem lidas como cromo do produto sem engastes da marca Apple.
--ghost-* variables for templates and loading states.Caminhos de exportação: Download PNG (ou Download both em Combo), Download SVG / Copy SVG e Copy HTML para pequenas quedas de página e carregamento de esqueletos. Nenhuma atribuição necessária nas exportações.
Use como uma habilidade em qualquer ferramenta de codificação de IA.
No gerador, o CTA preto de largura total Get skill abre a página complementar. Ou vá direto para Ghost Wireframe Skill.
- Abra a página de habilidades e copie o prompt compacto ou baixe
SKILL.md - Coloque a habilidade na pasta de habilidades do agente (Cursor, Claude, Codex, etc.) ou cole o prompt compacto em qualquer bate-papo
- Solicite um layout de wireframe fantasma – desktop, celular ou combo – com funções
--ghost-* - Opcional: abra o gerador do navegador para visualizar e exportar PNG/SVG/HTML
Gerador local do navegador, habilidade local.
O gerador é executado inteiramente no seu navegador – layouts, paletas e exportações nunca saem do seu dispositivo. A habilidade é um arquivo markdown que você executa em sua própria sessão de ferramenta de IA. Tiny Design Shop não carrega seus wireframes.