Websites
Design einer Karriere-Website
Kimi Careers von OpenDesign
Eine Karriereseite in acht Mond-Szenen, mit scrollgesteuerten Übergängen und einem illustrierten Bewerbungsprozess mit vier Stationen.
Hackathon-Beispiel
Die Bibliothek für Design-Fallstudien
OpenDesign Showcase:
KI-Designbeispiele
- Websites
- Apps
- Dashboards
- Präsentationen
- Grafiken
Achtzehn KI-Designbeispiele, erstellt mit OpenDesign und als echter Code, Präsentationen oder App-Prototypen umgesetzt. Jedes Beispiel beschreibt das Briefing, das Modell und die Layoutentscheidungen und endet mit einem Prompt, den du wiederverwenden kannst.
18 Fallstudien · zwei Reihen · 10 Modelle
Fallstudien
Lass dich für deine nächste Idee inspirieren
Filtere nach Ausgabeart, Zweck, Reihe oder dem Modell, mit dem das Projekt erstellt wurde.
Hackathon-Beispiel
Websites
Design der Website zur nächtlichen Tour durch Bianjing
Bianjing After Dark von OpenDesign
Eine interaktive Nachtreise durch ein imaginäres Bianjing der Song-Zeit, mit einer beständigen Flussstadt, Poesie, Laternen und mehrsprachigem Erzähltempo in Kapiteln.
LLM Arena · GPT 6 Sol
Websites
Design einer Website für Nachttouren in Kaifeng
Bianjing After Dark von OpenDesign
Folge einem von Laternen beleuchteten Fluss durch fünf Kapitel von Bianjing After Dark – vom Stadttor und Nachtmarkt bis zu Poesie und einem Laternensteigenlassen.
LLM Arena · Claude Opus 5.5
Dashboards
Design des Reiseplaner-Dashboards
Halcyon Cove von OpenDesign
Plane einen Tag mit sechs Stationen in Halcyon Cove: Verknüpfe gespeicherte Orte, Kartenpositionen und Gehzeiten in einem Dashboard.
LLM Arena · Claude Opus 5
Apps
Design der App für Meeressammlungen
Abyssal Log von OpenDesign
Eine Sammlung von Meeresexemplaren, verknüpft mit Tauchmissionen. Jeder unbekannte Eintrag erklärt die Aufgabe und den nötigen Fortschritt, um ihn zu enthüllen.
LLM Arena · Claude Opus 5
Dashboards
Design des persönlichen Dashboards
Life System von OpenDesign
Ein Wochenwert, Körperkarten-Metriken, Tagesrhythmen und fünf Experimente auf einem Desktop-Dashboard, erläutert anhand von vier kommentierten Detailansichten.
Hackathon-Beispiel
Websites
Design einer Website für Restaurantreservierungen
Ember & Pepper von OpenDesign
Signature-Gerichte und Informationen zum Besuch, ergänzt durch einen Reservierungsdialog für Gäste, die buchen möchten.
LLM Arena · GPT 5.6 Sol
Apps
Insel-Abenteuerspiel-Design
Harbor Skirmish von OpenDesign
Eine kleine Insel am Meer mit Routen über Dächer, drei Waffenplätzen und einer verspielten Ego-Perspektive.
LLM Arena · GPT 6 Astra
Präsentationen
Produktpräsentationsdesign
Agent-Native Workspace von OpenDesign
Eine Produktgeschichte in drei Folien: eine einleitende Leitthese, ein Konzept für eine mobile Begleit-App und ein Kontrollzentrum für Unternehmen.
Hackathon-Beispiel
Apps
Design für einen Tagesausflugsplaner
Solara Bay von OpenDesign
Sechs zeitlich geplante Stopps im fiktiven Solara Bay mit illustrierter Karte, geschätzten Gehzeiten und nützlichen Routenhinweisen.
LLM Arena · GPT 5.6 Sol
Apps
Design einer Entdeckungs-Sammel-App
Abyssal Atlas von OpenDesign
Eine Exemplar-Sammlung, verknüpft mit einer Tauchwarteschlange: gesperrte Einträge, zwei Filterzeilen und Fortschrittszahlen zeigen, was als Nächstes zu entdecken ist.
LLM Arena · Grok 4.6
Websites
Design einer Hotpot-Restaurantwebsite
Yàn Huǒ von OpenDesign
Hotpot vorgestellt anhand einer bepreisten Signature-Speisekarte, einer Galerie des Restaurants und Informationen zum Besuch vor der Reservierung.
LLM Arena · Qwen 3.8 Max
Websites
Design einer Website zur Waldwiederherstellung
Second Spring von OpenDesign
Ein interaktiver umgestürzter Ast führt zu Geschichten aus dem Wald, einem Renaturierungsplan und simulierten Möglichkeiten, einen Beitrag zu leisten.
LLM Arena · DeepSeek V4.1 Flash
Websites
Interaktives Website-Design für Naturschutz
Second Spring von OpenDesign
Lass auf einem umgestürzten Baumstamm ein Stück Moos wachsen und entdecke dann Geschichten vom Waldboden und simulierte Möglichkeiten zu helfen.
LLM Arena · Claude Fable 5.1
Grafiken
Interaktives Design für Produkterklärungen
iPhone Inside von OpenDesign
Die auseinandergelegten Schichten eines Konzept-Smartphones mit Kameravoreinstellungen, einem Schieberegler und einer Übersicht mit acht Baugruppen.
LLM Arena · GPT Astra
Apps
Design für ein Insel-FPS-Spiel
Harbor Skirmish von OpenDesign
Ein markanter Insel-Startbildschirm führt ins Ego-Spiel mit eingerahmten Statusfeldern und nummerierten Waffensteuerungen.
LLM Arena · DeepSeek V4.1 Flash
Grafiken
Design für eine Lebenslauf-Website
Tom Goodman von OpenDesign
Ein fiktiver Lebenslauf, der Berufserfahrung mit Kompetenzdiagrammen und ausgewählten Arbeiten verbindet – in einer zweispaltigen Lesereihenfolge mit separatem Drucklayout.
Hackathon-Beispiel
Grafiken
Design für eine kreative Portfolio-Website
Maya Rowan von OpenDesign
Ein fiktives Portfolio, das posterartige Projektkarten, einen dreistufigen Arbeitsansatz, Arbeitsnotizen und Kontaktmöglichkeiten verbindet.
Hackathon-Beispiel
Keine Projekte entsprechen diesen Filtern
Setze die Filter zurück, um alle Projekte zu sehen, oder stöbere in einer anderen Arbeitskategorie.
Statt endlosem Scrollen gibt es eine Seitennavigation, damit jedes Projekt per Tastatur und für Suchmaschinen erreichbar bleibt.
Community
Hackathon erneut ansehen, Modelle vergleichen
Ein gerade abgeschlossener Community-Hackathon und eine Evaluierungsreihe, in der zehn Modelle dieselben Briefings beantwortet haben.
Produktdesign-Hackathon
Beendet · 18. Sep. 2026- Termine
- 9.–18. Sep.
- Belohnungen
- Top 10 + erste 50
- Beispiele
- 5
Designer:innen veröffentlichten auf X Produkte, die mit OpenDesign erstellt wurden – pro Beitrag ein Community-Link. Die Beiträge wurden nach Likes sortiert.
- Kimi Careers
- Life System
- Agent-Native Workspace
- Tom Goodman
- Maya Rowan
LLM Arena Sep. 2026
Notizen zur Reihe- Modelle
- 10
- Gemeinsame Briefings
- 6
- Fallstudien
- 13
Sechs Briefings, jeweils von zwei Modellen beantwortet. Auf jeder Seite sind das Modell und die Aufgabe angegeben, sodass sich die Antworten direkt vergleichen lassen.
- Claude Opus 5
- GPT 5.6 Sol
- DeepSeek V4.1 Flash
- Qwen 3.8 Max
- Grok 4.6
- GPT Astra
- GPT 6 Astra
- Claude Fable 5.1
- GPT 6 Sol
- Claude Opus 5.5
So erstellst du KI-Designbeispiele in OpenDesign
Mit einer Fallstudie beginnen, die deiner Idee nahekommt
Filtere die Fallstudien oben nach Ausgabetyp und öffne eine, die deinem Vorhaben ähnelt. Lies das Briefing, das verwendete Modell und die erläuterten Layoutentscheidungen. Notiere, was du beibehalten und was du ändern würdest.
Briefing verfassen, bevor du nach einem Entwurf fragst
Nenne den Ausgabetyp, die Bildschirme oder Abschnitte, Beispielinhalte und die eine wichtige Interaktion. Gib an, welche Informationen echt und welche Platzhalter sind, damit das Design keine Fakten erfindet.
Prompt-VorschlagErstelle ein Website-Design für eine fiktive Bäckerei im Viertel. Füge einen Hero-Bereich mit dem heutigen Backangebot, eine nach Vormittag und Nachmittag gegliederte Speisekarte, Öffnungszeiten und ein Vorbestellformular mit klar beschrifteten Platzhalterfeldern hinzu. Halte die Navigation wörtlich, setze jede Überschrift als echten Text um und erstelle ein gut lesbares mobiles Layout.
Modell auswählen oder zwei vergleichen
Wähle das Modell, dem du bei Layout und Text vertraust. Um zu sehen, wie zwei Modelle dasselbe Briefing umsetzen, gib es ein in LLM Arena zuerst, wie es die Arena-Fallstudien auf dieser Seite getan haben.
Einen Abschnitt verfeinern, bevor du die ganze Seite bearbeitest
Bitte Änderungen Abschnitt für Abschnitt an: Hierarchie, Abstände, Zustände und Texte. Prüfe das mobile Layout und einen Zustand mit reduzierter Bewegung, bevor du einen Effekt auf der ganzen Seite einsetzt.
Exportieren und Freigabelink erstellen
Exportiere das fertige Design als HTML und klicke dann in OpenDesign auf „Teilen“, um einen Link zu erhalten. Öffne ihn in einem separaten Browserfenster und prüfe, ob die gewünschte Version samt Assets geladen wird, bevor du ihn verschickst.
Loslegen
Gestalte selbst das nächste Beispiel
Kostenlos, Open Source und auf deinem eigenen Rechner mit deinen eigenen Schlüsseln. Bring ein Briefing mit, wähle ein Modell und erstelle eine Website, App, ein Dashboard oder eine Präsentation, die du teilen kannst.
Desktop-Versionen für macOS und Windows. Kostenlos und Open Source unter Apache-2.0.
