Marca para proyectos open source: del README a las versiones

La marca de un proyecto open source no necesita una agencia de diseño. Necesita cuatro cosas hechas una vez y mantenidas con coherencia: un logotipo sencillo, una cabecera de README que se lea en modo claro y oscuro, una imagen social para cuando se comparta el repositorio y una plantilla reconocible para los anuncios de versión. Juntas dicen a un visitante en pocos segundos que el proyecto está mantenido y tiene un punto de vista, que a menudo es lo que consigue la primera estrella o el primer colaborador.

Por qué importa la marca en un proyecto open source

Los desarrolladores juzgan los proyectos rápido, y lo hacen por señales de cuidado: un README claro, versiones recientes, un nombre fácil de volver a encontrar. Una identidad visual coherente es una de esas señales. También ayuda a recordar tu proyecto entre varias bibliotecas parecidas y da a colaboradores y ponentes de conferencias algo que poner en una diapositiva. Nada de esto sustituye a una buena documentación; hace que una buena documentación se note más.

Un logotipo open source que funciona a 16 píxeles

Tu logotipo aparecerá como favicon, como avatar de GitHub, como pequeña insignia en un sitio de documentación y, a veces, como pegatina. Diseña primero para el caso más pequeño. Una sola forma contundente o una letra en una tipografía firme supera a una ilustración detallada. Exporta un SVG para la web y PNG transparentes para todo lo demás; SVG frente a PNG explica cuál usar en cada caso, y el diseño de favicons trata los tamaños diminutos.

Pon el símbolo sobre un fondo degradado para avatares y cabeceras y dejará de parecer un icono por defecto. Mantén tranquilo el degradado detrás del logotipo donde este se apoya; el logotipo sobre fondo degradado explica cómo.

Una cabecera de README que funciona en modo oscuro

Muchos desarrolladores leen GitHub en modo oscuro, y una cabecera hecha para blanco brillará como una linterna. GitHub admite el elemento HTML <picture> en Markdown, así que puedes servir una versión clara y otra oscura de la misma cabecera. Un banner de 1200×600, el tamaño de un banner de blog, es un ancho cómodo para un README. El diseño en modo oscuro trata la parte del color.

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./.github/header-dark.png">
    <img alt="Tidepool: a tiny job queue for Postgres" src="./.github/header-light.png" width="600">
  </picture>
</p>

Pon tres cosas en la cabecera: el logotipo, el nombre del proyecto y una descripción de una línea. Las insignias, los comandos de instalación y las capturas van debajo, en texto, donde se pueden copiar y mantener al día.

Cómo añadir una imagen de vista previa social en GitHub

Cuando alguien pega el enlace de tu repositorio en un chat, un foro o una publicación, la plataforma muestra su imagen de vista previa social. Sin ella, GitHub genera una tarjeta por defecto con los datos del repositorio. Puedes subir la tuya en los ajustes del repositorio, en Social preview; GitHub indica las dimensiones recomendadas en esa página. Diséñala desde tu maestro de vista previa de enlace de 1200×630 y mantén las palabras en el centro para que pequeñas diferencias de formato no recorten nada. El tamaño de la imagen Open Graph explica los recortes, y las etiquetas Open Graph trata la misma imagen para tu sitio de documentación.

Gráficos de anuncio de versión que se notan

Muchos usuarios se enteran de una nueva versión por una publicación y no por el registro de cambios. Un gráfico de versión constante, con el mismo fondo y composición y solo cambiando el número de versión y el titular, enseña a la gente a reconocer tus anuncios. Abre con lo que los usuarios ya pueden hacer, no solo con el número de versión.

1. 1

   Crea el símbolo

   Una forma o letra, probada a 16 px. Exporta SVG y PNG transparente.

2. 2

   Elige un fondo

   Un degradado o color que combine con los temas oscuro y claro de GitHub.

3. 3

   Construye la cabecera del README

   Versiones clara y oscura, logotipo, nombre y una línea.

4. 4

   Sube la vista previa social

   Ajustes del repositorio, Social preview. Pruébala pegando el enlace en un chat.

5. 5

   Convierte la publicación de versión en plantilla

   Mantén la composición; cambia la versión y el titular cada vez.

Gradiently encaja con mantenedores que prefieren no abrir una herramienta de diseño. Funciona dentro de ChatGPT, Claude y cualquier asistente compatible con servidores MCP remotos, así que puedes pedir un gráfico de versión mientras escribes las notas de la versión, y el diseño se abre en el Studio para una revisión final. Los diseños se apoyan en un Mark, un fondo degradado con el que nadie más puede exportar una vez que lo reservas, así que el estilo de tu proyecto es de verdad solo suyo. La guía de configuración de MCP lleva unos minutos.