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

Si te gustan las interfaces limpias, ordenadas y con ese aspecto de «todo está en su sitio», esta skill para Cursor te puede interesar bastante.

Scandinavian Design sirve para aplicar automáticamente un sistema visual inspirado en el diseño escandinavo a un proyecto web. La idea es sencilla: quitar ruido visual y conseguir una interfaz mucho más limpia, con una base en blanco y negro, tipografías sans-serif, espacios generosos y un uso más cuidado de las imágenes.

Vamos, llevar un poco de ese estilo IKEA al desarrollo web. 😄

Lo interesante es que no se limita a decirle a la IA «hazlo minimalista». La skill está pensada para trabajar sobre un código existente y rediseñar su aspecto visual. El repositorio incluye además diez demos utilizadas para probar y corregir el resultado tanto en escritorio como en móvil.

Para instalarla solo tienes que ejecutar:

npx skills add ericzakariasson/scandinavian-design

Después puedes invocar /scandinavian-design sobre la superficie que quieras rediseñar.

Puede ser especialmente útil cuando tienes una web funcional pero visualmente demasiado cargada y quieres darle una vuelta rápida sin empezar el proyecto desde cero.

Eso sí, minimalismo no significa simplemente poner todo blanco y quitar elementos. Lo interesante está en conseguir que la jerarquía visual, los espacios, la tipografía y las imágenes trabajen juntos para que la interfaz respire.

Una herramienta bastante curiosa para quienes estamos utilizando IA para acelerar el diseño y desarrollo de interfaces.

Ver Scandinavian Design en GitHub

#DiseñoWeb #DiseñoMinimalista #ScandinavianDesign #Cursor #IA #InteligenciaArtificial #WebDesign #Frontend #Programacion #UX #UI #GitHub #DesarrolloWeb

Encontrar una buena tipografía puede cambiar por completo un diseño. A veces no necesitas complicarte con composiciones imposibles ni llenar el proyecto de recursos gráficos: una fuente bien elegida puede hacer prácticamente todo el trabajo.

Esta colección reúne varias tipografías modernas con estilos diferentes, pero con algo en común: funcionan especialmente bien cuando buscamos diseños actuales, limpios y con personalidad.

Son fuentes que pueden encajar perfectamente en proyectos de branding, diseño editorial, carteles, redes sociales, presentaciones o páginas web. Algunas pueden funcionar como protagonistas de un diseño, mientras que otras son más interesantes para titulares, logotipos o pequeños detalles que necesitan destacar.

Una de las ventajas de trabajar con tipografías de este estilo es que permiten conseguir un aspecto contemporáneo sin caer necesariamente en el típico diseño minimalista que parece hecho con la misma plantilla de siempre. Cambiar el peso, el tamaño, el espaciado entre letras o combinar una tipografía llamativa con otra más sencilla puede dar resultados muy diferentes.

Y aquí está la gracia: no se trata simplemente de descargar muchas fuentes y tenerlas instaladas en el ordenador. Lo interesante es aprender a elegir la tipografía adecuada para cada proyecto.

Una fuente geométrica puede transmitir tecnología y precisión, mientras que una tipografía más experimental puede aportar personalidad y convertirse prácticamente en el elemento principal de la composición. También podemos jugar con mayúsculas, tamaños exagerados y mucho espacio en blanco para conseguir ese aspecto editorial que tanto se está utilizando actualmente.

Si trabajas habitualmente con Photoshop, Illustrator, Figma, Canva o cualquier otra herramienta de diseño, tener una pequeña colección de buenas tipografías modernas puede ahorrarte bastante tiempo cuando necesitas encontrar rápidamente una fuente que funcione.

Eso sí, antes de utilizarlas en un proyecto comercial conviene revisar siempre la licencia de cada tipografía. Que una fuente pueda descargarse gratis no significa necesariamente que pueda utilizarse libremente en trabajos comerciales.

En definitiva, una buena colección de fuentes no consiste en tener cientos de tipografías que nunca vas a utilizar. Consiste en encontrar aquellas que realmente pueden aportar algo a tus diseños y saber cuándo utilizarlas.

kanile

Bino Fimenk

Zegion

Regaris

Kovela

