Primeros pasos
Haz clic en el icono de Stylebot en la barra de herramientas y luego en Estilizar esta página. O pulsa alt+shift+M en cualquier pestaña, o haz clic derecho en un elemento y elige Stylebot → Dar estilo al elemento.
Haz clic en el selector de elementos, pasa el cursor por la página y haz clic en un elemento. Pulsa ↑ antes de hacer clic para seleccionar su elemento padre. Luego cámbialo en Básico o escribe CSS en Código. Los cambios se guardan a medida que los haces y se cargan cada vez que visitas el sitio.
- Fuentes
- Busca entre 400 Google Fonts y Stylebot carga la que elijas, o escribe cualquier fuente instalada en tu equipo.
- Posición del editor
- En Chrome y Edge, el editor se abre en el panel lateral. Usa Posición en su menú ⋯ para abrirlo en una ventana aparte o acoplarlo en la página. Firefox no tiene panel lateral.
- Desactivar un estilo
- Usa el interruptor de la ventana emergente o alt+shift+S. El estilo se conserva, solo que no se aplica.
Perfiles
Un perfil es una hoja de estilo aparte para el mismo sitio, así puedes tener más de un aspecto y cambiar entre ellos. Solo se aplica uno a la vez, y todos los sitios empiezan con Predeterminado.
Haz clic en el nombre del perfil junto al sitio, en la cabecera del editor, para crear, renombrar, duplicar o eliminar perfiles. Cambia entre ellos ahí o en la ventana emergente, donde Sin estilo desactiva el estilo en el sitio. Los perfiles nuevos empiezan vacíos.
Línea de comandos
El comando stylebot permite que un agente de programación como Claude Code, Codex o Cursor cambie el estilo de los sitios directamente en tu navegador, con tu propia suscripción en lugar de una clave de API. Es la mejor forma de que un agente le dé estilo a un sitio, y también puedes ejecutar los comandos tú mismo.
- Configuración
- Instala la CLI, conéctala a tus navegadores y luego activa Permitir que las apps de este ordenador controlen Stylebot en Opciones. La página de la línea de comandos explica cada paso. Por ahora, solo en Chrome y Edge.
- Claude Code
- Añade el plugin de Stylebot y pide un cambio con
/stylebot, como un tema oscuro para un sitio. - Privacidad
- El acceso por línea de comandos está desactivado hasta que lo activas. Stylebot y la CLI solo se comunican entre sí, en este equipo; un agente envía lo que lee a su propio proveedor.
Chat
El chat es ideal para ajustes rápidos. Describe el cambio que quieres en la pestaña Chat y Stylebot escribe el CSS. Puedes elegir un elemento para señalar algo concreto, o adjuntar una captura de pantalla para mostrar lo que quieres decir. Para cambios más grandes, como un tema completamente nuevo, usa la línea de comandos.
- Usa tu propia clave
- Conecta una clave de API de Claude, OpenAI o Gemini. Las claves solo se guardan en este equipo y nunca se sincronizan. Los mensajes van directamente de tu navegador al proveedor.
- Adónde van los cambios
- Cada cambio se aplica al momento y se añade a la hoja de estilo del perfil actual. Haz clic en N líneas añadidas para verlo en Código, o deshazlo desde el chat.
- Coste
- El recuento de tokens bajo el cuadro de mensaje muestra lo que ha consumido la conversación, con un coste estimado.
Legibilidad y escala de grises
Ambos están en la pestaña Preajustes y se combinan con tus propios cambios. Legibilidad convierte los artículos de un sitio en una vista de lectura limpia, con tema, fuente, tamaño y ancho a tu elección; las páginas que no son artículos no se tocan. Escala de grises quita el color del sitio, con la intensidad que quieras.
Sincronización, respaldo e historial
- Sincronización con Google Drive
- Conecta Google Drive en Opciones. Tus estilos, perfiles incluidos, se sincronizan cada 30 minutos y justo después de que edites. Stylebot solo ve los archivos que crea en tu Drive, y no hay ningún servidor de Stylebot.
- Conflictos
- Si un estilo cambió en dos equipos, se conserva tu edición más reciente y la otra versión se guarda en un comentario, así que no se pierde nada.
- Respaldo
- Exporta e importa todos tus estilos como JSON desde Opciones.
- Historial de versiones
- Cada cambio en este equipo se guarda en Opciones, incluidos los que llegan por sincronización. Restaura cualquier versión anterior, para algunos sitios o para todos.
Reglas de URL
De forma predeterminada, Stylebot asocia los estilos a los sitios web por nombre de dominio. Edita la URL de un estilo en Opciones y usa estos patrones para algo más específico.
**Coincide con cualquier secuencia de caracteres.*Coincide con cualquier secuencia de caracteres hasta encontrar una /.,Separa una lista de patrones. Una URL coincide si coincide cualquiera de los patrones.^Al principio de una URL, la convierte en una expresión regular.Ejemplos
docs.google.com- El dominio docs.google.com o cualquiera de sus subdominios.
docs**- Cualquier URL que empiece por docs.
docs*.google.com- docs.google.com, docs1.google.com, docs2.google.com, etc.
*.ycombinator.com- news.ycombinator.com y apps.ycombinator.com.
docs.google.com, spreadsheets.google.com- Cualquiera de los dos dominios o sus subdominios.
^http://www.reddit.com/$- Solo la página principal de Reddit.
*- Todos los sitios. Útil para estilos que quieres en todas partes.
Atajos de teclado
Los atajos globales funcionan en cualquier página a la que Stylebot pueda dar estilo; cámbialos en los ajustes de atajos del navegador, enlazados desde Opciones. Para ver los atajos del propio editor, pulsa ? en el editor.
Ayuda y soporte
¿Encontraste un error o tienes una idea? Abre un issue en GitHub. Stylebot es gratis y de código abierto, y se mantiene desde 2011. Si te resulta útil, puedes apoyarlo invitándome a un café.