Santiago Bustelo

Designer de Interação e Criador do FlowStyler

Atualizado: Junho 2026

Criei o FlowStyler porque precisava publicar posts longos no LinkedIn com títulos, itálico e alguma hierarquia visual. A plataforma não oferecia nada disso.

As ferramentas para fazer isso, como os “Unicode font generators”, eram desajeitadas e complicadas. Passava mais tempo brigando com a ferramenta e com o texto do que simplesmente escrevendo.

Me perguntei: o que aconteceria se aplicássemos os padrões de um editor de texto real ao problema dos Unicode styles?

E assim acabei revisitando um caminho que comecei 40 anos atrás.


Spectrum y Macintosh Spectrum y Macintosh

Os anos do ZX Spectrum

Em 1986, o Timex Sinclair 1000 (16 K de RAM, sem gráficos) com o qual comecei a programar três anos antes já estava pequeno para mim. Como já tinha experiência em Sinclair Basic e Assembler Z80, o passo lógico foi migrar para um CZ‑Spectrum, clone nacional do ZX Spectrum: 48 K de RAM, resolução de 256 × 192 px, e cores!

Foi nessa época que conheci um programa de desenho, “Art Studio”. Ele oferecia uma interface gráfica e até função desfazer! (o único programa da Spectrum que tinha isso).

Passei centenas de horas com esse programa desenhando telas, personagens e cenários para jogos que planejava desenvolver. O Art Studio era um clone do MacPaint, mas eu não sabia disso. Também não sabia o que era um Mac. Nunca tinha visto uma interface gráfica. Mas o sistema de menus e a função “desfazer” me pareciam brilhantes, e eu me perguntava como seria o Tasword, o processador de texto que usava na Spectrum, se tivesse menus e uma função desfazer.

Pouco tempo depois, em uma feira de informática, finalmente conheci um Mac. Vi um sistema onde tudo funcionava como eu queria. Disse a mim mesmo que, quando crescesse, iria me dedicar a fazer as coisas serem assim.

Falei muitas coisas quando era criança, mas essa eu cumpri.

Tipografias em 8 × 8 pixels

A tipografia padrão do ZX Spectrum era muito pouco elegante para textos. Eu queria que meus documentos tivessem a qualidade de um texto impresso, ou pelo menos de uma máquina de escrever.

O Tasword usava a tipografia do sistema, que era bastante feia. Então coloquei mãos à obra:

  • O Art Studio tinha um editor de fontes.
  • Com alguns POKEs, as tipografias do Art Studio podiam funcionar no processador de texto.
  • Comecei a copiar e adaptar pixel a pixel, na grade de 8 × 8 que a Spectrum oferecia, diferentes tipografias dos catálogos de tipos que minha mãe tinha (ela trabalhava com publicidade na época, quando os anúncios eram feitos à mão e com fotomecânica).

Como as tipografias que eu podia criar com o Art Studio eram mono espaçadas, a que acabou funcionando melhor para textos foi uma adaptação da American Typewriter. A isso adicionei rotinas em assembler para gerar versões em negrito e itálico (estilos que podiam ser combinados entre si) e algumas utilidades essenciais, como marcas para cortar o papel contínuo da microimpressora térmica. O resultado foi bastante aceitável.

Entreguei alguns trabalhos práticos de Literatura com minha versão modificada do Tasword. Enquanto os outros levavam folhas de caderno, eu entregava papelinhos tamanho A5. Ficava bastante orgulhoso.

Construir um editor WYSIWYG do zero

Avançamos para 2005. Nessa altura eu já havia me formado como designer gráfico na FADU‑UBA. Escolhi esse curso porque, para criar produtos como o Art Studio, me interessavam tanto a programação quanto o design. Como autodidata, sabia que seguindo esse caminho poderia ser um programador mediano. Mas para aprender a projetar, precisava de mentores. E a única maneira de obter essa formação era a experiência de ateliê que só a universidade podia oferecer.

Em 2005, o Center of Subsurface Modeling da University of Texas at Austin nos encomendou o desenvolvimento do que hoje conhecemos como um CMS. As opções da época eram muito limitadas. Nós já havíamos desenvolvido uma plataforma que atendia ao que eles precisavam.

A inovação que incorporei foi usar a nascente tecnologia WYSIWYG em um editor web, em vez de tags HTML ou BBCode. Os editores existentes eram muito complexos, cheios de ajustes para as diferentes versões do Internet Explorer… navegador que nosso cliente não usava. O que me permitiu construir do zero o editor HTML WYSIWYG que precisávamos. O mais difícil foi lidar com as inconsistências introduzidas pelo copiar‑colar do Word e as tags fantasmas das primeiras versões do Firefox.

Passei cerca de três meses escrevendo expressões regulares; sei que para muitos isso é o mais próximo de um castigo bíblico. Mas assim como há pessoas que gostam de quebra‑cabeças, normalizar tags com um /<span\b(?=[^>]*\bbold\b)(?=[^>]*\bitalic\b)[^>]*>(.*?)<\/span>/is, para mim foi muito divertido.

Minha visão era integrar todas as ferramentas dentro do editor, algo parecido com o que vemos hoje com os editores de blocos. Era ambicioso para a época. Mas a versão que foi possível construir, levando ao limite as possibilidades dos navegadores da época, era infinitamente melhor do que inserir tags manualmente.

Reinventar o processador de texto, 40 anos depois

Passaram-se cerca de 20 anos. Quando escrevo estas linhas, já acumulo mais de 1000 projetos de design e desenvolvimento.

No início de 2026, cansado do trabalho de pedreiro que envolvia copiar e colar texto de geradores Unicode para dar hierarquia às minhas publicações no LinkedIn, comecei a pesquisar se existia uma forma melhor. E enquanto resolvia esse problema, percebi que vinha me preparando há 40 anos para fazer isso.

A solução era pegar a lógica de um processador de texto real (onde escrever, formatar e corrigir são ações livres que não te impõem uma ordem) e aplicá-la aos estilos Unicode.

Ou seja, fazer um clone do MacWrite: aquilo que sonhei fazer lá pelos anos 80, sem saber que existia.

Montei um protótipo rápido que resolveu meu problema. Me perguntei se fazia sentido transformá-lo em um side project para que outros pudessem usá-lo: a resposta foi positiva. Construí-lo e torná-lo público valia a pena. Será um grande negócio? Pelo menos pagará as horas investidas? Quem sabe. Essa nunca foi a pergunta.

Usei minha própria ferramenta todos os dias e fui ajustando cada detalhe. O objetivo era detectar cada ponto de atrito e eliminá-lo. Porque quando uma ferramenta te obriga a trabalhar em uma determinada ordem (e se você pular essa ordem, perde o trabalho ou tem que refazer tudo), o modelo de interação está te condicionando. Minha premissa foi exatamente a oposta: que a ferramenta se adaptasse a como eu escrevo, e não o contrário.

O primeiro processador de texto para estilos Unicode

De todo esse processo surgiram as características diferenciais do FlowStyler:

  • Estilos ao vivo: o editor infere o estilo onde você posiciona o cursor, para que corrigir ou continuar escrevendo não quebre o fluxo. Você para de brigar com a ferramenta e pode iterar em paz.
  • Estilos combináveis: nos casos suportados, você pode usar bold, italic, sublinhado e também tachado. Tudo junto, sem que um estilo sobreponha o outro.
  • Ajustar Maiúsculas/minúsculas: quando você está editando, pode ajustar maiúsculas e minúsculas sem perder os estilos já aplicados.
  • Listas avançadas: bullets, listas numeradas, números romanos, alfabéticas, números em círculos Unicode e letras em quadrados. E o mais importante: você pode editá-las, ordená-las e renumará-las sem sair do app nem tocar no Word ou Excel.
  • Contador de caracteres em tempo real, sempre à vista enquanto você escreve.

Mais do que uma lista de funcionalidades, são os atributos distintivos de uma categoria que não existia: o primeiro processador de texto para estilos Unicode.

Há 40 anos pensava que, quando crescesse, gostaria de ser inventor. Acredito que se o meu eu do passado se encontrasse comigo agora, ficaria muito feliz.

Hoje sou Diretor de UX na Kambrica, consultor e mentor em UX, estratégia e Produto. Você pode me encontrar em bustelo.com.ar ou me escrever pelo LinkedIn.

Funciona em qualquer lugar onde você possa colar texto: