暴躁哐哐Heliki AI社区

Appearance

OpenAI Apps SDK Design Guidelines - Image Placement Guide ​

This document maps all images from the /images/apps-sdk/ directory to their corresponding sections in the design guidelines documentation, listed in the exact order they appear on the page.

Overview ​

  • overview.png: Example apps in the ChatGPT mobile interface

Display modes ​

Inline ​

  • inline_display_mode.png: Examples of inline cards and carousels in ChatGPT

Inline card ​

  • inline_cards.png: Examples of inline cards
  • inline_card_layout.png: Diagram of inline cards
  • inline_card_interaction.png: Diagram of interaction patterns for inline cards
  • inline_card_rules.png: Examples of patterns to avoid in inline cards
  • inline_carousel.png: Example of inline carousel
  • inline_carousel_layout.png: Diagram of inline carousel

Fullscreen ​

  • fullscreen.png: Example of fullscreen
  • fullscreen_layout.png: Diagram of fullscreen
  • fullscreen_interaction_a.png: Interaction patterns for fullscreen

Picture-in-picture (PiP) ​

  • pip.png: Example of picture-in-picture
  • fullscreen_interaction.png: Interaction patterns for picture-in-picture

Visual design guidelines ​

Color ​

  • color.png: Color palette
  • color_usage_1.png: Example color usage (Use brand colors on accents and badges. Don't change text colors or other core component styles)
  • color_usage_2.png: Example color usage (Don't apply colors to backgrounds in text areas)

Typography ​

  • typography.png: Typography
  • typography_usage.png: Example typography (Don't use custom fonts, even in full screen modes)

Spacing & layout ​

  • spacing.png: Spacing & layout

Icons & imagery ​

  • icons.png: Icons
  • iconography.png: Icons & imagery

Summary ​

Total Images Found: 22 images in /images/apps-sdk/ directory

Images by Section: ​

  • Overview: 1 image
  • Display modes - Inline: 6 images
  • Display modes - Fullscreen: 3 images
  • Display modes - Picture-in-picture: 2 images
  • Visual design guidelines - Color: 3 images
  • Visual design guidelines - Typography: 2 images
  • Visual design guidelines - Spacing & layout: 1 image
  • Visual design guidelines - Icons & imagery: 2 images

Markdown Integration Format ​

When inserting these images into your Markdown documentation, use the following format:

markdown
## Section Title

![Alt text](/images/apps-sdk/filename.png)

Example: ​

markdown
## Overview

![Example apps in the ChatGPT mobile interface](/images/apps-sdk/overview.png)

## Display modes

### Inline

![Examples of inline cards and carousels in ChatGPT](/images/apps-sdk/inline_display_mode.png)

#### Inline card

![Examples of inline cards](/images/apps-sdk/inline_cards.png)
![Diagram of inline cards](/images/apps-sdk/inline_card_layout.png)
![Diagram of interaction patterns for inline cards](/images/apps-sdk/inline_card_interaction.png)
![Examples of patterns to avoid in inline cards](/images/apps-sdk/inline_card_rules.png)

Document Generated: 2025-10-12 Source: https://developers.openai.com/apps-sdk/concepts/design-guidelines