• RECURSOS
  • VARIEDAD
  • CONTEXTO
  • HUMANO

Cómo añadir imágenes de relleno a diseños UI con tu IA

Conecta Unsplash con tu cliente de IA para integrar imágenes reales en tus prototipos. Olvídate de los cuadros grises o los enlaces rotos.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo usar mi IA para añadir imágenes de relleno a mi UI?

Tu IA utiliza Unsplash para encontrar fotos de alta resolución, ya sean específicas o aleatorias, y te entrega las URLs directas para tu código. Obtendrás recursos listos para producción en lugar de marcadores genéricos. Esta guía explica cómo automatizar la obtención de tus recursos visuales.

Los resultados.

Dónde terminan tus recursos.

Qué sucede cuando ejecutas estos comandos.

RECURSOS

Enlaces directos de imagen

La IA encuentra fotos específicas y devuelve las URLs. Puedes pegarlas directamente en tus etiquetas img o en tu CSS.

VARIEDAD

Marcadores aleatorios

Si solo necesitas relleno genérico, la IA busca tomas de alta calidad. Esto hace que tus prototipos luzcan realistas.

CONTEXTO

Coherencia temática

La IA busca imágenes que coincidan con la descripción de tu interfaz. Obtendrás visuales que encajen con el estilo de tu app.

HUMANO

Selección manual

La IA te da los enlaces, pero tú decides qué imágenes encajan mejor con tu diseño. Mantienes el control creativo final.

El flujo

Lo que hace tu IA al recibir la solicitud.

La IA gestiona la búsqueda y recuperación para que no tengas que navegar por sitios web.

  1. Analizar requisitos

    Tu IA revisa la descripción de tu interfaz para saber si necesitas un tema específico o solo relleno general.

    search_photos
  2. Buscar visuales específicos

    La IA busca imágenes que coincidan con tus palabras clave, como 'arquitectura minimalista' o 'interior de cafetería'.

    search_photos
  3. Obtener relleno genérico

    Si no se solicita un tema concreto, la IA selecciona una imagen de alta calidad para ocupar el espacio.

    get_random_photo
  4. Entregar URLs

    La IA proporciona los enlaces directos de las imágenes para que los uses de inmediato en tus archivos de proyecto.

    search_photosget_random_photo

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para activar las herramientas de Unsplash.

Puntos de partida

Estos son ejemplos iniciales. Cambia el texto entre corchetes por tus necesidades de diseño reales.

Unsplash Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Unsplash capabilities are ready to use.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "unsplash-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp"
    }
  }
}
Copia en el chat04
  • Busca una foto de alta resolución de un espacio de trabajo moderno para mi prototipo de dashboard.

  • Consigue una foto aleatoria para usar como fondo en mi landing page.

  • Busca imágenes de 'paisajes de montaña' para completar la interfaz de mi app de viajes.

  • Necesito una imagen de relleno para el avatar de un usuario; busca una al azar.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Empieza aquí

Conecta Unsplash una vez y luego pregunta.

Una sola conexión vincula Unsplash con tu cliente de IA. Tus credenciales se mantienen cifradas y seguras en nuestro sistema.

Conectar Unsplash a tu IA

FAQ

Cómo funciona esta tarea.

  • 01

    ¿Puede la IA descargar las imágenes directamente a mi ordenador?

    No. La IA proporciona las URLs de las imágenes. Debes copiar esos enlaces en tu código o guardar los archivos tú mismo.

  • 02

    ¿Cambiará la IA la resolución de la imagen?

    No. La IA recupera los recursos de alta resolución disponibles a través de las herramientas de Unsplash.

  • 03

    ¿Puede la IA editar o recortar las fotos?

    No. La IA solo busca y proporciona enlaces a fotos existentes. No puede realizar manipulación de imágenes.

  • 04

    ¿Sabe la IA qué imágenes he usado ya?

    No. La IA trata cada solicitud como una búsqueda nueva, a menos que le proporciones el contexto de tu trabajo anterior.

  • 05

    ¿Puedo usar estas imágenes en un proyecto comercial?

    La IA proporciona los enlaces, pero tú eres responsable de cumplir los términos de la licencia de Unsplash para tu caso de uso específico.

Conecta Unsplash a Claude, Cursor, ChatGPT y más