Primeiros passos
Clique no ícone do Stylebot na barra de ferramentas e depois em Estilizar esta página. Ou pressione alt+shift+M em qualquer aba, ou clique com o botão direito em um elemento e escolha Stylebot → Estilizar elemento.
Clique no seletor de elementos, passe o mouse sobre a página e clique em um elemento. Pressione ↑ antes de clicar para selecionar o elemento pai. Depois altere-o em Básico ou escreva CSS em Código. As mudanças são salvas na hora e aplicadas toda vez que você visita o site.
- Fontes
- Pesquise entre 400 Google Fonts e o Stylebot carrega a que você escolher, ou digite qualquer fonte instalada no seu computador.
- Posição do editor
- No Chrome e no Edge, o editor abre no painel lateral. Use Posição no menu ⋯ dele para abri-lo em uma janela separada ou fixá-lo na página. O Firefox não tem painel lateral.
- Desativar um estilo
- Use o botão no pop-up ou alt+shift+S. O estilo é mantido, só não é aplicado.
Perfis
Um perfil é uma folha de estilo separada para o mesmo site, para você manter mais de um visual e alternar entre eles. Só um é aplicado por vez, e todo site começa com o Padrão.
Clique no nome do perfil ao lado do site, no cabeçalho do editor, para criar, renomear, duplicar ou excluir perfis. Alterne entre eles ali ou no pop-up, onde Sem estilo desativa o estilo no site. Perfis novos começam vazios.
Linha de comando
O comando stylebot permite que um agente de programação como o Claude Code, o Codex ou o Cursor mude o estilo dos sites direto no seu navegador, usando a sua própria assinatura, sem chave de API. É a melhor forma de pedir a um agente que estilize um site, e você também pode executar os comandos.
- Configuração
- Instale a CLI, conecte aos seus navegadores e ative Permitir que apps deste computador controlem o Stylebot nas Opções. A página da linha de comando explica cada passo. Por enquanto, só no Chrome e no Edge.
- Claude Code
- Adicione o plugin do Stylebot e peça uma mudança com
/stylebot, como um tema escuro para um site. - Privacidade
- O acesso por linha de comando fica desativado até você ativá-lo. O Stylebot e a CLI só se comunicam entre si, neste computador; um agente envia o que lê ao próprio provedor.
Chat
O Chat é ideal para ajustes rápidos. Descreva a mudança que você quer na aba Chat e o Stylebot escreve o CSS. Você pode escolher um elemento para indicar algo específico ou anexar uma captura de tela para mostrar o que quer dizer. Para mudanças maiores, como um tema totalmente novo, use a linha de comando.
- Use sua própria chave
- Conecte uma chave de API do Claude, OpenAI ou Gemini. As chaves ficam salvas apenas neste computador e nunca são sincronizadas. As mensagens vão direto do seu navegador para o provedor.
- Para onde vão as mudanças
- Cada mudança é aplicada na hora e adicionada à folha de estilo do perfil atual. Clique em N linhas adicionadas para vê-la em Código, ou desfaça pelo chat.
- Custo
- A contagem de tokens abaixo da caixa de mensagem mostra quanto a conversa já usou, com um custo estimado.
Modo legível e escala de cinza
Os dois ficam na aba Predefinições e se somam às suas próprias mudanças. O Modo legível transforma os artigos de um site em uma leitura limpa, com tema, fonte, tamanho e largura à sua escolha; páginas que não são artigos ficam como estão. A Escala de cinza remove a cor do site, na intensidade que você quiser.
Sincronização, backup e histórico
- Sincronização com o Google Drive
- Conecte o Google Drive nas Opções. Seus estilos, incluindo os perfis, são sincronizados a cada 30 minutos e logo depois que você edita. O Stylebot só vê os arquivos que cria no seu Drive, e não existe servidor do Stylebot.
- Conflitos
- Se um estilo mudou em dois computadores, sua edição mais recente é mantida e a outra versão fica salva em um comentário, então nada se perde.
- Backup
- Exporte e importe todos os seus estilos em JSON nas Opções.
- Histórico de versões
- Cada alteração neste computador fica salva nas Opções, incluindo as que chegam pela sincronização. Restaure qualquer versão anterior, de alguns sites ou de todos.
Regras de URL
Por padrão, o Stylebot associa estilos a sites pelo nome de domínio. Edite a URL de um estilo nas Opções e use estes padrões para algo mais específico.
**Corresponde a qualquer sequência de caracteres.*Corresponde a qualquer sequência de caracteres até encontrar uma /.,Separa uma lista de padrões. Uma URL corresponde se qualquer um dos padrões corresponder.^No início de uma URL, transforma-a em uma expressão regular.Exemplos
docs.google.com- O domínio docs.google.com ou qualquer um de seus subdomínios.
docs**- Qualquer URL que comece com docs.
docs*.google.com- docs.google.com, docs1.google.com, docs2.google.com e assim por diante.
*.ycombinator.com- news.ycombinator.com e apps.ycombinator.com.
docs.google.com, spreadsheets.google.com- Qualquer um dos dois domínios ou seus subdomínios.
^http://www.reddit.com/$- Só a página inicial do Reddit.
*- Todos os sites. Útil para estilos que você quer em todo lugar.
Atalhos de teclado
Os atalhos globais funcionam em qualquer página que o Stylebot pode estilizar; altere-os nas configurações de atalhos do seu navegador, com link nas Opções. Para ver os atalhos do próprio editor, pressione ? no editor.
Ajuda e suporte
Encontrou um bug ou tem uma ideia? Abra uma issue no GitHub. O Stylebot é gratuito e de código aberto, mantido desde 2011. Se ele for útil para você, dá para apoiá-lo me pagando um café.