#Tipografias #Fuentes #Tipografia #DiseñoGrafico #Diseño #GraphicDesign #Typography #Fonts #DiseñoWeb #Branding #Figma #Illustrator #Photoshop #RecursosDeDiseño #DiseñoDigital

Se acabó el piloto automático, gracias al piloto automático.

Claude Code tiene un modo llamado Auto Mode que, básicamente, permite que Claude deje de preguntarte cada dos minutos si puede hacer algo.

¿Puedo abrir este archivo? Sí/No.
¿Puedo modificar este script? Sí/No.
¿Puedo ejecutar este comando? Sí/No.

Cuando activas Auto Mode, Claude puede tomar esas decisiones de forma automática. Pero aquí viene la parte interesante: no está completamente solo. Hay un agente clasificador que analiza las acciones y determina si pueden ser destructivas o peligrosas.

Hasta ahora, en modo manual, la última palabra la tenías tú. Con Auto Mode, la tiene otro agente.

Y a partir del 14 de agosto, Auto Mode llegará activado por defecto en las sesiones Pro, Max y Team.

¿Y por qué dice Anthropic que automatizar las aprobaciones puede ser más seguro?

Porque hay un pequeño problema con los humanos: nos cansamos.

Si Claude te pregunta constantemente «¿puedo hacer esto?», llega un momento en el que tu cerebro entra en modo automático y empiezas a responder que sí sin leer realmente qué está haciendo.

Sí.
Sí.
Sí.
Sí.

Es exactamente lo mismo que hacemos con las políticas de privacidad y los términos y condiciones. Nadie los lee. Ves el botón, pulsas «Aceptar» y a otra cosa.

Anthropic ha puesto números al asunto. En una prueba con más de 1.053 testers profesionales, solo el 13,6 % consiguió detectar un comando peligroso, mientras que el agente clasificador lo identificó en el 89 % de los casos.

Y aquí está lo realmente interesante.

La discusión no es simplemente si debemos confiar más o menos en la IA. Es si tiene sentido mantener a una persona tomando decisiones de seguridad que, después de cientos de confirmaciones, probablemente acabará aceptando sin mirar.

Porque un «sí» humano dado por pura inercia tampoco es precisamente un mecanismo de seguridad.

La lectura importante para quienes trabajamos con IA es bastante sencilla: si vas a supervisar a un agente, supervisa de verdad. Lee lo que hace, entiende las consecuencias y presta atención.

Pero si sabes que después de 200 confirmaciones vas a empezar a pulsar «sí» como un NPC, quizá sea mejor delegar esas decisiones en un sistema especializado.

Eso sí: un agente también puede equivocarse.

Así que el futuro no parece ser «la IA lo hace todo y nosotros miramos». Más bien parece ser decidir qué merece nuestra atención y qué podemos dejar que la IA gestione por nosotros.

Y eso sí que tiene bastante más sentido que pasarnos el día pulsando «Sí, Claude, hazlo».

#Claude #ClaudeCode #Anthropic #AutoMode #InteligenciaArtificial #IA #Programación #DesarrolloSoftware #AgentesIA #AIcoding

Qué ocurre cuando mezclas a Chostakóvich, una horda de soldados surgida de las tinieblas y una animación visualmente espectacular? El resultado es DANSE MACABRE, un cortometraje dirigido por Hisko Hulsing que convierte la guerra en una auténtica pesadilla visual.

Durante sus cinco minutos, el corto nos mete de lleno en un desfile de violencia, batallas y destrucción. La música de Dmitri Chostakóvich acompaña las imágenes como si fuera una marcha inevitable hacia el caos. Y lo interesante es que no habla únicamente de guerras del pasado: la película busca representar también los conflictos actuales y los que todavía están por llegar.

Pero si algo llama especialmente la atención desde el punto de vista del diseño y la animación es su técnica. Más de 80 personas, repartidas entre cuatro estudios de animación, trabajaron para crear estas imágenes combinando pintura al óleo, rotoscopia, animación 2D y 3D. Una mezcla poco habitual que consigue un acabado oscuro, pictórico y muy físico.

El resultado parece por momentos un cuadro en movimiento, pero también tiene la energía de una superproducción de animación. Una demostración de cómo diferentes técnicas pueden combinarse para conseguir una identidad visual muy potente.

