The design case study library

OpenDesign Showcase:
AI Design Examples

  • Websites
  • Apps
  • Dashboards
  • Slides
  • Graphics

Eighteen AI design examples generated with OpenDesign and shipped as real code, slides or an app prototype. Each one states the brief, the model and the layout decisions, then ends with a prompt you can reuse.

18 case studies · two series · 10 models

Case Studies

Find Inspiration for Your Next Idea

Filter by output type, purpose, series or the model that generated it.

18 projects
Kimi careers website opening scene with a lunar visual theme

Websites

Careers Website Design

Kimi Careers by OpenDesign

A careers page told through eight lunar scenes, with scroll-linked transitions and an illustrated four-stop application process.

Hackathon example
Bianjing Night Tour Website Design: lantern-lit river city hero

Websites

Bianjing Night Tour Website Design

Bianjing After Dark by OpenDesign

An interactive night journey through an imagined Song-era Bianjing, combining a persistent river city, poetry, lanterns and multilingual chapter pacing.

LLM Arena · GPT 6 Sol
Kaifeng Night Tour Website Design: lantern-lit river and night tour introduction

Websites

Kaifeng Night Tour Website Design

Bianjing After Dark by OpenDesign

Follow a lantern-lit river through five chapters of Bianjing After Dark, from the city gate and night market to poetry and a lantern release.

LLM Arena · Claude Opus 5.5
Travel planner dashboard with a city map, place library and day plan

Dashboards

Travel Planner Dashboard Design

Halcyon Cove by OpenDesign

Build a six-stop day in Halcyon Cove: link saved places, map locations and walking time on one dashboard.

LLM Arena · Claude Opus 5
Marine Collection App Design: Current Specimen and Discovery CardMarine Collection App Design: Dive Missions and Discovery Requirements

Apps

Marine Collection App Design

Abyssal Log by OpenDesign

A marine specimen collection connected to dive missions. Each unknown record explains the task and progress needed to reveal it.

LLM Arena · Claude Opus 5
Life System dashboard workspace overview with a weekly score, body-map metrics and experiment tracker

Dashboards

Personal Dashboard Design

Life System by OpenDesign

A weekly score, body-map metrics, daily rhythms and five experiments on one desktop dashboard, explained through four annotated detail views.

Hackathon example
Ember and Pepper restaurant website introduction with menu and booking

Websites

Restaurant Reservation Website Design

Ember & Pepper by OpenDesign

Signature dishes and visit details paired with a reservation dialog for guests ready to book.

LLM Arena · GPT 5.6 Sol
Harbor Skirmish island overview and start screen

Apps

Island Adventure Game Design

Harbor Skirmish by OpenDesign

A small seaside island with rooftop routes, three weapon slots and a playful first-person interface.

LLM Arena · GPT 6 Astra
Opening thesis slide of the Agent-Native Design Workspace presentation

Slides

Product Presentation Design

Agent-Native Workspace by OpenDesign

A product story in three slides: an opening thesis, a mobile companion concept and an enterprise control room.

Hackathon example
Day trip planner with an illustrated city map, place library and day plan

Apps

Day Trip Planner Design

Solara Bay by OpenDesign

Six timed stops in fictional Solara Bay, with an illustrated map, walking estimates and useful route warnings.

LLM Arena · GPT 5.6 Sol
Discovery Collection App Design: Current Specimen and Discovery CardDiscovery Collection App Design: Dive Board With Its Expedition Queue

Apps

Discovery Collection App Design

Abyssal Atlas by OpenDesign

A specimen collection linked to a dive queue: locked records, two filter rows and progress counts explain what to discover next.

LLM Arena · Grok 4.6
Yàn Huǒ hotpot restaurant website introduction

Websites

Hotpot Restaurant Website Design

Yàn Huǒ by OpenDesign

Hotpot introduced through a priced signature menu, a dining gallery and visit details before booking.

LLM Arena · Qwen 3.8 Max
Second Spring forest restoration website introduction

Websites

Forest Restoration Website Design

