• ASPECT
  • SCALING
  • VISUAL
  • HUMAN

Responsive Layouts testen mit der DummyImage MCP

Verbinden Sie DummyImage mit Ihrem KI-Client, um Platzhalter-Assets zu erstellen. Nach der Verbindung können Sie gezielt Dimensionen anfordern, um zu sehen, wie Ihre UI mit verschiedenen Seitenverhältnissen umgeht.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie kann ich KI für responsive Layouts nutzen?

Lassen Sie Ihre KI über DummyImage Bilder mit exakten Breiten und Höhen generieren. So können Sie spezifische Seitenverhältnisse in Ihre Container einfügen und prüfen, ob Ihr Design auf Mobilgeräten oder Desktops korrekt dargestellt wird. Die Ergebnisse sehen Sie unten.

Testergebnisse

Was diese Bilder bewirken

Die KI übernimmt die Bildgenerierung, damit Sie sich auf das Layout konzentrieren können.

ASPECT

Seitenverhältnis prüfen

Die KI nutzt generate_image, um Assets zu erstellen, die exakt Ihren Vorgaben entsprechen. Prüfen Sie so, ob ein 16:9 Bild oder ein 1:1 Quadrat perfekt in Ihren Container passt.

SCALING

Container-Verhalten

Durch die Verwendung fester Dimensionen sehen Sie sofort, ob Ihr CSS das Skalieren der Bilder korrekt handhabt. So finden Sie Überlaufprobleme, bevor Sie die finalen Assets festlegen.

VISUAL

Platzhalter-Genauigkeit

Die KI liefert saubere, maßstabsgetreue Platzhalter. Das stellt sicher, dass Ihr Layout-Test auf realen räumlichen Bedingungen basiert.

HUMAN

Manuelle Anpassungen

Die KI liefert die Bilder, aber Sie passen Ihr CSS oder die Grid-Einstellungen an. Sie entscheiden, wie das Layout auf die von der KI erstellten Assets reagiert.

Der Ablauf

Was Ihre KI bei einer Anfrage tut.

Die KI übernimmt die komplexe Berechnung der Dimensionen und die Erstellung der Assets.

  1. Dimensionen analysieren

    Ihr Agent liest Ihre Anfrage nach einer bestimmten Größe, zum Beispiel ein Hochformat von 400x600 Pixeln. Er extrahiert die Werte, um den Tool-Aufruf vorzubereiten.

    generate_image

  2. Generierung ausführen

    Die KI ruft das Tool auf, um das Bild mit der exakten Breite und Höhe zu erstellen. So wird sichergestellt, dass der Platzhalter genau die richtige Größe für Ihren Test hat.

    generate_image

  3. Asset bereitstellen

    Die KI gibt den Bildlink oder die Bilddaten an Ihr Chat-Interface zurück. Sie können diese direkt in Ihrer lokalen Entwicklungsumgebung verwenden.

    generate_image

  4. Anforderungen verfeinern

    Wirkt der Container zu eng, weisen Sie die KI an, ein anderes Verhältnis zu probieren. Der Prozess wird mit den neuen Vorgaben wiederholt.

    generate_image

Probieren Sie es

Kopieren Sie diese Befehle zum Start.

Nutzen Sie diese Prompts, um sofort loszulegen.

Startpunkte

Passen Sie die Dimensionen und Beschreibungen einfach an Ihre UI-Anforderungen an.

DummyImage Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  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 — DummyImage capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "dummyimage-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"
    }
  }
}
In den Chat kopieren04

  • Erstelle ein 1920x1080 Platzhalterbild für ein Hero-Banner.

  • Ich benötige ein quadratisches 1:1 Bild mit 500x500 Pixeln für eine Produktkarte.

  • Erstelle ein vertikales 300x600 Bild, um einen Sidebar-Container zu testen.

  • Generiere ein 400x200 Bild, um zu sehen, wie mein Mobile-Grid mit breiten Seitenverhältnissen umgeht.

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

Starten Sie hier

DummyImage einmal verbinden, dann fragen.

Klicken Sie einfach auf den Link, um den MCP mit Ihrem Client zu verbinden. Ihre Zugangsdaten bleiben verschlüsselt und Sie können sofort mit der Bildgenerierung beginnen.

DummyImage mit Ihrer KI verbinden

FAQ

Verhalten und Funktionen

  • 01

    Kann die KI meinen CSS-Code direkt ändern?

    Nein. Die KI generiert lediglich die Bilder. Sie müssen die Bilder manuell in Ihren Code oder Ihre Design-Dateien einbinden.

  • 02

    Erstellt die KI echte Fotografien?

    Nein. Dieses Tool dient dazu, maßstabsgetreue Platzhalterbilder für Layout-Tests zu erstellen.

  • 03

    Kann ich spezifische Farben für die Platzhalter anfordern?

    Ja, Sie können Farbwünsche in Ihren Prompt schreiben, und die KI wird versuchen, diese im generierten Bild umzusetzen.

  • 04

    Speichert die KI diese Bilder auf meiner Festplatte?

    Nein. Die KI stellt die Bilder über das Chat-Interface bereit. Sie müssen diese selbst herunterladen oder speichern.

  • 05

    Kann die KI animierte GIFs erstellen?

    Nein. Das Tool ist auf statische Bilder beschränkt, um Seitenverhältnisse und Skalierung zu testen.

  • Weitere Fragen zu DummyImage? Die Connector-Seite liefert Antworten. Alle Funktionen des DummyImage Connectors ansehen

Verbinde DummyImage mit Claude, Cursor, ChatGPT & mehr