OpenDesign Showcase:
AI Design Examples

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 design example Close to Your Idea

   Filter the design examples 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 PromptCopy 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 design examples 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.