Second Spring by OpenDesign

An interactive fallen branch leads to forest field stories, a restoration plan and simulated ways to contribute.

LLM Arena · DeepSeek V4.1 Flash
Second Spring conservation website with pointer-grown moss on a log

Websites

Interactive Conservation Website Design

Second Spring by OpenDesign

Grow a patch of moss on a fallen log, then explore the forest-floor stories and simulated ways to help.

LLM Arena · Claude Fable 5.1
Angled concept device with its complete exploded layers

Graphics

Interactive Product Explainer Design

iPhone Inside by OpenDesign

A concept phone’s separated layers with camera presets, a slider and a panel of eight assembly groups.

LLM Arena · GPT Astra
Harbor Skirmish FPS island overview and start screen

Apps

Island FPS Game Design

Harbor Skirmish by OpenDesign

A bold island title screen leads to first-person play with boxed status panels and numbered weapon controls.

LLM Arena · DeepSeek V4.1 Flash
Tom Goodman résumé website with profile, experience, capability bars and selected outputs

Graphics

Resume Website Design

Tom Goodman by OpenDesign

A fictional resume that pairs experience with capability charts and selected outputs, in a two-column reading order with a separate print layout.

Hackathon example
Maya Rowan personal brand website introduction section

Graphics

Creative Portfolio Website Design

Maya Rowan by OpenDesign

A fictional portfolio that connects poster-like project cards, a three-stage practice, working notes and contact.

Hackathon example

Pagination is used instead of infinite scroll so every project stays reachable by keyboard and by crawlers.

Community

Revisit the Hackathon, Compare the Models

A community hackathon that just closed, and an evaluation series where ten models answered the same briefs.

Product Design Hackathon

Closed · 18 Sep 2026
Dates
9–18 Sep
Rewarded
Top 10 + first 50
Examples
5

Designers posted products made with OpenDesign on X, one post and one community link per entry. Entries were ranked by likes.

  • Kimi Careers
  • Life System
  • Agent-Native Workspace
  • Tom Goodman
  • Maya Rowan

LLM Arena Sep 2026

Series notes
Models
10
Shared briefs
6
Case studies
13

Six briefs, each answered by two models. Every page states the model and the task, so the answers can be compared side by side.

  • 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

How to Create AI Design Examples in OpenDesign

  1. Download and Install OpenDesign

    Download the desktop app for macOS or Windows, install it and complete setup. Connect the model provider you already use; OpenDesign runs on your machine with your own keys.

    Download
  2. Start From a Case Study Close to Your Idea

    Filter the case studies above by output type and open one near what you want to make. Read its brief, the model it used and the layout decisions it explains, and note what you would keep and what you would change.

  3. Write the Brief Before Asking for a Look

    State the output type, the screens or sections, the sample content and the one interaction that matters. Say which information is real and which is a placeholder, so the design does not invent facts.

    Suggested Prompt

    Create a website design for a fictional neighbourhood bakery. Include a hero with today’s bakes, a menu grouped by morning and afternoon, opening hours and a pre-order form with clearly labelled placeholder fields. Keep the navigation literal, build every heading as real text and include a readable mobile layout.

  4. Choose a Model, or Compare Two

    Pick the model you trust for layout and copy. To see how two models handle the same brief, run it in LLM Arena first, as the Arena case studies on this page did.

  5. Refine One Section Before the Whole Page

    Ask for changes one section at a time: hierarchy, spacing, states and copy. Check the mobile layout and a reduced-motion state before you extend an effect across the page.

  6. Export and Get a Share Link

    Export the finished design as HTML, then use Share in OpenDesign to get a link. Open it in a separate browser window and check that the intended version and its assets load before you send it.

Get Started

Design the Next Example Yourself

Free, open source and running on your own machine with your own keys. Bring a brief, pick a model and ship a website, app, dashboard or deck you can share.

Desktop builds for macOS and Windows. Free and open source under Apache-2.0.

Oil painting of dancers in a ring on a sunlit hillside, from the OpenDesign artwork set

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows