¿Puede la IA cambiar mi código CSS directamente?

No. La IA solo genera las imágenes. Debes aplicar las imágenes manualmente en tu código o archivos de diseño.

¿La IA genera fotografías reales?

No. Esta herramienta sirve para generar imágenes de marcador con dimensiones precisas para pruebas de diseño.

¿Puedo solicitar colores específicos para los marcadores?

Sí, puedes incluir preferencias de color en tu prompt y la IA intentará incluirlas en la imagen generada.

¿La IA guardará estas imágenes en mi disco duro?

No. La IA entrega las imágenes a través de la interfaz de chat. Tú eres responsable de descargarlas o guardarlas.

¿Puede la IA crear GIFs animados?

No. La herramienta se limita a imágenes estáticas para probar relaciones de aspecto y escalado.

ASPECTOESCALADOVISUALHUMANO

ASPECTO
ESCALADO
VISUAL
HUMANO

Cómo probar diseños responsivos con tu IA

Conecta DummyImage a tu cliente de IA para crear recursos de prueba. Una vez conectado, puedes solicitar dimensiones específicas para ver cómo responde tu interfaz a diferentes relaciones de aspecto.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo usar la IA para probar diseños responsivos?

Pide a tu IA que genere imágenes con anchos y altos específicos usando DummyImage. Así podrás insertar relaciones de aspecto exactas en tus contenedores y comprobar si el diseño se rompe en móviles o escritorio. Verás los resultados detallados más abajo.

Resultados de las pruebas

Lo que obtienes con estas imágenes

La IA se encarga de generar las imágenes para que tú te concentres en el diseño.

ASPECTO

Verificación de proporciones

La IA utiliza generate_image para crear recursos que cumplen con tus requisitos de ancho y alto. Puedes verificar si una imagen 16:9 o un cuadrado 1:1 encaja en tu contenedor.

ESCALADO

Comportamiento del contenedor

Al usar dimensiones exactas, compruebas si tu CSS gestiona correctamente el escalado de imágenes. Esto ayuda a detectar problemas de desbordamiento antes de usar los recursos finales.

VISUAL

Precisión de marcadores

La IA produce marcadores de posición limpios y con dimensiones precisas. Esto garantiza que las pruebas de diseño se basen en restricciones espaciales reales.

HUMANO

Ajustes manuales de diseño

La IA entrega las imágenes, pero tú sigues siendo quien ajusta el CSS o la cuadrícula. Tú decides cómo responde el diseño a los recursos creados por la IA.

El flujo

Qué hace tu IA cuando recibe la solicitud.

La IA realiza el trabajo pesado de calcular dimensiones y crear los recursos.

Analizar dimensiones
Tu agente lee tu solicitud de un tamaño específico, como una imagen vertical de 400x600. Extrae estos valores para preparar la llamada a la herramienta.
generate_image
Ejecutar generación
La IA llama a la herramienta para construir la imagen con el ancho y alto exactos solicitados. Esto asegura que el marcador tenga el tamaño correcto para tu prueba.
generate_image
Entregar recurso
La IA devuelve el enlace o los datos de la imagen a tu interfaz de chat. Luego puedes usar esto para alimentar tu entorno de desarrollo local.
generate_image
Refinar requisitos
Si el contenedor se ve muy apretado, le indicas a la IA que pruebe con otra proporción. El proceso se repite con las nuevas restricciones.
generate_image

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para comenzar de inmediato.

Puntos de partida

Cambia las dimensiones y descripciones para adaptarlas a tus necesidades de interfaz.

DummyImage Connector

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

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

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

1In Claude Desktop, open Settings → Connectors.
2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3Click Add and start a new chat — DummyImage capabilities are ready to use.

Configuración · claude_desktop_config.jsonCopiar

{
  "mcpServers": {
    "dummyimage-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"
    }
  }
}

Copia en el chat04

Genera una imagen de marcador de 1920x1080 para un banner principal.
Necesito una imagen cuadrada de 1:1 que sea de 500x500 píxeles para una tarjeta de producto.
Crea una imagen vertical de 300x600 para probar un contenedor lateral.
Genera una imagen de 400x200 para ver cómo mi cuadrícula móvil maneja relaciones de aspecto anchas.

Claude
ChatGPT
Cursor
VS Code
Windsurf
Claude Code
JetBrains
Cline

Empieza aquí

Conecta DummyImage una vez y luego pregunta.

Solo tienes que hacer clic en el enlace para conectar el MCP a tu cliente. Tus credenciales permanecen cifradas y podrás empezar a generar imágenes al instante.

Conectar DummyImage a tu IA

FAQ

Cómo funciona esta tarea

01
¿Puede la IA cambiar mi código CSS directamente?
No. La IA solo genera las imágenes. Debes aplicar las imágenes manualmente en tu código o archivos de diseño.
02
¿La IA genera fotografías reales?
No. Esta herramienta sirve para generar imágenes de marcador con dimensiones precisas para pruebas de diseño.
03
¿Puedo solicitar colores específicos para los marcadores?
Sí, puedes incluir preferencias de color en tu prompt y la IA intentará incluirlas en la imagen generada.
04
¿La IA guardará estas imágenes en mi disco duro?
No. La IA entrega las imágenes a través de la interfaz de chat. Tú eres responsable de descargarlas o guardarlas.
05
¿Puede la IA crear GIFs animados?
No. La herramienta se limita a imágenes estáticas para probar relaciones de aspecto y escalado.
¿Tienes más dudas sobre DummyImage? La página del conector tiene las respuestas. Ver todo lo que puede hacer el conector DummyImage

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