01El taller de tarjetas de GitHub

Generador de README de perfil de GitHub

GitHubCard es un generador de README de perfil de GitHub con arrastrar y soltar. Reúne tus estadísticas, proyectos y actividad en una tarjeta.

Abrir el editorVer tarjetas reales
Vista previa actualizada de GitHubCard para torvalds
generado con datos actualizados de GitHub
02El problema

Cambia varias inserciones en el README por un enlace de GitHubCard.

En un README hecho a mano, las estadísticas, lenguajes, rachas, contribuciones, actividad y habilidades pueden requerir seis elementos insertados, cinco servicios y decenas de parámetros de URL. GitHubCard reúne los mismos datos actualizados en un diseño. Tu README solo necesita un enlace.

README.md
@@ -1,29 +1,6 @@
  1. # Hi, I'm Alex 👋
  2. Full-stack developer building useful products.
  4. <!-- Profile and repository stats -->
  5. ![GitHub stats](https://github-readme-stats.vercel.app/api?username=you&show_icons=true&theme=tokyonight&hide_border=true)
  7. <!-- Top languages -->
  8. <a href="https://github.com/you?tab=repositories">
  9. <img height="165" src="https://github-readme-stats.vercel.app/api/top-langs?username=you&layout=compact&theme=tokyonight" alt="Top languages" />
  10. </a>
  12. <!-- Commit streak -->
  13. <p align="center">
  14. <img width="48%" src="https://streak-stats.demolab.com?user=you&theme=tokyonight&hide_border=true" alt="Commit streak" />
  15. </p>
  17. <!-- Contribution heatmap (light / dark) -->
  18. <picture>
  19. <source media="(prefers-color-scheme: dark)" srcset="https://ghchart.rshah.org/2f81f7/you" />
  20. <img src="https://ghchart.rshah.org/40c463/you" alt="Contribution heatmap" />
  21. </picture>
  23. <!-- Activity graph -->
  24. [![Activity graph](https://github-readme-activity-graph.vercel.app/graph?username=you&theme=github-compact)](https://github.com/you)
  26. <!-- Tech skills -->
  27. ![Tech skills](https://skillicons.dev/icons?i=ts,react,nodejs,docker,postgres&theme=dark)
  29. ## Featured projects
  1. # Hi, I'm Alex 👋
  2. Full-stack developer building useful products.
  4. ![GitHubCard](https://githubcard.com/you.svg?d=N7kQ2mXp4Vr8Ls1C)
  29. ## Featured projects
Antes · Markdown + HTML + 6 elementos insertados + 5 serviciosDespués · 1 enlace de diseño, los mismos datos de GitHub
03Widgets

Una selección de componentes.

Estadísticas de GitHub, mapas de contribuciones, rachas de commits, lenguajes, tecnologías, repositorios principales y Star History. Elige los componentes, colócalos en el lienzo y aplica un tema común.

8 de más de 20 widgets · pasa el cursor para pausar
Lenguajes en anillo
Vista previa del widget de lenguajes en anillo de GitHubCard
Clasificación de lenguajes en barras
Vista previa del widget de clasificación de lenguajes en barras de GitHubCard
Estadísticas de perfil
Vista previa del widget de estadísticas de perfil de GitHubCard
Estadísticas de contribuciones consecutivas
Vista previa del widget de contribuciones consecutivas de GitHubCard
Mapa de calor de contribuciones
Vista previa del widget de contribuciones de GitHubCard
Tendencias de stars
Vista previa del widget Star History de GitHubCard
Commits del repositorio
Vista previa del widget de commits de repositorio de GitHubCard
Frecuencia de código del repositorio
Vista previa del widget de frecuencia de código de GitHubCard
Lenguajes en anillo
Vista previa del widget de lenguajes en anillo de GitHubCard
Clasificación de lenguajes en barras
Vista previa del widget de clasificación de lenguajes en barras de GitHubCard
Estadísticas de perfil
Vista previa del widget de estadísticas de perfil de GitHubCard
Estadísticas de contribuciones consecutivas
Vista previa del widget de contribuciones consecutivas de GitHubCard
Mapa de calor de contribuciones
Vista previa del widget de contribuciones de GitHubCard
Tendencias de stars
Vista previa del widget Star History de GitHubCard
Commits del repositorio
Vista previa del widget de commits de repositorio de GitHubCard
Frecuencia de código del repositorio
Vista previa del widget de frecuencia de código de GitHubCard
04Cómo funciona

Tres pasos, sin configuración.

El mismo recorrido del editor: elegir una tarjeta, diseñarla y publicarla.

El editor en 16 segundos.
05Tarjetas reales

Repositorios reales, un sistema de tarjetas.

Tarjetas reales de repositorios públicos, actualizadas a diario. Tres usan un fondo Pro.

Tarjeta de repositorio GitHubCard para supabase/supabase

Supabase

supabase/supabase

Abrir
En uso →chris-grieser.decodes.oeiuwq.comwilliams.science/resourcespáginas con GitHubCard verificadas manualmente
Crear tarjeta de repositorio
06Comparar

Un lienzo frente a herramientas especializadas.

Compara el proceso de edición, el resultado y el trabajo de mantenimiento.

01Conclusión

Flujo de trabajo

En GitHubCard, todo sucede en un lienzo, desde la edición visual hasta la tarjeta final.

GitHubCard
El diseño, los datos y los widgets se ajustan en el mismo proceso de edición.
Herramientas especializadas
Las herramientas especializadas reparten los ajustes entre varios generadores.
Editor visualUn lienzoMenos ensamblaje
02Conclusión

Resultado

El resultado es una tarjeta con un estilo coherente.

GitHubCard
Los elementos de perfil, repositorio y estadísticas comparten el mismo estilo visual.
Herramientas especializadas
Otras herramientas suelen exportar tarjetas, gráficos o URL por separado.
Estilo unificadoComposición finalListo para exportar
03Conclusión

Mantenimiento

Menos dependencias significa menos tokens, tareas programadas y actualizaciones manuales.

GitHubCard
Las tarjetas se actualizan con datos de GitHub y un comportamiento de caché predecible.
Herramientas especializadas
La estabilidad suele depender del alojamiento, las tareas programadas o los límites de API.
Menos configuraciónActualización automáticaLímites claros

La comparación trata de categorías de herramientas, sin evaluar marcas concretas.

07Precios

Empieza gratis. Paga una vez por Pro.

Diseña y previsualiza gratis. Pro Lifetime cuesta US$19 en un solo pago e incluye fondos y fuentes prémium, exportaciones sin marca de agua y en 4×. Sin suscripción.

Pago único · Sin suscripción · Garantía de reembolso de 7 días. Ver todos los precios

08Preguntas

Preguntas antes de publicar.

¿Qué es GitHubCard?

GitHubCard es un generador visual de README de perfil de GitHub. Organiza tus datos en tarjetas de perfil y repositorio para un README, un portfolio o una publicación social.

¿Cómo uso GitHubCard?

Reemplaza github.com por githubcard.com en la URL de un perfil o repositorio, como githubcard.com/torvalds o githubcard.com/facebook/react. Abre el editor para personalizar la tarjeta.

¿Necesito iniciar sesión?

Previsualiza las tarjetas predeterminadas sin iniciar sesión. Entra con GitHub para guardar, publicar, actualizar o eliminar tus diseños personalizados.

¿Cómo inserto una tarjeta en mi README?

Copia la URL SVG (por ejemplo, githubcard.com/username.svg) y agrégala como imagen a tu archivo Markdown. La tarjeta mostrará datos actualizados de GitHub.

¿Cómo creo un README de perfil de GitHub?

Crea un repositorio con tu nombre de usuario de GitHub y añade un archivo README.md. GitHub lo muestra en tu perfil si el repositorio es público y tiene el nombre correcto.

Guía de README de perfil de GitHub
¿Las tarjetas se actualizan automáticamente?

Sí. Las tarjetas muestran datos actualizados de GitHub. Usamos caché para mejorar el rendimiento; los cambios pueden tardar hasta una hora en aparecer.

¿Puedo personalizar mis tarjetas?

Sí. Arrastra más de 20 widgets de datos en el editor, ajusta el diseño y exporta en SVG o PNG.

¿GitHubCard es gratis?

Las funciones principales son gratis. Pro Lifetime cuesta US$19 en un solo pago, sin suscripción, para fondos y fuentes prémium, exportaciones sin marca de agua y en alta resolución (4×).

Empieza cuando quieras

Diseña tu tarjeta. Dale tu estilo.

Abre el lienzo, añade tus datos de GitHub y crea una tarjeta para tu README o sitio web.

Abrir el lienzo