Desktop-App

Design eines Insel-Abenteuerspiels

Entdecken Sie Harbor Skirmish, eine kleine Insel am Meer mit Routen über die Dächer, drei Waffenplätzen und einer verspielten First-Person-Oberfläche.

OpenDesignDesign & Produktion
Offiziell
Oberfläche eines Browsergames4 Screens
Design eines Insel-Abenteuerspiels: Inselübersicht und Startbildschirm
GPT 6 Astra · EvaluierungsbeispielScreenshot 1 von 4

LLM Arena Sep 2026

Fallnotizen
Modell
GPT 6 Astra
Design-Aufgabe
Erstelle Harbor Skirmish, ein spielbares Inselabenteuer mit Fortbewegung und wellenbasierten Kämpfen.
Ausgabe
Desktop-App

Geeignet für

  • Browsergame-PrototypenVerbinden Sie eine spielbare Szene mit ihrem Einstiegs- und Pausenzustand.
  • First-Person-OberflächenOrdnen Sie Informationen zu Bewegung, Gesundheit und Waffen rund um das Sichtfeld an.
  • Startbildschirme für SpieleStellen Sie das Szenario vor, ohne jeden Tastaturbefehl aufzulisten.

Wichtige Merkmale

  • Eine Insel vor dem KampfDie Einstiegsansicht führt Straßen, Dächer und das umgebende Meer ein.
  • Ein HUD mit freier MitteStatusinformationen befinden sich an den Rändern, sodass das Sichtfeld frei bleibt.
  • Ein verspielter PausenzustandEine geneigte Karte macht die Unterbrechung zu einem Teil der visuellen Identität.

Ein Insel-Abenteuerspiel-Design mit Einstieg am Meer

Harbor Skirmish stellt sein Szenario zunächst aus der Vogelperspektive vor, bevor der Spieler auf eine Straße versetzt wird. Der Titel füllt die linke Seite des Startbildschirms, während die Insel die rechte Seite einnimmt. Farbige Dächer, ein Uhrturm und die Uferpromenade sind gleichzeitig sichtbar. Dadurch erhält der Spieler ein Bild des Ortes, bevor die First-Person-Kamera diese Übersicht aufhebt.

Die cremefarbene, gelbe und dunkelgrüne Oberfläche erinnert eher an ein gedrucktes Urlaubsplakat als an ein militärisches Armaturenbrett. Die kurze Prämisse beschreibt eine widerspenstige Kanincheninvasion; die auffällige Schaltfläche Let’s Play bietet anschließend eine eindeutige nächste Aktion. Der Einstieg zeigt grundlegende Hinweise zur Bewegung und zum Zielen, während weiterführende Anweisungen von der zentralen Einladung getrennt sind.

Der vollständige Startbildschirm verbindet seinen Titel und die Spielaktion mit einer erhöhten Ansicht von Seabreeze Island.
Der vollständige Startbildschirm verbindet seinen Titel und die Spielaktion mit einer erhöhten Ansicht von Seabreeze Island.

Eine Karte ohne Kartenfenster

Die erhöhte Inselansicht erklärt die Beziehung zwischen Straßen und Dächern, ohne ein separates Diagramm hinzuzufügen. Der Turm und die dicht angeordneten Dächer bilden wiedererkennbare Formen, die auch auf Bodenebene zu sehen sind. Dies ist eine hilfreiche Einführung in das Szenario, macht jedoch nicht deutlich, dass jedes sichtbare Dach erreichbar ist.

Eine starke Startaktion

Let’s Play verwendet dasselbe Gelb, das später die ausgewählte Waffe kennzeichnet. Durch die geneigte Form und den versetzten Rahmen hebt sich die Schaltfläche vom ruhigeren Meer ab. Der umgebende Text ist so knapp, dass die Schaltfläche nicht mit einem vollständigen Steuerungshandbuch konkurrieren muss.

Eine konsequent fortgeführte Bildsprache

Das kleine Harbor Skirmish-Logo bleibt während des Spiels in der Ecke. Cremefarbene Tastenkappen, grüne Beschriftungen und die warme Akzentfarbe tauchen auch im HUD und auf der Pausenkarte wieder auf. Der Wechsel von einer Luftaufnahme zu einer First-Person-Szene führt daher keinen unverbundenen Oberflächenstil ein.

