ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Hay dos formas de usar IA para programar: una es pedirle código a lo loco y cruzar los dedos… y otra es hacer ingeniería de verdad. Y justo ahí entra mattpocock/skills, un repo que está explotando en GitHub y que, sinceramente, deberías mirar si te mola el diseño, el código o ambos.

La idea es tan simple que duele: en vez de tratar a la IA como un genio improvisado, la conviertes en alguien con “habilidades concretas”. Cada skill es básicamente una receta bien definida: cómo crear un PRD, cómo dividir tareas, cómo hacer TDD, cómo diseñar interfaces… no magia, proceso.

Y aquí está lo interesante: no es teoría bonita. Es literalmente el workflow real de un dev top publicado tal cual. El repo nace del propio entorno de trabajo de Matt Pocock, que decidió abrir su carpeta .claude/skills/ al mundo. Resultado: uno de los repos más virales del momento, con decenas de miles de estrellas en cuestión de días .

Lo que te encuentras dentro no es código complejo, sino pequeñas piezas ultra concretas. Cosas como: convertir una idea en un PRD automáticamente, romper ese PRD en issues bien estructurados, forzar a la IA a preguntarte cosas incómodas antes de empezar (sí, eso existe), o generar múltiples diseños de interfaz para el mismo problema. Todo modular, todo reutilizable .

Y aquí viene el giro interesante para gente de diseño: esto no va solo de programar. Hay skills como “design-an-interface” que generan varias propuestas radicalmente distintas de UI para el mismo módulo. Es como tener un diseñador explorando caminos en paralelo, pero sin el caos típico de brainstorming eterno.

Además, el enfoque mola porque rompe con el “vibe coding”, ese rollo de improvisar con IA hasta que algo funciona. Aquí la filosofía es otra: primero piensas, luego estructuras, luego ejecutas. PRD → issues → código → tests. Un flujo mucho más cercano al diseño de producto que al simple desarrollo .

Otra cosa clave: cada skill es pequeña y hace una sola cosa bien. Esto es importante porque refleja cómo deberíamos pensar tanto el código como el diseño: piezas simples que se combinan para crear sistemas complejos. Nada de herramientas gigantes que hacen de todo mal.

Y lo mejor es que esto no es solo para usarlo tal cual. Es más bien una plantilla mental. Puedes copiar los skills, modificarlos o crear los tuyos. De hecho, el propio repo incluye uno para “crear skills”, lo cual ya es bastante meta.

En resumen: si estás en diseño o programación y usas IA, este repo te pega una bofetada suave pero necesaria. Te recuerda que no se trata de pedir resultados, sino de diseñar procesos. Y eso, al final, es donde está el nivel.

#Programación #DiseñoUX #InteligenciaArtificial #GitHub #Frontend #ProductDesign #UXUI #DevTools #IA #ClaudeAI #TypeScript #Workflow

Vale, te voy a ahorrar tiempo: si estás usando IA para programar interfaces y todo te sale con pinta de plantilla cutre… no eres tú, es la falta de contexto.

Aquí entra awesome-design-md, un repo que básicamente dice: “oye, en vez de pedirle magia a la IA, dale instrucciones de diseño claras”. Y lo hace con algo tan simple que duele: archivos Markdown.

Sí, Markdown. Nada de Figma, nada de tokens raros, nada de pipelines complejos. Un archivo llamado DESIGN.md donde defines colores, tipografías, espaciados, componentes… y listo. Lo metes en tu proyecto y le dices al agente: “usa esto”. Fin.

La idea es potente porque soluciona un problema real: las IAs programan bien, pero diseñan como si vivieran en 2014. Botones genéricos, layouts reciclados… todo correcto, pero sin alma.

Este repo lo que hace es convertir el “gusto” en texto reutilizable. No estás copiando componentes, estás copiando criterios de diseño.

Y aquí está la magia: puedes hacer que tu app parezca Stripe, Notion o Apple simplemente cambiando un archivo. Literalmente eliges un estilo y la IA lo sigue como si fuera un manual de marca.

Además, cada DESIGN.md no es un resumen cutre. Tiene de todo:

• paleta de colores con roles semánticos
• jerarquía tipográfica completa
• estilos de botones, inputs, cards
• reglas de espaciado y layout
• comportamiento responsive
• incluso “qué NO hacer”

O sea, es como pasarle a la IA el cerebro de un diseñador comprimido en texto.

Y lo mejor: funciona porque Markdown es justo el idioma que las LLM entienden mejor. No hay que parsear nada raro.

Ahora bien, tampoco es la panacea.

#diseñografico #uxui #frontend #ia #programacion #webdesign #openSource #designsystems #markdown #aiTools

Si estás empezando en diseño o simplemente necesitas un logo rápido sin complicarte la vida, Logo Diffusion es una de esas herramientas que te hacen pensar: “vale, esto ya está jugando en otra liga”.

La idea es simple: escribes lo que quieres (por ejemplo: logo minimalista para marca de café moderno) y la IA te escupe varias propuestas listas para usar. También puedes subir un boceto cutre hecho en 30 segundos y la herramienta lo convierte en algo bastante decente.

Y aquí viene lo interesante: no es solo generar por generar. Puedes ajustar colores, estilos, composición… básicamente tienes control suficiente para que no parezca el típico logo genérico de IA.

Además, trabaja con modelos de difusión (de ahí el nombre), lo que significa que las imágenes que genera tienen bastante calidad y coherencia visual. Nada de logos rotos o letras raras… bueno, casi nunca

Otro punto fuerte es la velocidad. En minutos tienes varias opciones sobre la mesa, algo que en un proceso tradicional te puede llevar horas o días. Y si estás validando ideas o haciendo branding rápido, esto es oro puro.

También mola que puedas exportar en vector (SVG), lo cual es clave si luego quieres usar ese logo en serio: web, impresión, lo que sea.

Ahora, vamos a ser claros: esto no sustituye a un diseñador. Es una herramienta brutal para empezar, prototipar o incluso sacar algo funcional si vas justo de presupuesto. Pero si quieres una identidad de marca con personalidad de verdad, ahí sigue ganando el factor humano.

En resumen, Logo Diffusion es como tener un diseñador junior ultrarrápido dentro del navegador. Tú le das ideas, él te devuelve opciones. Y a partir de ahí decides si te vale o si necesitas algo más trabajado.

#DiseñoGráfico #IA #LogoDesign #Branding #HerramientasIA #Diseño #Creatividad #Startups #Freelance #DiseñoDigital

Si alguna vez has diseñado en Figma y luego has tenido que “traducir” eso a código… sabes perfectamente el dolor.

Horas perdidas, inconsistencias, y ese momento en el que el diseño final no se parece en nada al mockup. Pues bien, ahí es donde entra Pencil.dev y viene a romper esa dinámica de raíz.

La idea de pencil.dev es simple pero potente: diseñar interfaces directamente dentro de tu editor de código. Sí, dentro del propio VS Code o Cursor. Nada de saltar entre herramientas. Nada de handoff. Todo en el mismo sitio.

Funciona como un lienzo vectorial (rollo Figma), pero integrado en tu entorno de desarrollo. Tienes canvas infinito, capas, componentes reutilizables… lo típico de diseño, pero pegado a tu código.

Y aquí viene lo interesante: está pensado para trabajar con IA desde el minuto uno. Puedes generar interfaces enteras con prompts, iterar diseños o modificar componentes sin salir del editor.

En lugar de diseñar algo bonito y luego pelearte para implementarlo, aquí el diseño ya vive dentro del proyecto. Literalmente se guarda como archivos versionables en Git, lo que significa que diseño y código están sincronizados desde el principio.

Esto cambia bastante el juego, sobre todo si eres desarrollador con inquietudes de diseño o si trabajas solo. Porque elimina ese paso intermedio donde todo se rompe.

Además, la herramienta tira fuerte hacia lo que ahora llaman “vibe coding”: generar interfaces directamente con IA mientras programas. Es decir, describes lo que quieres y el sistema te monta la UI y el código a la vez.

¿Es perfecta? Ni de lejos.

Al ser una herramienta bastante nueva, todavía está verde. Le faltan cosas que Figma ya tiene súper pulidas, y dependiendo de cómo la uses puede volverse algo inestable o consumir bastantes recursos. Pero eso es bastante normal en este tipo de herramientas que están naciendo ahora mismo.

Aun así, lo importante no es si hoy es mejor que Figma o no. Lo importante es hacia dónde apunta:

Eliminar la separación entre diseño y desarrollo
Trabajar directamente sobre el producto final
Usar IA como parte del flujo, no como añadido

Si estás empezando en diseño o desarrollo, esta es de esas herramientas que merece la pena probar aunque sea por entender por dónde va el futuro.

Porque esto huele a cambio gordo.

#DiseñoUI #UX #IA #Herramientas #Programación #Frontend #WebDesign #AItools #Figma #Desarrollo

Si ya usas GitHub Copilot y sientes que podría dar más de sí… no estás loco. La realidad es que Copilot es potente, pero lo que realmente marca la diferencia es cómo lo usas. Y aquí es donde entra Awesome GitHub Copilot para volarte la cabeza.

Estamos hablando de una especie de “repositorio cheat code” creado por la comunidad que reúne prompts, agentes, instrucciones y configuraciones para sacarle todo el jugo a Copilot. No es una herramienta nueva, es mejor: es un kit de mejoras para una herramienta que ya usas.

Dentro te encuentras auténticas joyas: prompts listos para generar documentación sin sufrir, instrucciones que hacen que Copilot siga estándares de código como si fuera tu senior más exigente, y agentes especializados que entienden flujos concretos de trabajo. Todo pensado para que dejes de pelearte con la IA y empieces a dirigirla como toca.

La gracia de todo esto es que no partes de cero. En lugar de escribir prompts random esperando que Copilot adivine lo que quieres, aquí tienes estructuras ya probadas por otros desarrolladores. Es literalmente aprender de la experiencia colectiva, pero sin tener que leer mil hilos de foros.

Además, el proyecto no para de crecer. Es open source, así que cualquiera puede aportar nuevos prompts, mejorar los existentes o crear colecciones completas para casos específicos como DevOps, testing, documentación o incluso arquitectura de software.

Y por si fuera poco, han montado incluso una web navegable donde puedes explorar todo esto como si fuera una tienda de mejoras para tu Copilot: agentes, skills, plugins, workflows… todo organizado para que encuentres rápido lo que necesitas sin perderte entre markdowns.

¿El resultado? Que pasas de usar Copilot como “autocompletado fancy” a convertirlo en un copiloto real que entiende contexto, sigue reglas y trabaja contigo. Productividad, sí, pero con cabeza.

Porque al final, la diferencia entre una IA que ayuda y una que estorba no es la tecnología… es cómo la configuras. Y ahí Awesome GitHub Copilot juega en otra liga.

#GitHubCopilot #IA #Programación #DesarrolloWeb #Productividad #DevTools #AIcoding #OpenSource

Si alguna vez has tenido una idea brillante para una web o app pero te has quedado bloqueado al momento de diseñarla, Google está experimentando con algo que podría cambiar bastante las reglas del juego. Se llama Stitch y básicamente intenta convertir descripciones simples en interfaces visuales funcionales usando inteligencia artificial.

La propuesta es tan simple como potente: escribes lo que quieres crear, algo tipo “una app de recetas con fotos grandes y botón de favoritos”, y Stitch empieza a generar una interfaz acorde a esa idea. No hablamos solo de bocetos básicos, sino de layouts bastante coherentes que ya te dan una base real para trabajar. Es como tener un diseñador UI al lado… pero en versión IA.

Este tipo de herramientas encaja perfectamente con la tendencia actual de desarrollo asistido por IA, donde cada vez más tareas creativas y técnicas se automatizan o se aceleran. Stitch no viene a reemplazar diseñadores, pero sí a quitar esa fricción inicial de empezar desde cero. Y seamos honestos: empezar es muchas veces lo más difícil.

Lo interesante es que Stitch forma parte de la línea experimental de Google, lo que significa que está en constante evolución. No es un producto final ni cerrado, sino más bien un laboratorio donde se están probando nuevas formas de interacción entre humanos y máquinas. Algo muy en la línea de lo que ya vimos con herramientas como Figma o Adobe XD, pero con el añadido fuerte de la inteligencia artificial generativa.

Para diseñadores, puede ser una herramienta brutal para prototipar rápido y validar ideas. Para desarrolladores, un atajo para visualizar conceptos sin tener que montar todo desde cero. Y para creadores en general, una forma de dar forma a ideas sin necesidad de dominar herramientas complejas desde el minuto uno.

¿Es perfecta? Para nada. Como toda IA generativa, puede fallar, generar cosas genéricas o no entender del todo lo que buscas. Pero como punto de partida, es difícil no verle el potencial. Y sobre todo, abre una puerta interesante: la de democratizar aún más el diseño digital.

En definitiva, Stitch es otro paso más hacia un futuro donde crear productos digitales sea más rápido, accesible y, por qué no, más divertido.

#Google #Stitch #InteligenciaArtificial #DiseñoWeb #UIUX #DesarrolloWeb #IA #HerramientasDigitales #Diseño #UX #Tecnología

Si te mueves en el mundo de la inteligencia artificial, seguro que ya te has dado cuenta de algo: cada semana aparece un modelo nuevo. Que si GPT, que si Claude, que si Gemini… y al final acabas con mil APIs, claves y facturas diferentes. Aquí es donde entra OpenRouter, una herramienta que básicamente hace de “hub” universal para modelos de IA.

OpenRouter es una plataforma que te permite acceder a cientos de modelos de inteligencia artificial desde una única API. Sí, una sola clave para gobernarlos a todos. La idea es sencilla pero potente: en lugar de integrar cada proveedor por separado, usas OpenRouter como intermediario y listo.

Lo interesante es que no solo simplifica el trabajo, sino que también optimiza costes y rendimiento. La propia plataforma puede enrutar tus peticiones al modelo más adecuado según precio, velocidad o disponibilidad, algo clave cuando trabajas con apps o automatizaciones a escala.

Además, funciona con una barbaridad de modelos (más de 300 y más de 60 proveedores), lo que significa que puedes probar, comparar y cambiar de IA sin tocar prácticamente tu código. Esto es oro puro para desarrolladores, startups y gente que está experimentando con productos basados en IA.

Otro punto fuerte es que OpenRouter es compatible con la API de OpenAI, así que si ya has trabajado con ChatGPT o herramientas similares, la curva de aprendizaje es mínima. Cambias la URL, tu API key y a correr.

También mola su sistema de créditos: en lugar de pagar suscripciones individuales por cada modelo, compras saldo y lo usas donde quieras. Esto hace que tengas más control sobre el gasto, especialmente si estás testeando diferentes modelos o construyendo prototipos.

Y ojo, porque esto no es solo para developers hardcore. Cada vez más herramientas y apps integran OpenRouter por debajo, lo que significa que indirectamente lo estás usando sin darte cuenta. De hecho, ya hay cientos de miles de aplicaciones funcionando sobre esta infraestructura.

En resumen, OpenRouter es como el “Spotify de las IA”: eliges el modelo que quieras, cuando quieras, sin casarte con ninguno. Y en un mundo donde la IA cambia cada mes, esa flexibilidad es justo lo que necesitas.

#OpenRouter #InteligenciaArtificial #IA #MachineLearning #Desarrollo #APIs #GPT #Claude #Gemini #Programacion #Tech #AItools

Si te estás adentrando en el mundo de la inteligencia artificial y los modelos de lenguaje, hay un repositorio que literalmente te puede ahorrar meses de búsqueda y experimentación: awesome-llm-apps. ¿Por qué? Porque reúne más de 100 aplicaciones reales construidas con LLMs listas para explorar, ejecutar y modificar.

Detrás de esta colección está Shubham Saboo, y la propuesta es tan simple como poderosa: no limitarse a explicar qué es un LLM, sino mostrarte cómo se usa en el mundo real. Aquí vas a encontrar desde asistentes inteligentes que automatizan tareas hasta sistemas multiagente donde varias IAs colaboran entre sí, pasando por aplicaciones con memoria persistente, integraciones con APIs, chatbots avanzados, herramientas con voz y proyectos que utilizan RAG (Retrieval-Augmented Generation) para consultar información externa de forma inteligente.

Lo interesante no es solo la cantidad, sino la variedad. Hay ejemplos que trabajan con modelos comerciales y open source, patrones de arquitectura reutilizables, estructuras de proyecto bien organizadas y documentación suficiente para que puedas clonar el repositorio y empezar a experimentar en cuestión de minutos. Es como tener un laboratorio completo de IA listo para desmontar pieza por pieza.

Si eres desarrollador, estudiante o simplemente alguien curioso que quiere ir más allá del típico “hazme un prompt”, este repositorio te permite entender cómo se construyen productos reales basados en LLMs. Ves cómo se gestionan las conversaciones, cómo se implementa memoria, cómo se coordinan agentes autónomos y cómo se integran herramientas externas. Es aprendizaje práctico, directo al código.

En resumen, más de 100 apps de LLM en un solo lugar significa exposición masiva a casos de uso reales. Y cuando estás empezando en IA, eso es oro puro: inspiración, estructura y ejemplos concretos que puedes adaptar a tus propios proyectos sin empezar desde cero.

#IA #MachineLearning #LLM #GitHub #Desarrollo #OpenSource #InteligenciaArtificial #AIApps #AgentesIA #RAG