DANSE MACABRE es una de esas piezas que merece la pena ver no solo por lo que cuenta, sino por cómo está hecha. Y hay tiempo para hacerlo: el cortometraje está disponible hasta el 24 de agosto de 2026.

#DANSEMACABRE #Animación #Animation #HiskoHulsing #Cine #Cortometraje #Diseño #Arte #Rotoscopia #Animación2D #Animación3D #PinturaAlÓleo #Guerra

Diseñar una interfaz en una herramienta y después pasarla al desarrollador siempre ha tenido un pequeño problema: el diseño y el código viven en mundos distintos. pen.dev propone eliminar ese salto y poner el diseño directamente donde ya estamos programando.

La idea es bastante sencilla y, a la vez, muy interesante: pen.dev es un canvas de diseño basado en IA que vive dentro del entorno de desarrollo. El proyecto se guarda en el propio código y permite trabajar con el diseño y la implementación prácticamente uno al lado del otro. Actualmente funciona con entornos como Cursor y VS Code, además de otros IDE compatibles.

Aquí entra la parte que más nos interesa si programamos. Puedes diseñar una pantalla o un componente visualmente y después pedirle a la IA que genere el código correspondiente. La documentación muestra ejemplos como convertir un diseño en un componente React, generar una página de Next.js o crear componentes utilizando Tailwind CSS. También permite hacer el camino inverso: llevar código existente al canvas para trabajar sobre él visualmente.

Todo esto se apoya en un formato de diseño abierto basado en archivos .pen, pensado para vivir dentro del propio proyecto. Es decir, el diseño deja de ser un archivo perdido en otra herramienta y pasa a formar parte del workflow de desarrollo.

Y aquí está probablemente lo más interesante de pen.dev: no intenta ser simplemente otro Figma. Su planteamiento es bastante más cercano al de un entorno de programación con capacidades de diseño. La IA puede ayudarte a crear pantallas, explorar diferentes propuestas y trabajar en varios flujos en paralelo.

Además, existe una aplicación de escritorio para Windows, macOS y Linux, extensiones para diferentes IDE y una CLI que permite utilizar las capacidades de diseño asistidas por IA desde el terminal.

¿Va a sustituir a las herramientas tradicionales de diseño? Todavía es pronto para decirlo. Pero el concepto resulta muy interesante: diseñar, programar y utilizar IA dentro del mismo flujo de trabajo, sin estar continuamente exportando diseños, copiando medidas o intentando explicar al desarrollador cómo debería quedar una interfaz.

Para quienes mezclamos diseño gráfico, UI y programación, pen.dev es una herramienta que merece la pena tener en el radar.

Web: pen.dev

#penDev #DiseñoWeb #DiseñoUI #UX #Programacion #IA #InteligenciaArtificial #Frontend #WebDevelopment #React #Cursor #VSCode #DiseñoDigital #DesignToCode #AIDesign

Si te gustan los gradientes pero acabas perdiendo más tiempo buscando una combinación de colores decente que utilizándola en tu proyecto, Gradient Studio merece un vistazo.

Esta herramienta creada por Amit Gajare funciona como un generador de gradientes CSS procedurales. En lugar de ofrecerte simplemente una colección de degradados para copiar, genera nuevas combinaciones y les añade diferentes tratamientos de luz para conseguir fondos bastante más interesantes.

Puedes trabajar con paletas completas, duotono o monocromáticas y después aplicar efectos como mesh glow, aurora, bokeh, film grain, holográfico, prismas, nubes o rayos. Hay más de 24 tratamientos disponibles, así que las posibilidades son bastante amplias.

Lo mejor llega cuando encuentras uno que funciona. Puedes bloquear la paleta, probar diferentes efectos, navegar por el historial de resultados y, cuando lo tengas, copiar directamente el código. Gradient Studio permite exportarlo como CSS, Tailwind o SCSS, por lo que no tienes que reconstruir el gradiente a mano en tu proyecto.

Es especialmente interesante para diseñar fondos de hero sections, landing pages, portfolios, webs de agencias o interfaces en modo oscuro. También puede servir como punto de partida para una identidad visual o simplemente para generar rápidamente una atmósfera visual que luego puedas desarrollar en Figma, Photoshop o tu editor de código.

Además, es gratis, no requiere crear una cuenta y sus gradientes pueden utilizarse tanto en proyectos personales como comerciales.

En resumen, Gradient Studio es una de esas pequeñas herramientas que merece estar en los marcadores de cualquier diseñador web o desarrollador frontend. Generas, ajustas, copias el código y sigues trabajando. Sin complicaciones.

#GradientStudio #Gradientes #CSS #WebDesign #UI #UX #Frontend #TailwindCSS #SCSS #GraphicDesign #WebDevelopment #DesignTools

Si trabajas con JavaScript o TypeScript y necesitas meter gráficos en una aplicación, seguramente ya te hayas encontrado con un montón de librerías que hacen prácticamente lo mismo. TanStack Charts intenta darle otra vuelta al asunto.

El proyecto forma parte del ecosistema TanStack y propone una forma bastante flexible de construir visualizaciones a partir de una especie de “gramática” de gráficos. En lugar de limitarte a configurar un tipo de gráfico concreto, puedes combinar diferentes elementos, escalas e interacciones para crear visualizaciones más personalizadas.

La idea está basada en TypeScript y utiliza primitivas de D3 cuando necesitas funcionalidades más avanzadas. Puedes empezar con gráficos habituales como barras o líneas y, si el proyecto se complica, añadir escalas o algoritmos específicos de D3 sin tener que cambiar completamente de sistema.

Otro punto interesante es que la definición del gráfico es independiente del framework. El mismo gráfico puede utilizarse con React, Vue, Angular, Svelte, Solid, Preact, Lit, Alpine e incluso con JavaScript sin framework. También contempla renderizado mediante SVG y, de forma opcional, Canvas.

Además, no se queda únicamente en pintar barras y líneas. TanStack Charts incorpora responsive design, márgenes automáticos, temas, tooltips, animaciones, interacción, accesibilidad, renderizado en servidor (SSR) y exportación. Es decir, intenta cubrir buena parte de lo que necesitas cuando un gráfico pasa de ser una simple demo a formar parte de una aplicación real.

Eso sí, hay una advertencia importante: TanStack Charts 0.6.5 está actualmente en fase pre-alpha y su API puede cambiar, por lo que sus propios responsables indican que todavía no está preparado para producción.

Aun así, es un proyecto muy interesante para seguir de cerca, especialmente si trabajas con TypeScript y necesitas visualizaciones que vayan más allá del típico gráfico de barras. Y si ya conoces el ecosistema TanStack, merece la pena echarle un vistazo.

Puedes consultar el código en GitHub de TanStack Charts y la documentación oficial en TanStack Charts.

#TanStack #TanStackCharts #TypeScript #JavaScript #D3js #DataVisualization #DataViz #WebDevelopment #Frontend #React #Angular #Vue #Svelte #WebDesign #Programming

Copiar un diseño puede salir muy caro. Y no hablamos solo de la reputación, sino también del bolsillo. El Ayuntamiento de Don Benito ha sido condenado a pagar 6.500 euros al diseñador Francisco Javier Torres tras considerar la Justicia que el cartel utilizado para promocionar su Carnaval de 2025 era, en esencia, un plagio del cartel que el artista creó para el Carnaval de Santa Cruz de Tenerife en 2016.

La sentencia, que salió hace unos días, deja claro que cambiar algunos colores, modificar el fondo o añadir pequeños detalles no convierte una obra copiada en una creación original. Lo importante es la composición, la idea visual y los elementos que hacen reconocible el trabajo del autor. En este caso, el tribunal concluyó que las diferencias eran superficiales y que el diseño mantenía la estructura y personalidad de la obra original.

Además de la indemnización, el Ayuntamiento deberá retirar el cartel, destruir las copias existentes y publicar la resolución judicial. Un desenlace que refuerza algo que muchos diseñadores llevan años reclamando: el trabajo creativo está protegido por la Ley de Propiedad Intelectual y utilizar una obra ajena sin permiso puede tener consecuencias legales importantes.

Lo curioso es que las propias bases del concurso del Carnaval de Don Benito exigían expresamente que las obras presentadas fueran originales y no supusieran copia o plagio de trabajos de otros autores.

Este caso también sirve para recordar que, en plena era de la inteligencia artificial, los bancos de imágenes y las referencias constantes en internet, inspirarse no significa copiar. Tomar ideas es parte del proceso creativo, pero reproducir una obra con cambios mínimos sigue siendo plagio. La creatividad no consiste en cambiar el color de un dibujo, sino en aportar una propuesta propia.

#DiseñoGráfico #Plagio #PropiedadIntelectual #DerechosDeAutor #Creatividad #Diseño #Carnaval #Carteles #Branding #Diseñadores

Fuente: graffica

Si trabajas con Figma y quieres darle un poco más de vida a tus diseños, los degradados son un recurso que nunca falla. El problema es que crear algo que quede realmente bien puede llevar más tiempo del que parece. Para eso existen plugins como Mesh Gradient y Noisy Gradients, dos opciones interesantes para experimentar con fondos y composiciones más llamativas.

Mesh Gradient está pensado para crear degradados tipo mesh, esos fondos con transiciones suaves entre diferentes colores que se han convertido en un recurso habitual en interfaces, landing pages, presentaciones y piezas gráficas. Es una forma rápida de conseguir un resultado más orgánico y menos plano que el típico degradado lineal.

Por otro lado, Noisy Gradients añade una vuelta de tuerca al concepto incorporando ruido a los degradados. El resultado son fondos con una textura más granulada y con un aspecto menos digital, algo que puede funcionar especialmente bien en diseños modernos, carteles, portadas o interfaces que buscan un acabado más experimental.

Lo interesante es que puedes utilizar ambos plugins como punto de partida para generar fondos y después seguir trabajando sobre ellos directamente en Figma. Son recursos sencillos, pero pueden ahorrarte bastante tiempo cuando necesitas crear una composición visual atractiva sin empezar desde cero.

Si te gusta experimentar con el color, las texturas y los fondos abstractos, merece la pena tenerlos en tu caja de herramientas de Figma. A veces, un buen degradado es justo lo que necesita un diseño para dejar de parecer tan plano.

#Figma #FigmaPlugins #DiseñoGráfico #DiseñoUI #UXDesign #GraphicDesign #MeshGradient #NoisyGradients #Gradientes #DiseñoDigital #RecursosDiseño #DiseñoWeb

Si trabajas con Photoshop y te gusta conseguir un acabado más artístico y menos digital, este set de brushes puede ser un recurso bastante interesante para tener a mano.

Su autor (HoustonSharp) ha recopilado durante los últimos años los pinceles que utiliza habitualmente, reuniendo brushes procedentes de diferentes fuentes y organizándolos según las características y propiedades de cada uno. El objetivo principal es conseguir que muchos de ellos imiten el aspecto y la sensación de los medios tradicionales, algo especialmente útil para quienes buscan darle a sus ilustraciones un acabado más cercano al dibujo y la pintura tradicional.

El pack incluye una buena variedad de pinceles, por lo que el propio autor recomienda configurar los presets de Photoshop en formato de lista pequeña o grande para poder identificar mejor las categorías y nombres de cada brush. También resulta recomendable tener abierta la ventana de configuración de pinceles, ya que permite comprobar rápidamente cómo se comporta cada uno y visualizar el tipo de trazo que genera.

Un detalle interesante es que, aunque los pinceles ya están organizados por categorías, el autor recomienda dividir el pack en varios grupos más pequeños. Así será mucho más sencillo encontrar el brush que necesitas sin tener que navegar por una lista interminable. Si en algún momento necesitas un pincel de otra categoría, simplemente puedes cargar el conjunto correspondiente.

En definitiva, es un pack pensado para quienes trabajan habitualmente con Photoshop y quieren ampliar su biblioteca de herramientas con pinceles que aporten diferentes texturas y acabados. Una recopilación especialmente interesante para ilustradores, diseñadores y artistas digitales que buscan acercarse un poco más al aspecto de las técnicas tradicionales.

El pack y los brushes pertenecen a HoustonSharp. Desde aquí simplemente compartimos el recurso porque nos parece interesante para la comunidad de diseño e ilustración.

#Photoshop #Brushes #BrushesPhotoshop #PincelesPhotoshop #DiseñoGrafico #DiseñoDigital #IlustracionDigital #Ilustracion #ArteDigital #DigitalArt #RecursosDiseño #RecursosGraficos #GraphicDesign #PhotoshopBrushes