[ WIREFRAME PACK GRÁTIS ]

Mande a imagem. A IA monta o site.

Um wireframe é o esqueleto do site: só caixas e barras mostrando onde cada coisa fica. Você manda essa imagem para a IA, diz o tema, e ela monta a página seguindo a estrutura.

  1. 1Escolha um wireframe
  2. 2Mande a imagem pra IA
  3. 3Receba o site
Baixar grátis Ver exemplos
WireframeWireframe de exemplo
Site criado pela IASite criado a partir do wireframe
[ ANTES E DEPOIS ]

Do wireframe ao site, nos exemplos reais

À esquerda, a imagem que foi enviada para a IA. À direita, o site que ela montou. A estrutura é a mesma.

WireframeWireframe: Título gigante com personagem no centro
Site criado pela IASite criado a partir do wireframe (Colecionáveis digitais)
Título gigante com personagem no centroColecionáveis digitaisFaixa de navegação, título enorme atrás da imagem principal, cartões menores ao lado e uma grade de palavras com divisórias.
WireframeWireframe: Hero de tela cheia com recorte embaixo
Site criado pela IASite criado a partir do wireframe (Imobiliária)
Hero de tela cheia com recorte embaixoImobiliáriaImagem grande ocupando o topo, título sobreposto, selos de números na lateral e botão central no recorte da base.
WireframeWireframe: Produto em destaque com seletor
Site criado pela IASite criado a partir do wireframe (Iluminação e objetos)
Produto em destaque com seletorIluminação e objetosFundo escuro, título à esquerda, três miniaturas para trocar o produto e etiquetas flutuando sobre a imagem.
WireframeWireframe: Nome da marca enorme sobre o produto
Site criado pela IASite criado a partir do wireframe (Marca de produto)
Nome da marca enorme sobre o produtoMarca de produtoMoldura clara em volta do hero, título gigante cortado pelo produto e uma miniatura no canto inferior.
[ COMO LER UM WIREFRAME ]

4 formas, e a IA entende tudo

O wireframe só diz onde cada coisa fica. Cor, fonte e estilo você define no pedido.

ImagemBloco escuro com o ícone de montanha. A IA põe uma foto ou ilustração.
TextoBarras cinza. Barra grossa é título, barras finas empilhadas são parágrafo.
Botão ou linkPílula ou retângulo pequeno. Vira botão, link de menu ou etiqueta.
Selo ou íconeCírculo. Vira botão redondo, selo, avatar ou ícone.
[ BAIXAR GRÁTIS ]

Baixe o pack e comece hoje

O arquivo baixa na hora, aqui mesmo.

Coloque seu e-mail e clique em baixar

Você vai baixar o Wireframe Pack (wireframes, exemplos e prompts), num arquivo .zip.

O arquivo baixa na hora, aqui nesta página. Ele não é enviado por e-mail. Para receber, é só clicar em "Baixar o .zip grátis".

Seu e-mail entra na newsletter do Promptfly: 1 e-mail por semana, e dá pra sair quando quiser.

[ O QUE VEM NO .ZIP ]

Wireframes, exemplos e os prompts

promptfly-wireframe-pack/
├── LEIA-ME.md
├── PROMPTS.md
├── wireframes/
│   ├── wireframe-01.png
│   ├── wireframe-02.png
│   └── ...
└── exemplos/
    ├── site-01.jpg
    └── ...
LEIA-ME.mdComece por aqui. Como mandar o wireframe para a IA, em 3 passos.
PROMPTS.mdOs pedidos prontos para copiar e colar junto com a imagem.
wireframes/As imagens dos wireframes. É isto que você manda para a IA.
exemplos/Os sites que a IA montou a partir de cada wireframe, para comparar.
[ COMO USAR ]

Em 3 passos, sem programar

Escolha o wireframeAbra a pasta wireframes e escolha o que combina com o seu projeto. Olhe o exemplo para ver o que dá para criar.
Mande a imagem pra IAAnexe a imagem no Claude, no ChatGPT ou no Gemini e cole o pedido abaixo, trocando o tema.
AjustePeça para a IA comparar o site com o wireframe e corrigir o que ficou fora do lugar.
Pedido pra mandar junto com a imagem
Crie um site seguindo exatamente a estrutura deste wireframe, bloco por bloco, na mesma ordem e na mesma posição.
Os blocos escuros com ícone de imagem são imagens, as barras cinza são textos, as pílulas são botões e os círculos são botões redondos ou selos.
O tema do site é: [DESCREVA O SEU PROJETO].
Escreva textos reais em português. Não use lorem ipsum. Se faltar alguma informação, pergunte antes de inventar.
[ DÚVIDAS ]

Perguntas rápidas

Recebo o arquivo por e-mail?

Não. O .zip baixa na hora, nesta página, quando você clica em "Baixar o .zip grátis". Depois é só procurar na pasta Downloads.

O que é um wireframe?

É o esqueleto de uma página: só caixas e barras mostrando onde cada coisa fica. Sem cor, sem foto, sem texto. Para a IA, é um mapa claro do que montar.

Funciona com qual IA?

Com qualquer uma que aceite imagem: Claude, ChatGPT, Gemini e o Claude Code. Você envia a imagem junto com o pedido.

Preciso saber programar?

Não. Você manda a imagem e escreve o tema do seu projeto. Quem escreve o código é a IA.

O site fica igual ao dos exemplos?

Fica com a mesma estrutura. Cor, foto, fonte e texto dependem do tema que você pedir. Para um visual mais cuidado, use junto o Design Pack, que também é grátis.

É grátis mesmo?

É. Você só informa o e-mail, que entra na newsletter do Promptfly (1 e-mail por semana). Dá pra sair quando quiser.

Quer entender o método completo?

O guia mostra como eu crio sites mandando só a imagem do wireframe, com os 4 exemplos passo a passo.

Ler o guia completoBaixar o pack

Quer os templates, as animações, as skills e a mentoria pronta? Veja o Premium.