Si te interesa el mundo de los agentes de inteligencia artificial y quieres entender cómo funcionan realmente por dentro, esta información te va a encantar. Microsoft ha lanzado una nueva serie formativa en formato livestream titulada “Python + Agentes: Creando agentes y flujos de IA con Agent Framework”, y promete meterse de lleno en lo que de verdad importa cuando hablamos de AI agents modernos.

Ojo: el curso está impartido por Microsoft, nosotros solo compartimos la información para quienes quieran aprovechar la oportunidad.

Se trata de una serie de 6 livestreams en español, centrados en el tema de Agentes, donde durante dos semanas se exploran los conceptos base y los bloques prácticos que definen el comportamiento real de un agent construido en Python. No es solo teoría: es entender cómo piensan, cómo actúan y cómo se estructuran los flujos inteligentes sobre ellos.

La serie está pensada para cualquier persona que quiera comprender cómo funcionan los agents desde dentro. Aquí se habla de tool calling real, de cómo gestionan memoria y contexto, de cómo se construyen workflows por encima del agent y de cómo se conectan con herramientas externas.

Durante los directos aprenderás a registrar y estructurar tools correctamente, conectar servidores MCP locales, añadir contexto utilizando built-in providers, comparar distintas estrategias de memory y monitorear el comportamiento del agente usando OpenTelemetry. Además, se aborda algo clave en cualquier sistema de IA actual: cómo evaluar la seguridad y la calidad del output generado por el agent.

Todos los ejemplos se desarrollan en Python en vivo, y el código se comparte para que puedas ejecutarlo por tu cuenta. También puedes seguir paso a paso utilizando GitHub Models y GitHub Codespaces, lo que facilita muchísimo la práctica sin necesidad de montar entornos complejos desde cero.

Y si te quedas con dudas, después de cada stream puedes participar en office hours diarias dentro del Microsoft Foundry Discord, donde podrás hacer preguntas y profundizar en los temas tratados.

Si todavía estás empezando desde cero en el mundo de la IA generativa con Python, Microsoft recomienda comenzar primero con su serie “Python + AI” de 9 partes, donde cubren fundamentos como LLMs, modelos de embeddings, RAG, tool calling, MCP y mucho más.

En definitiva, es una oportunidad muy interesante para quienes quieren ir más allá del prompt y empezar a construir agentes reales, con estructura, memoria, herramientas y capacidad de integrarse en flujos de trabajo complejos. Si estás explorando el universo de los AI agents, esta serie puede marcar un antes y un después en tu curva de aprendizaje.

#Python #InteligenciaArtificial #AIAgents #MachineLearning #Microsoft #AgentFramework #GenerativeAI #Desarrollo #Programación #LLM #RAG #OpenTelemetry #TechEvents #Livestream

¿Alguna vez quisiste leer documentación completa de un repositorio sin perder horas escarbando en código y README? Pues DeepWiki es como un asistente mágico que lo hace por ti. En su versión web puedes buscar cualquier repo público de GitHub y obtendrás una especie de Wikipedia tech del código: explicaciones de funciones, diagramas, resúmenes y hasta conversaciones con IA sobre cómo funciona todo.

La idea es tan simple como genial: DeepWiki analiza los ficheros de tu repositorio (código fuente, README, etc.) y crea una documentación estructurada que puedes leer y consultar con lenguaje natural. Además, puedes hacerle preguntas directas sobre el repo y recibir respuestas basadas en el contenido real.

Truco rápido: si tu repo ya está indexado (o lo indexas), puedes simplemente cambiar en la URL la parte que dice “github.com” por “deepwiki.com”. Por ejemplo:
https://github.com/usuario/mi-proyecto → https://deepwiki.com/usuario/mi-proyecto
y ¡bum! ya estás viendo la documentación generada.

Ten en cuenta que si el repo aún no está indexado, DeepWiki puede pedirte una dirección de correo (o hacer el proceso automático en unos minutos). También hay extensiones y scripts (incluidas opciones para Chrome o tampermonkey) que añaden un botón directo en las páginas de GitHub para saltar a DeepWiki sin escribir nada.

En resumen: si quieres ahorrar tiempo entendiendo proyectos complejos, compartir conocimiento con tu equipo o simplemente explorar código con IA, DeepWiki es como tener un copiloto que convierte repos en documentación útil sin que tú tengas que escribir una sola línea.

#DeepWiki #DocumentaciónAI #RepositoriosGitHub #IA #GitHubDocs #DevTools #AIparaDesarrolladores #CódigoAbierto