Ein First-Person-HUD rund um die Inselansicht anordnen

Während des Spiels bleibt die Mitte hauptsächlich der Straße und der Zielhilfe vorbehalten. Der Punktestand erscheint oben links, die Welle und die verbleibenden Gegner oben rechts sowie Ort und Geschwindigkeit nahe der oberen Mitte. Gesundheits- und Dash-Status befinden sich unten links; Waffe und Munition unten rechts.

Viele dieser Informationen liegen direkt über der Szene und nicht in markanten Feldern. Dadurch bleibt die Insel sichtbar, doch der Kontrast hängt vom Gebäude, Himmel oder Boden hinter der jeweiligen Beschriftung ab. Die cremefarbene Steuerungsleiste am unteren Rand verfolgt den entgegengesetzten Ansatz: Sie bietet den kleinen Tastenbeschriftungen einen einheitlichen Hintergrund, wo präzises Lesen wichtig ist.

Die vollständige First-Person-Ansicht hält die Straße zwischen den an den Rändern ausgerichteten Status- und Steuerungsgruppen sichtbar.
Die vollständige First-Person-Ansicht hält die Straße zwischen den an den Rändern ausgerichteten Status- und Steuerungsgruppen sichtbar.
Drei verschiedene Arten von Gameplay-Rückmeldung
AnzeigeWas sie vermitteltWarum die Unterscheidung wichtig ist
Punktestand und WelleFortschritt innerhalb des aktuellen lokalen DurchlaufsEin Sitzungspunktestand ist weder eine Modellbewertung noch ein gespeicherter Rekord.
Gesundheit und Dash ReadyÜberlebensstatus und eine verfügbare BewegungsaktionDie Dash-Beschriftung erklärt die Verfügbarkeit und nicht einen Erfolg.
Waffenname und MunitionDas ausgewählte Werkzeug und die dafür angezeigten MunitionswerteDer Name muss sich mit dem aktiven Platz ändern, nicht nur dessen Hervorhebung.

Waffen wechseln und aus der Pause zurückkehren

Die drei nummerierten Plätze bleiben als Ink Rifle, Scattergun und Paper Blade sichtbar. Durch Auswahl von 2 wechseln der aktive Platz und der Waffenname zu Scattergun. Diese doppelte Rückmeldung ist informativer als die bloße Änderung eines Rahmens: Sie kennzeichnet die Auswahl sowohl an der Kurzwahltaste als auch neben der Munitionsanzeige.

Die Pausenkarte bewahrt den aktuellen Punktestand, betont die Fortsetzung und bündelt zusätzliche Bewegungsanweisungen.
Die Pausenkarte bewahrt den aktuellen Punktestand, betont die Fortsetzung und bündelt zusätzliche Bewegungsanweisungen.
  1. Bewegung im Kontext erlernen

    Hinweise zu WASD, Schwingen, Springen und Rutschen befinden sich nahe dem unteren Rand der laufenden Szene. Der separate Hinweis Hold E to Grapple liegt näher an der Mitte. Diese Aufteilung hält die allgemeinen Steuerelemente verfügbar und versieht zugleich die Bewegungsmechanik mit einem stärker kontextbezogenen Hinweis, auch wenn mehrere gleichzeitige Hinweise weiterhin mit der Ansicht konkurrieren können.

  2. Pausieren, ohne das Szenario zu verlassen

    Escape öffnet Island time, eine cremefarbene Karte über einer unscharfen Version der Straße. Der aktuelle Punktestand bleibt innerhalb der Karte sichtbar. Da die darunterliegende Szene erkennbar bleibt, wirkt die Unterbrechung mit dem Durchlauf verbunden und nicht wie die Navigation zu einer separaten Einstellungsseite.

  3. Fortsetzen und Verlassen voneinander trennen

    Back to It ist die große gelbe Aktion, während Back to the island eine kleinere, unterstrichene Alternative darstellt. Wegen der ähnlichen Formulierung sollte der Unterschied sorgfältig geprüft werden: Die visuelle Hierarchie erleichtert das Erkennen der Fortsetzungsaktion, doch wörtlichere Beschriftungen würden die Mehrdeutigkeit für Personen verringern, denen das Erlebnis noch unbekannt ist.

