Gerador de Wireframe ASCII

Wireframes ASCII para esboço rápido de UI

Um wireframe ASCII é um mockup textual de interface desenhado com caracteres monoespaçados — caixas, linhas, rótulos e placeholders que cabem dentro de um bloco de código. É a ferramenta de menor fidelidade e maior velocidade para discutir layouts: você cola num comentário de pull request (faz diff limpo), embute num README, esboça uma TUI antes de escrever o código curses, ou descreve a saída de um --help de CLI numa RFC. Sem ferramenta de design, sem exportar, sem hospedar imagem — apenas texto que qualquer editor em qualquer plataforma renderiza.

A maioria dos wireframes ASCII usa o bloco Unicode Box Drawing (U+2500–U+257F) que oferece variantes light ─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼, heavy ━ ┃ ┏ ┓ ┗ ┛, double ═ ║ ╔ ╗ ╚ ╝ e curved ╭ ╮ ╰ ╯. O bloco Block Elements (U+2580–U+259F) adiciona sombreamento █ ▌ ▐ ░ ▒ ▓ para barras, sidebars ou botões cheios. Fallback ASCII puro usa + - | quando não se garante terminal Unicode no destino.

Convenções comuns

• [Botão] — botão de ação
• <Input> — campo de texto de uma linha
• (o) Radio / [x] Checkbox
• [Menu v] — dropdown
• ===Título=== — cabeçalho enfatizado

Prós e contras vs Figma/Penpot

Prós: zero dependências — qualquer editor abre; versionável no git com diff por linha; copia e cola em chat, ticket ou RFC; sem build, sem export, sem CDN quebrada; perfeito para mockup de CLI/TUI porque o meio de saída é o mesmo do desenho. Contras: a aparência depende inteiramente da fonte do leitor — fontes proporcionais em Slack, Notion ou Jira quebram alinhamento na hora; sem cor (a não ser via ANSI escapes, que só funcionam em terminal); sem layout responsivo; telas complexas ficam ruidosas e ilegíveis; previews em mobile destroem diagramas largos.

Ecossistema de ferramentas

Para criação drag-and-drop tente ASCIIFlow (web, grátis), Monodraw (macOS, pago) ou textik.com. Opções programáticas: pacote npm box-drawing, figlet para banners estilizados, asciidiagram, ou template strings caseiras. Excalidraw produz mockups sketchy (não ASCII) que comprimem bem em PNG. Para fidelidade maior mas ainda textual, considere Mermaid ou PlantUML, que exportam SVG/PNG a partir de DSL textual.

Perguntas frequentes

O ASCII fica certo dentro de um README do GitHub? Sim — o Markdown do GitHub renderiza blocos com três crases em fonte monoespaçada, então os caracteres de box-drawing alinham. Sempre envolva o wireframe em ```; fora do bloco de código, fontes proporcionais quebram o desenho.

Posso embutir cores num wireframe ASCII? Em texto puro, não. Terminais interpretam sequências ANSI (\x1b[31m para vermelho, etc.), mas nenhum visualizador de documento renderiza isso. Em documentos, use caracteres de sombreamento (█ ▓ ▒ ░) para sugerir contraste.

Vai aparecer bem no celular? Só se o app de leitura usar fonte monoespaçada em blocos de código. A maioria dos visualizadores Markdown usa, mas apps como Slack, WhatsApp ou Notion podem quebrar ou trocar a fonte. Mantenha a largura abaixo de 60 caracteres para sobreviver em telas pequenas.

Devo usar wireframes ASCII em arquivos de design de produção? Não — eles servem para ideação, comentários, RFCs e documentação de CLI/TUI. Migre para Figma, Penpot ou Sketch quando precisar de espaçamento, tipografia e design tokens.