Was dieses lokale Spielbeispiel demonstriert

Der bereitgestellte Export enthält ein lokales Einzelspielerspiel und eine gerenderte 3D-Umgebung. Der Start, der Wechsel der Waffenauswahl und das Öffnen des Pausenzustands wurden geprüft. Die Galerie ist weder ein Leistungsbenchmark noch ein vollständig absolvierter Spieldurchlauf oder ein Beleg dafür, dass jede Fortbewegungsmechanik auf jedem Gerät funktioniert. Es wurden weder ein Online-Mehrspielermodus noch ein Kontodienst oder eine gespeicherte Bestenliste verifiziert. Die Modellbezeichnung wurde aus dem bereitgestellten Dateinamen übernommen.

So erstellen Sie in OpenDesign ein Design für ein Insel-Abenteuerspiel

  1. OpenDesign herunterladen und installieren

    Desktop-App herunterladen, installieren und Einrichtung abschließen. Ein Projekt für das Design anlegen.

    OpenDesign herunterladen
  2. Einstiegs- und Spielansicht gemeinsam gestalten

    Beginnen Sie mit einer kleinen Insel und zwei Kamerazuständen. Sorgen Sie dafür, dass das wichtigste Wahrzeichen sowohl in der Übersicht als auch in der Ansicht auf Straßenebene sichtbar bleibt. Legen Sie die durchgängigen Oberflächenfarben fest, bevor Sie weitere Waffen oder Umgebungsdetails hinzufügen.

    Vorgeschlagener Prompt

    Erstelle das Design eines Insel-Abenteuerspiels für ein fiktives Browsergame namens Harbor Skirmish. Zeige auf dem Startbildschirm eine farbenfrohe Insel am Meer aus der Vogelperspektive, mit einem großen Titel auf der linken Seite und einer einzelnen gelben Schaltfläche „Los geht’s“. Verwende cremefarbene Flächen, dunkelgrüne Beschriftungen, versetzte Rahmen und sparsam eingesetzte geneigte Karten. Wechsle in eine First-Person-Straßenszene mit Informationen zu Punktestand und Welle am oberen Rand, Gesundheit und Dash-Status unten links sowie Waffe und Munition unten rechts. Behalte drei nummerierte Plätze für Tinten-Gewehr, Schrotflinte und Papierklinge bei. Füge eine Pausenkarte mit dem aktuellen Punktestand, einer primären Aktion zum Fortsetzen und einer separaten Aktion zur Rückkehr zum Start hinzu. Verwende ausschließlich einen lokalen Sitzungsstatus; suggeriere weder Mehrspielermodus noch gespeicherte Punktestände oder eine Kontoverbindung. Mache die Tastatursteuerung sichtbar und halte die Mitte der Szene frei.

  3. Eine einzelne Auswahl im gesamten HUD verfolgen

    Wählen Sie jede Waffe aus und prüfen Sie jeweils ihren Platz, ihren Namen und ihre Munitionsanzeige zusammen. Pausieren Sie das Spiel anschließend bei dieser Auswahl und setzen Sie es wieder fort. Der aussagekräftige Test besteht darin, ob die Oberfläche einen einzigen konsistenten Zustand beschreibt, nicht darin, ob jedes Element für sich betrachtet überzeugend wirkt.

  4. Kontrast vor mehr als nur dem Himmel prüfen

    Prüfen Sie die Statusbeschriftungen vor hellen Wänden, dunklen Dächern und der Straßenoberfläche. Bewahren Sie die offene Wirkung der Szene, ergänzen Sie für kleine Texte jedoch bei Bedarf eine dezente Hinterlegung. Stellen Sie sicher, dass die Pausenaktionen auch ohne ausschließliche Abhängigkeit von Farbe unterscheidbar bleiben.

  5. Exportieren und Share-Link erhalten

    Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows