--- 格式版本: 2 标题: "UI guidelines – Plugins | OpenAI Developers" 原文链接: "https://developers.openai.com/plugins/concepts/ui-guidelines" 发布日期: "2026-08-16" 发布时间校准状态: "found" 发布时间需复核: "否" 发布时间来源: "rule:local:strict_original_body" 发布时间证据: "Published Time: Sun, 16 Aug 2026 09:07:16 GMT" 发布时间校准原因: "规则确认唯一严格发布时间，来源 local:strict_original_body" 发布时间校准置信度: "high" 发布时间候选数量: 4 发布时间严格候选数量: 1 发布时间原页读取状态: "source template page reused from URL open" 发布时间未找到原因: "" 发布时间校准时间: "2026-08-16T23:59:49+08:00" 发布时间仲裁状态: "skipped" 发布时间仲裁尝试次数: 0 发布时间仲裁耗时毫秒: 0 发现时间: "2026-08-16T23:54:06+08:00" 入库时间: "2026-08-16T15:59:49.455Z" 来源平台: "固定入口" 搜索渠道: "fixed_url" 搜索词: "https://developers.openai.com/blog" 匹配关键词: - "deployment" - "performance" - "latency" - "throughput" - "AI" 相关厂家: - "OpenAI" - "Microsoft" - "AWS" - "Google" - "Oracle" 相关专家: [] 内容类型: "网页" 抓取工具: "Jina Reader" 清洗工具: "Jina Reader Markdown + Defuddle/Readability 正文提取" 原始附件: [] AI优质: "否" AI打分: 0 AI分档: "非优质" AI质检状态: "不通过" AI打分理由: "该资料为OpenAI插件UI开发指南，完全未涉及超节点/AI Rack/机柜级AI基础设施等核心主题，无任何技术或商业价值。" AI质检模型: "ali-deepseek-v4-flash" AI质检时间: "2026-08-16T23:59:53+08:00" AI主题相关性: 0 AI来源权威性: 0 AI新颖性: 0 AI技术细节: 0 AI商业部署信号: 0 AI完整性: 0 AI摘要: "OpenAI 开发者文档中有一篇插件 UI 指南页面，面向插件开发者说明界面设计规范。本次抓取到的内容仅含导航与文档索引，未呈现具体 UI 指南正文。" AI摘要模型: "ali-deepseek-v4-flash" AI摘要时间: "2026-09-07T03:28:55.912Z" 采集批次: "2026年8月16日20点37分10秒" 采集批次ID: "20260816-203710-016" 去重键: "https://developers.openai.com/plugins/concepts/ui-guidelines" --- Title: UI guidelines – Plugins | OpenAI Developers URL Source: https://developers.openai.com/plugins/concepts/ui-guidelines Published Time: Sun, 16 Aug 2026 09:07:16 GMT Markdown Content: For the complete documentation index, see [llms.txt](https://developers.openai.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to the page URL. [![Image 1: OpenAI Developers](https://developers.openai.com/OpenAI_Developers.svg)ChatGPT](https://developers.openai.com/) [Home](https://developers.openai.com/) [API](https://developers.openai.com/api/docs) [Codex](https://learn.chatgpt.com/docs) [Docs Guides, concepts, and product docs for Codex](https://learn.chatgpt.com/docs)[Use cases Example workflows and tasks teams can take on with ChatGPT or Codex](https://learn.chatgpt.com/use-cases) [Docs](https://developers.openai.com/codex) [Use cases](https://developers.openai.com/codex/use-cases) [Resources](https://developers.openai.com/codex/resources) [ChatGPT](https://developers.openai.com/chatgpt) [Plugins Extend ChatGPT and Codex](https://developers.openai.com/plugins)[Workspace Agents Trigger published ChatGPT workspace agents](https://developers.openai.com/workspace-agents)[Commerce Build commerce flows in ChatGPT](https://developers.openai.com/commerce)[Ads Publish and measure ads in ChatGPT](https://developers.openai.com/ads) [Resources](https://developers.openai.com/learn) [Showcase Demo apps to get inspired](https://developers.openai.com/showcase)[Blog Learnings and experiences from developers](https://developers.openai.com/blog)[Cookbook Notebook examples for building with OpenAI models](https://developers.openai.com/cookbook)[Learn Docs, videos, and demo apps for building with OpenAI](https://developers.openai.com/learn)[Community Programs, meetups, and support for builders](https://developers.openai.com/community) Start searching [API Dashboard](https://platform.openai.com/login) [Try ChatGPT](https://chatgpt.com/) ## Search the ChatGPT docs Search docs ### Suggested responses create reasoning_effort realtime prompt caching Primary navigation API Codex ChatGPT Docs Use cases Resources Resources Search docs ### Suggested responses create reasoning_effort realtime prompt caching Overview Models Agents Tools Voice & Audio Production API reference Docs section Overview * [Home](https://developers.openai.com/api/docs) ### Get started * [Quickstart](https://developers.openai.com/api/docs/quickstart) * [Using GPT-5.6](https://developers.openai.com/api/docs/guides/latest-model) * [Key concepts](https://developers.openai.com/api/docs/concepts) ### Core concepts * [Responses API](https://developers.openai.com/api/docs/guides/migrate-to-responses) * [Conversation state](https://developers.openai.com/api/docs/guides/conversation-state) * [Background mode](https://developers.openai.com/api/docs/guides/background) * [Streaming](https://developers.openai.com/api/docs/guides/streaming-responses) * [WebSocket mode](https://developers.openai.com/api/docs/guides/websocket-mode) * [Multi-agent](https://developers.openai.com/api/docs/guides/responses-multi-agent) * [Webhooks](https://developers.openai.com/api/docs/guides/webhooks) * [File inputs](https://developers.openai.com/api/docs/guides/file-inputs) * [Compaction](https://developers.openai.com/api/docs/guides/compaction) * [Counting tokens](https://developers.openai.com/api/docs/guides/token-counting) ### SDKs and CLI * [OpenAI SDK](https://developers.openai.com/api/docs/libraries) * [OpenAI CLI](https://developers.openai.com/api/docs/libraries/openai-cli) ### Resources * [Changelog](https://developers.openai.com/api/docs/changelog) * [Deprecations](https://developers.openai.com/api/docs/deprecations) * [Supported countries](https://developers.openai.com/api/docs/supported-countries) * [OpenAI Crawlers](https://developers.openai.com/api/docs/bots) * [Terms and policies](https://openai.com/policies) ### Legacy APIs * Agent Builder * [Overview](https://developers.openai.com/api/docs/guides/agent-builder) * [Migration guide](https://developers.openai.com/api/docs/guides/agent-builder/migrate-from-agent-builder) * [Node reference](https://developers.openai.com/api/docs/guides/node-reference) * [Safety in building agents](https://developers.openai.com/api/docs/guides/agent-builder-safety) * Evals * [Getting started](https://developers.openai.com/api/docs/guides/evaluation-getting-started) * [Working with evals](https://developers.openai.com/api/docs/guides/evals) * [Prompt optimizer](https://developers.openai.com/api/docs/guides/prompt-optimizer) * [External models](https://developers.openai.com/api/docs/guides/external-models) * [Best practices](https://developers.openai.com/api/docs/guides/evaluation-best-practices) * [Graders](https://developers.openai.com/api/docs/guides/graders) * Fine-tuning * [Optimization cycle](https://developers.openai.com/api/docs/guides/model-optimization) * [Supervised fine-tuning](https://developers.openai.com/api/docs/guides/supervised-fine-tuning) * [Vision fine-tuning](https://developers.openai.com/api/docs/guides/vision-fine-tuning) * [Direct preference optimization](https://developers.openai.com/api/docs/guides/direct-preference-optimization) * [Reinforcement fine-tuning](https://developers.openai.com/api/docs/guides/reinforcement-fine-tuning) * [RFT use cases](https://developers.openai.com/api/docs/guides/rft-use-cases) * [Best practices](https://developers.openai.com/api/docs/guides/fine-tuning-best-practices) * Assistants API * [Migration guide](https://developers.openai.com/api/docs/assistants/migration) * [Deep dive](https://developers.openai.com/api/docs/assistants/deep-dive) * [Tools](https://developers.openai.com/api/docs/assistants/tools) * [Model catalog](https://developers.openai.com/api/docs/models) ### Choose a model * [Pricing](https://developers.openai.com/api/docs/pricing) * [Model selection](https://developers.openai.com/api/docs/guides/model-selection) ### Text and code * [Text generation](https://developers.openai.com/api/docs/guides/text) * [Code generation](https://developers.openai.com/api/docs/guides/code-generation) * [Structured output](https://developers.openai.com/api/docs/guides/structured-outputs) ### Prompting * [Overview](https://developers.openai.com/api/docs/guides/prompting) * [Prompt engineering](https://developers.openai.com/api/docs/guides/prompt-engineering) * [Citation formatting](https://developers.openai.com/api/docs/guides/citation-formatting) * [Migration guide](https://developers.openai.com/api/docs/guides/prompting/migrate-from-prompt-object) * [Prompt generation](https://developers.openai.com/api/docs/guides/prompt-generation) * [Frontend prompting](https://developers.openai.com/api/docs/guides/frontend-prompt) ### Reasoning * [Reasoning models](https://developers.openai.com/api/docs/guides/reasoning) * [Reasoning best practices](https://developers.openai.com/api/docs/guides/reasoning-best-practices) ### Images and video * [Images and vision](https://developers.openai.com/api/docs/guides/images-vision) * [Image generation](https://developers.openai.com/api/docs/guides/image-generation) * [Video generation](https://developers.openai.com/api/docs/guides/video-generation) ### Realtime and audio * [Audio and speech](https://developers.openai.com/api/docs/guides/audio) * [Overview](https://developers.openai.com/api/docs/guides/realtime) * [Voice agents](https://developers.openai.com/api/docs/guides/voice-agents) ### Specialized models * [Deep research](https://developers.openai.com/api/docs/guides/deep-research) * [Embeddings](https://developers.openai.com/api/docs/guides/embeddings) * [Moderation](https://developers.openai.com/api/docs/guides/moderation) * [Overview](https://developers.openai.com/api/docs/guides/agents) ### Agents SDK * [Quickstart](https://developers.openai.com/api/docs/guides/agents/quickstart) * [Agent definitions](https://developers.openai.com/api/docs/guides/agents/define-agents) * [Models and providers](https://developers.openai.com/api/docs/guides/agents/models) * [Running agents](https://developers.openai.com/api/docs/guides/agents/running-agents) * [Sandbox agents](https://developers.openai.com/api/docs/guides/agents/sandboxes) * [Orchestration](https://developers.openai.com/api/docs/guides/agents/orchestration) * [Guardrails](https://developers.openai.com/api/docs/guides/agents/guardrails-approvals) * [Results and state](https://developers.openai.com/api/docs/guides/agents/results) * [Integrations and observability](https://developers.openai.com/api/docs/guides/agents/integrations-observability) * [Evaluate agent workflows](https://developers.openai.com/api/docs/guides/agent-evals) ### ChatKit * [Overview](https://developers.openai.com/api/docs/guides/chatkit) * [Customize](https://developers.openai.com/api/docs/guides/chatkit-themes) * [Widgets](https://developers.openai.com/api/docs/guides/chatkit-widgets) * [Actions](https://developers.openai.com/api/docs/guides/chatkit-actions) * [Advanced integrations](https://developers.openai.com/api/docs/guides/custom-chatkit) * [Overview](https://developers.openai.com/api/docs/guides/tools) * [Function calling](https://developers.openai.com/api/docs/guides/function-calling) ### Search and retrieval * [Web search](https://developers.openai.com/api/docs/guides/tools-web-search) * [File search](https://developers.openai.com/api/docs/guides/tools-file-search) * [Retrieval](https://developers.openai.com/api/docs/guides/retrieval) ### Connect tools and data * [MCP and Connectors](https://developers.openai.com/api/docs/guides/tools-connectors-mcp) * [Secure MCP Tunnel](https://developers.openai.com/api/docs/guides/secure-mcp-tunnels) ### Build tool workflows * [Skills](https://developers.openai.com/api/docs/guides/tools-skills) * [Tool search](https://developers.openai.com/api/docs/guides/tools-tool-search) * [Programmatic tool calling](https://developers.openai.com/api/docs/guides/tools-programmatic-tool-calling) ### Computer and code * [Shell](https://developers.openai.com/api/docs/guides/tools-shell) * [Computer use](https://developers.openai.com/api/docs/guides/tools-computer-use) * [Apply Patch](https://developers.openai.com/api/docs/guides/tools-apply-patch) * [Local shell](https://developers.openai.com/api/docs/guides/tools-local-shell) * [Code interpreter](https://developers.openai.com/api/docs/guides/tools-code-interpreter) ### Media * [Image generation](https://developers.openai.com/api/docs/guides/tools-image-generation) * [Overview](https://developers.openai.com/api/docs/guides/realtime) ### Get started * [Voice agents](https://developers.openai.com/api/docs/guides/voice-agents) * [Live translation](https://developers.openai.com/api/docs/guides/realtime-translation) * [Realtime prompting guide](https://developers.openai.com/api/docs/guides/realtime-models-prompting) ### Audio * [Audio and speech](https://developers.openai.com/api/docs/guides/audio) * [Transcription](https://developers.openai.com/api/docs/guides/transcription) * [File transcription](https://developers.openai.com/api/docs/guides/speech-to-text) * [Realtime transcription](https://developers.openai.com/api/docs/guides/realtime-transcription) * [Speech generation](https://developers.openai.com/api/docs/guides/text-to-speech) ### Connection methods * [WebRTC](https://developers.openai.com/api/docs/guides/realtime-webrtc) * [WebSocket](https://developers.openai.com/api/docs/guides/realtime-websocket) * [SIP](https://developers.openai.com/api/docs/guides/realtime-sip) ### Sessions and operations * [Managing conversations](https://developers.openai.com/api/docs/guides/realtime-conversations) * [Voice activity detection](https://developers.openai.com/api/docs/guides/realtime-vad) * [Realtime with tools](https://developers.openai.com/api/docs/guides/realtime-mcp) * [Webhooks and server-side controls](https://developers.openai.com/api/docs/guides/realtime-server-controls) * [Managing costs](https://developers.openai.com/api/docs/guides/realtime-costs) ### Go live * [Production best practices](https://developers.openai.com/api/docs/guides/production-best-practices) * [Deployment checklist](https://developers.openai.com/api/docs/guides/deployment-checklist) ### Performance and quality * [Latency optimization](https://developers.openai.com/api/docs/guides/latency-optimization) * [Predicted Outputs](https://developers.openai.com/api/docs/guides/predicted-outputs) * [Fast mode](https://developers.openai.com/api/docs/guides/fast-mode) * [Accuracy optimization](https://developers.openai.com/api/docs/guides/optimizing-llm-accuracy) ### Cost and throughput * [Cost optimization](https://developers.openai.com/api/docs/guides/cost-optimization) * [Prompt caching](https://developers.openai.com/api/docs/guides/prompt-caching) * [Batch](https://developers.openai.com/api/docs/guides/batch) * [Flex processing](https://developers.openai.com/api/docs/guides/flex-processing) ### Safety and governance * [Safety best practices](https://developers.openai.com/api/docs/guides/safety-best-practices) * [Red teaming](https://developers.openai.com/api/docs/guides/red-teaming) * [Safety checks](https://developers.openai.com/api/docs/guides/safety-checks) * [Cybersecurity checks](https://developers.openai.com/api/docs/guides/safety-checks/cybersecurity) * [Under 18 API Guidance](https://developers.openai.com/api/docs/guides/safety-checks/under-18-api-guidance) * [Content provenance](https://developers.openai.com/api/docs/guides/content-provenance) * [Your data](https://developers.openai.com/api/docs/guides/your-data) * [Permissions](https://developers.openai.com/api/docs/guides/rbac) ### Infrastructure and access * [Terraform provider](https://developers.openai.com/api/docs/guides/terraform) * [Overview](https://developers.openai.com/api/docs/guides/terraform) * [Projects and access](https://developers.openai.com/api/docs/guides/terraform/projects-and-access) * [Service accounts](https://developers.openai.com/api/docs/guides/terraform/service-accounts) * [Rate limits and spend](https://developers.openai.com/api/docs/guides/terraform/rate-limits-and-spend) * [Model, tool, and data controls](https://developers.openai.com/api/docs/guides/terraform/project-controls) * [Import and reconciliation](https://developers.openai.com/api/docs/guides/terraform/import-and-reconcile) * [Private Link](https://developers.openai.com/api/docs/guides/private-link) * [IP allowlist](https://developers.openai.com/api/docs/guides/ip-allowlist) * [Workload identity federation](https://developers.openai.com/api/docs/guides/workload-identity-federation) * [X.509 certificates (beta)](https://developers.openai.com/api/docs/guides/workload-identity-federation/x509) * [Kubernetes](https://developers.openai.com/api/docs/guides/workload-identity-federation/kubernetes) * [AWS](https://developers.openai.com/api/docs/guides/workload-identity-federation/aws) * [Microsoft Azure](https://developers.openai.com/api/docs/guides/workload-identity-federation/microsoft-azure) * [Google Cloud](https://developers.openai.com/api/docs/guides/workload-identity-federation/google-cloud) * [Oracle Cloud Infrastructure](https://developers.openai.com/api/docs/guides/workload-identity-federation/oracle-cloud) * [GitHub Actions](https://developers.openai.com/api/docs/guides/workload-identity-federation/github-actions) * [SPIFFE](https://developers.openai.com/api/docs/guides/workload-identity-federation/spiffe) * [IP egress ranges](https://developers.openai.com/api/docs/guides/ip-addresses) * [Amazon Bedrock](https://developers.openai.com/api/docs/guides/amazon-bedrock) ### Operations * [Rate limits](https://developers.openai.com/api/docs/guides/rate-limits) * [Spend limits](https://developers.openai.com/api/docs/guides/spend-limits) * [Admin APIs](https://developers.openai.com/api/docs/guides/admin-apis) * [Error codes](https://developers.openai.com/api/docs/guides/error-codes) [Docs](https://learn.chatgpt.com/docs)[Use cases](https://learn.chatgpt.com/use-cases) Docs section Docs Plugins Workspace Agents Commerce Ads Docs section Plugins * [Home](https://developers.openai.com/plugins) * [Quickstart](https://developers.openai.com/plugins/quickstart) ### Core concepts * [Plugin architecture](https://developers.openai.com/plugins/concepts/plugins) * [Skills](https://developers.openai.com/plugins/concepts/skills) * [MCP server](https://developers.openai.com/plugins/concepts/mcp-server) ### Plan * [Brainstorm use cases](https://developers.openai.com/plugins/plan/use-case) * [Define tools](https://developers.openai.com/plugins/plan/tools) ### Build * [Build an MCP server](https://developers.openai.com/plugins/build/mcp-server) * [Add UI to your MCP server (optional)](https://developers.openai.com/plugins/build/chatgpt-ui) * [Authenticate users](https://developers.openai.com/plugins/build/auth) * [Build skills](https://developers.openai.com/plugins/build/skills) * [Package your plugin](https://developers.openai.com/plugins/build/plugins) * [Examples](https://developers.openai.com/plugins/build/examples) ### Test and publish * [Connect and test your plugin](https://developers.openai.com/plugins/deploy/connect-chatgpt) * [Submit and publish](https://developers.openai.com/plugins/deploy/submission) * [Submission error reference](https://developers.openai.com/plugins/deploy/submission-errors) ### Conversion specs * [Restaurant reservation spec](https://developers.openai.com/plugins/guides/restaurant-reservation-conversion-spec) * [Get Quote spec](https://developers.openai.com/plugins/guides/local-services-request-quote-conversion-spec) * [Product checkout spec](https://developers.openai.com/plugins/guides/product-checkout-conversion-spec) ### Guides * [UI guidelines](https://developers.openai.com/plugins/concepts/ui-guidelines) * [Optimize Metadata](https://developers.openai.com/plugins/guides/optimize-metadata) * [Submit a Claude Code plugin](https://developers.openai.com/plugins/guides/submit-claude-plugin) * [Security & Privacy](https://developers.openai.com/plugins/guides/security-privacy) * [Troubleshooting](https://developers.openai.com/plugins/deploy/troubleshooting) ### Resources * [Changelog](https://developers.openai.com/plugins/changelog) * [Plugin guidelines](https://developers.openai.com/plugins/app-guidelines) * [MCP server review requirements](https://developers.openai.com/plugins/deploy/app-review) * [Plugin UI reference](https://developers.openai.com/plugins/reference) * [Checkout API reference](https://developers.openai.com/plugins/build/monetization) * [Home](https://developers.openai.com/workspace-agents) ### Get started * [Trigger workspace agent runs](https://developers.openai.com/workspace-agents/trigger-runs) * [Authenticate with Workspace Agent access tokens](https://developers.openai.com/workspace-agents/authentication) * [Home](https://developers.openai.com/commerce) ### Guides * [Get started](https://developers.openai.com/commerce/guides/get-started) * [Best practices](https://developers.openai.com/commerce/guides/best-practices) ### File Upload * [Overview](https://developers.openai.com/commerce/specs/file-upload/overview) * [Products](https://developers.openai.com/commerce/specs/file-upload/products) ### API * [Overview](https://developers.openai.com/commerce/specs/api/overview) * [Feeds](https://developers.openai.com/commerce/specs/api/feeds) * [Products](https://developers.openai.com/commerce/specs/api/products) * [Promotions](https://developers.openai.com/commerce/specs/api/promotions) * [Ads Overview](https://developers.openai.com/ads) ### Measurement * [Measurement Pixel](https://developers.openai.com/ads/measurement-pixel) * [Multiple Pixels (Advanced)](https://developers.openai.com/ads/multiple-pixels) * [Image Tag](https://developers.openai.com/ads/image-tag) * [Conversions API](https://developers.openai.com/ads/conversions-api) * [Supported Events](https://developers.openai.com/ads/supported-events) ### Advertiser API * [Overview](https://developers.openai.com/ads/api-overview) * [API Partner Setup](https://developers.openai.com/ads/api-partner-setup) * [Quickstart](https://developers.openai.com/ads/api-quickstart) * [Bulk API](https://developers.openai.com/ads/bulk-api) * [Product Feeds](https://developers.openai.com/ads/product-feeds) * [Delta Feeds API](https://developers.openai.com/ads/delta-feeds) * [Campaign Targeting](https://developers.openai.com/ads/campaign-targeting) * [Conversion-Optimized Campaigns](https://developers.openai.com/ads/conversion-optimized-campaigns) ### API Reference * [Authentication](https://developers.openai.com/ads/api-reference/authentication) * [Ad Account](https://developers.openai.com/ads/api-reference/ad-account) * [Campaigns](https://developers.openai.com/ads/api-reference/campaigns) * [Ad Groups](https://developers.openai.com/ads/api-reference/ad-groups) * [Ads](https://developers.openai.com/ads/api-reference/ads) * [Insights](https://developers.openai.com/ads/api-reference/insights) * [Files](https://developers.openai.com/ads/api-reference/files) * [Conversion Setup](https://developers.openai.com/ads/api-reference/conversion-setup) Overview Features Configuration Developers Security Administration Use Cases Resources Docs section Overview * [Home](https://developers.openai.com/codex) ### Get started * [Quickstart](https://developers.openai.com/codex/quickstart) * [Use ChatGPT](https://developers.openai.com/codex/use-chatgpt) * [Get started with Work](https://developers.openai.com/codex/get-started-with-work) * [Import from another agent](https://developers.openai.com/codex/import) ### Foundations * [Prompting](https://developers.openai.com/codex/prompting) * [Personalize ChatGPT](https://developers.openai.com/codex/personalize) * [Skills & Plugins](https://developers.openai.com/codex/skills-and-plugins) * [Permissions](https://developers.openai.com/codex/permission-modes) ### Explore * [What's new](https://developers.openai.com/codex/whats-new) * [Models](https://developers.openai.com/codex/models) * [Pricing](https://developers.openai.com/codex/pricing) * [Glossary](https://developers.openai.com/codex/glossary) ### Available on * [ChatGPT desktop app](https://developers.openai.com/codex/app) * [Remote](https://developers.openai.com/codex/remote) * [ChatGPT on the web](https://developers.openai.com/codex/web) * [Codex CLI](https://developers.openai.com/codex/cli) * [Codex IDE extension](https://developers.openai.com/codex/ide) * [Codex cloud](https://developers.openai.com/codex/cloud) ### Releases * [Changelog](https://developers.openai.com/codex/changelog) * [Feature Maturity](https://developers.openai.com/codex/feature-maturity) * [Open Source](https://developers.openai.com/codex/open-source) * [Overview](https://developers.openai.com/codex/features) ### Workflows * [Projects and chats](https://developers.openai.com/codex/projects) * [Sites](https://developers.openai.com/codex/sites) * [Visualizations](https://developers.openai.com/codex/visualizations) * [Scheduled tasks](https://developers.openai.com/codex/automations) * [Long-running work](https://developers.openai.com/codex/long-running-work) * [Notifications](https://developers.openai.com/codex/notifications) * [Pets](https://developers.openai.com/codex/pets) * [Codex Micro](https://developers.openai.com/codex/features/codex-micro) ### Capabilities * [Browser](https://developers.openai.com/codex/browser) * [Computer use](https://developers.openai.com/codex/computer-use) * [Voice](https://developers.openai.com/codex/features/voice) * [Plugins](https://developers.openai.com/codex/plugins) * [Web search](https://developers.openai.com/codex/web-search) * [Image generation](https://developers.openai.com/codex/image-generation) * [Image inputs](https://developers.openai.com/codex/image-inputs) * [Appshots](https://developers.openai.com/codex/appshots) * [Chrome extension](https://developers.openai.com/codex/chrome-extension) * [Work with files](https://developers.openai.com/codex/artifacts-viewer) ### Reference * [Commands](https://developers.openai.com/codex/reference/commands) * [Slash commands](https://developers.openai.com/codex/reference/slash-commands) * [Settings](https://developers.openai.com/codex/reference/settings) * [Troubleshooting](https://developers.openai.com/codex/reference/troubleshooting) * [Overview](https://developers.openai.com/codex/configuration) ### Customization * [Overview](https://developers.openai.com/codex/customization/overview) * [Memories](https://developers.openai.com/codex/customization/memories) * [Computer History](https://developers.openai.com/codex/customization/computer-history) ### Config file * [Config Basics](https://developers.openai.com/codex/config-file/config-basic) * [Advanced Config](https://developers.openai.com/codex/config-file/config-advanced) * [Config Reference](https://developers.openai.com/codex/config-file/config-reference) * [Environment Variables](https://developers.openai.com/codex/config-file/environment-variables) * [Sample Config](https://developers.openai.com/codex/config-file/config-sample) ### Agent configuration * [AGENTS.md](https://developers.openai.com/codex/agent-configuration/agents-md) * [Subagents](https://developers.openai.com/codex/agent-configuration/subagents) * [Speed](https://developers.openai.com/codex/agent-configuration/speed) * [Rules](https://developers.openai.com/codex/agent-configuration/rules) ### Extend ChatGPT and Codex * [Record & Replay](https://developers.openai.com/codex/extend/record-and-replay) * [MCP](https://developers.openai.com/codex/extend/mcp) ### Linux * [Desktop app](https://developers.openai.com/codex/linux/linux-app) ### Windows * [Desktop app](https://developers.openai.com/codex/windows/windows-app) * [Windows sandbox](https://developers.openai.com/codex/windows/windows-sandbox) * [WSL](https://developers.openai.com/codex/windows/wsl) * [Overview](https://developers.openai.com/codex/developers) ### Development workflows * [Code review](https://developers.openai.com/codex/code-review) * [Integrated terminal](https://developers.openai.com/codex/integrated-terminal) ### Extend and automate * [Build skills](https://developers.openai.com/codex/build-skills) * [Build plugins](https://developers.openai.com/codex/build-plugins) * [Hooks](https://developers.openai.com/codex/hooks) ### Environments * [Modes](https://developers.openai.com/codex/environments/modes) * [Local environments](https://developers.openai.com/codex/environments/local-environment) * [Cloud environment](https://developers.openai.com/codex/environments/cloud-environment) * [Git worktrees](https://developers.openai.com/codex/environments/git-worktrees) ### Build with Codex * [Codex SDK](https://developers.openai.com/codex/codex-sdk) * [App Server](https://developers.openai.com/codex/app-server) * [MCP Server](https://developers.openai.com/codex/mcp-server) * [GitHub Action](https://developers.openai.com/codex/github-action) * [Non-interactive mode](https://developers.openai.com/codex/non-interactive-mode) ### Third-party integrations * [GitHub](https://developers.openai.com/codex/third-party/github) * [Slack](https://developers.openai.com/codex/third-party/slack) * [Linear](https://developers.openai.com/codex/third-party/linear) ### Reference * [CLI customization](https://developers.openai.com/codex/cli-customization) * [Developer commands](https://developers.openai.com/codex/developer-commands) * [Developer settings](https://developers.openai.com/codex/developer-settings) * [Overview](https://developers.openai.com/codex/security-administration) ### Permissions * [Profiles](https://developers.openai.com/codex/permissions) * [Sandboxing](https://developers.openai.com/codex/sandboxing) * [Auto-review](https://developers.openai.com/codex/sandboxing/auto-review) * [Agent approvals & security](https://developers.openai.com/codex/agent-approvals-security) * [Internet access](https://developers.openai.com/codex/cloud/internet-access) ### Codex Security * [Overview](https://developers.openai.com/codex/security) * Codex Security plugin * [Quickstart](https://developers.openai.com/codex/security/plugin) * [Run a security scan](https://developers.openai.com/codex/security/plugin/scans) * [Run a deep scan](https://developers.openai.com/codex/security/plugin/deep-scans) * [Review code changes](https://developers.openai.com/codex/security/plugin/code-changes) * [Use the Security workbench](https://developers.openai.com/codex/security/plugin/workbench) * [Triage a backlog](https://developers.openai.com/codex/security/plugin/triage-backlog) * [Fix findings](https://developers.openai.com/codex/security/plugin/fix-findings) * [Propose security hardening](https://developers.openai.com/codex/security/plugin/security-hardening) * [Write vulnerability reports](https://developers.openai.com/codex/security/plugin/vulnerability-reports) * [Export and track findings](https://developers.openai.com/codex/security/plugin/export-findings) * [Changelog](https://developers.openai.com/codex/security/plugin/changelog) * Codex Security CLI * [Quickstart](https://developers.openai.com/codex/security/cli) * [Run bulk scans](https://developers.openai.com/codex/security/cli/bulk-scans) * [Run scans in CI](https://developers.openai.com/codex/security/cli/ci) * [Reference](https://developers.openai.com/codex/security/cli/reference) * [FAQ](https://developers.openai.com/codex/security/cli/faq) * [TypeScript SDK](https://developers.openai.com/codex/security/sdk) * Codex Security cloud * [Setup](https://developers.openai.com/codex/security/setup) * [Security Review](https://developers.openai.com/codex/security/security-review) * [Improving the threat model](https://developers.openai.com/codex/security/threat-model) * [FAQ](https://developers.openai.com/codex/security/faq) ### Cyber safety * [Models & Trusted Access](https://developers.openai.com/codex/cyber-safety) * [Recommended configuration](https://developers.openai.com/codex/cyber-safety/recommended-configuration) * [Overview](https://developers.openai.com/codex/administration) ### Getting started * [Admin rollout guide](https://developers.openai.com/codex/enterprise/admin-setup) * [ChatGPT Work Overview](https://developers.openai.com/codex/enterprise/chatgpt-work-overview) * [ChatGPT Work admin FAQ](https://developers.openai.com/codex/enterprise/work-admin-faq) ### Identity and authentication * [Authentication overview](https://developers.openai.com/codex/auth) * [Personal Access Tokens](https://developers.openai.com/codex/enterprise/access-tokens) * [Service accounts](https://developers.openai.com/codex/enterprise/service-accounts) ### Workspace access, policy, and models * [Groups and provisioning](https://developers.openai.com/codex/enterprise/groups-and-provisioning) * [Roles and workspace permissions](https://developers.openai.com/codex/enterprise/roles-and-workspace-permissions) * [GPTs and Sharing](https://developers.openai.com/codex/enterprise/gpts-and-sharing) * [Managed configuration](https://developers.openai.com/codex/enterprise/managed-configuration) * [Prisma AIRS](https://developers.openai.com/codex/enterprise/prisma-airs) * [HIPAA configuration](https://developers.openai.com/codex/hipaa-configuration) * [Workspace model availability](https://developers.openai.com/codex/enterprise/workspace-model-availability) ### Plugin and connector controls * [Plugin controls](https://developers.openai.com/codex/enterprise/apps-and-connectors) * [Skill controls](https://developers.openai.com/codex/enterprise/skills) ### Usage, governance, and compliance * [Governance](https://developers.openai.com/codex/enterprise/governance) * [Workspace analytics](https://developers.openai.com/codex/enterprise/workspace-analytics) * [Analytics API](https://developers.openai.com/codex/enterprise/analytics-api) * [Compliance API and audit events](https://developers.openai.com/codex/enterprise/compliance-api) ### Deployment and model providers * [Manage app updates](https://developers.openai.com/codex/enterprise/manage-app-updates) * [Windows app deployment](https://developers.openai.com/codex/enterprise/windows-deployment) * [Remote connections](https://developers.openai.com/codex/remote-connections) * [Amazon Bedrock](https://developers.openai.com/codex/amazon-bedrock) * [Explore use cases](https://developers.openai.com/codex/use-cases) * [Collections](https://developers.openai.com/codex/use-cases/collections) * [Home](https://developers.openai.com/codex/resources) * [Videos](https://developers.openai.com/codex/videos) * [Showcase](https://developers.openai.com/showcase) * [OpenAI Academy](https://openai.com/academy/) * [Online trainings](https://academy.openai.com/home/events) ### Community * [Codex Ambassadors](https://developers.openai.com/community/codex-ambassadors) * [Codex for Students](https://developers.openai.com/community/students) * [Codex for Open Source](https://developers.openai.com/community/codex-for-oss) * [Meetups](https://developers.openai.com/community/meetups) ### Blog * [Company blog](https://openai.com/news/) * [Developer blog](https://developers.openai.com/blog) * [Explore use cases](https://developers.openai.com/codex/use-cases) * [Collections](https://developers.openai.com/codex/use-cases/collections) * [Home](https://developers.openai.com/codex/resources) * [Videos](https://developers.openai.com/codex/videos) * [Showcase](https://developers.openai.com/showcase) * [OpenAI Academy](https://openai.com/academy/) * [Online trainings](https://academy.openai.com/home/events) ### Community * [Codex Ambassadors](https://developers.openai.com/community/codex-ambassadors) * [Codex for Students](https://developers.openai.com/community/students) * [Codex for Open Source](https://developers.openai.com/community/codex-for-oss) * [Meetups](https://developers.openai.com/community/meetups) ### Blog * [Company blog](https://openai.com/news/) * [Developer blog](https://developers.openai.com/blog) [Showcase](https://developers.openai.com/showcase) Blog Cookbook Learn Community Docs section Select... * [All posts](https://developers.openai.com/blog) ### Recent * [Custom Code Review rules for Codex](https://developers.openai.com/blog/custom-code-review-rules-for-codex) * [Mastering remote engineering work from your phone](https://developers.openai.com/blog/mastering-codex-remote-for-engineering) * [Making private MCP servers reachable without making them public](https://developers.openai.com/blog/connect-private-mcp-servers-to-openai-products) * [How Perplexity Brought Voice Search to Millions Using the Realtime API](https://developers.openai.com/blog/realtime-perplexity-computer) * [Designing delightful frontends with GPT-5.4](https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4) ### Topics * [General](https://developers.openai.com/blog/topic/general) * [API](https://developers.openai.com/blog/topic/api) * [Apps SDK](https://developers.openai.com/blog/topic/apps-sdk) * [Audio](https://developers.openai.com/blog/topic/audio) * [Codex](https://developers.openai.com/blog/topic/codex) * [Home](https://developers.openai.com/cookbook) ### Topics * [Agents](https://developers.openai.com/cookbook/topic/agents) * [Evals](https://developers.openai.com/cookbook/topic/evals) * [Multimodal](https://developers.openai.com/cookbook/topic/multimodal) * [Text](https://developers.openai.com/cookbook/topic/text) * [Guardrails](https://developers.openai.com/cookbook/topic/guardrails) * [Optimization](https://developers.openai.com/cookbook/topic/optimization) * [ChatGPT](https://developers.openai.com/cookbook/topic/chatgpt) * [Codex](https://developers.openai.com/cookbook/topic/codex) * [gpt-oss](https://developers.openai.com/cookbook/topic/gpt-oss) ### Contribute * [Cookbook on GitHub](https://github.com/openai/openai-cookbook) * [Home](https://developers.openai.com/learn) * [OpenAI Developers plugin](https://developers.openai.com/learn/developers-codex-plugin) * [Docs MCP](https://developers.openai.com/learn/docs-mcp) ### Categories * [Demo apps](https://developers.openai.com/learn/code) * [Videos](https://developers.openai.com/learn/videos) ### Topics * [Agents](https://developers.openai.com/learn/agents) * [Audio & Voice](https://developers.openai.com/learn/audio) * [Computer Use](https://developers.openai.com/learn/cua) * [Codex](https://developers.openai.com/learn/codex) * [Evals](https://developers.openai.com/learn/evals) * [gpt-oss](https://developers.openai.com/learn/gpt-oss) * [Fine-tuning](https://developers.openai.com/learn/fine-tuning) * [Image generation](https://developers.openai.com/learn/imagegen) * [Scaling](https://developers.openai.com/learn/scaling) * [Tools](https://developers.openai.com/learn/tools) * [Video generation](https://developers.openai.com/learn/videogen) * [Community](https://developers.openai.com/community) ### Programs * [Codex Ambassadors](https://developers.openai.com/community/codex-ambassadors) * [Codex for Students](https://developers.openai.com/community/students) * [Codex for Open Source](https://developers.openai.com/community/codex-for-oss) * [OpenAI for Startups](https://openai.com/business/why-openai/startups/) ### Events * [Meetups](https://developers.openai.com/community/meetups) ### Spaces * [Developer Forum](https://community.openai.com/) * [Discord](https://discord.com/invite/openai) * [Reddit](https://www.reddit.com/r/OpenAI/) * [X](https://x.com/OpenAIDevs) [API Dashboard](https://platform.openai.com/login) [Try ChatGPT](https://chatgpt.com/) * [Home](https://developers.openai.com/plugins) * [Quickstart](https://developers.openai.com/plugins/quickstart) ### Core concepts * [Plugin architecture](https://developers.openai.com/plugins/concepts/plugins) * [Skills](https://developers.openai.com/plugins/concepts/skills) * [MCP server](https://developers.openai.com/plugins/concepts/mcp-server) ### Plan * [Brainstorm use cases](https://developers.openai.com/plugins/plan/use-case) * [Define tools](https://developers.openai.com/plugins/plan/tools) ### Build * [Build an MCP server](https://developers.openai.com/plugins/build/mcp-server) * [Add UI to your MCP server (optional)](https://developers.openai.com/plugins/build/chatgpt-ui) * [Authenticate users](https://developers.openai.com/plugins/build/auth) * [Build skills](https://developers.openai.com/plugins/build/skills) * [Package your plugin](https://developers.openai.com/plugins/build/plugins) * [Examples](https://developers.openai.com/plugins/build/examples) ### Test and publish * [Connect and test your plugin](https://developers.openai.com/plugins/deploy/connect-chatgpt) * [Submit and publish](https://developers.openai.com/plugins/deploy/submission) * [Submission error reference](https://developers.openai.com/plugins/deploy/submission-errors) ### Conversion specs * [Restaurant reservation spec](https://developers.openai.com/plugins/guides/restaurant-reservation-conversion-spec) * [Get Quote spec](https://developers.openai.com/plugins/guides/local-services-request-quote-conversion-spec) * [Product checkout spec](https://developers.openai.com/plugins/guides/product-checkout-conversion-spec) ### Guides * [UI guidelines](https://developers.openai.com/plugins/concepts/ui-guidelines) * [Optimize Metadata](https://developers.openai.com/plugins/guides/optimize-metadata) * [Submit a Claude Code plugin](https://developers.openai.com/plugins/guides/submit-claude-plugin) * [Security & Privacy](https://developers.openai.com/plugins/guides/security-privacy) * [Troubleshooting](https://developers.openai.com/plugins/deploy/troubleshooting) ### Resources * [Changelog](https://developers.openai.com/plugins/changelog) * [Plugin guidelines](https://developers.openai.com/plugins/app-guidelines) * [MCP server review requirements](https://developers.openai.com/plugins/deploy/app-review) * [Plugin UI reference](https://developers.openai.com/plugins/reference) * [Checkout API reference](https://developers.openai.com/plugins/build/monetization) Copy Page # UI guidelines Guidelines for designing optional plugin UI in ChatGPT. Copy Page ## Overview Optional plugin UI can extend what users can do without breaking the flow of conversation. Use cards, carousels, fullscreen views, and other display modes only when visual interaction improves the workflow. ![Image 2: Example apps in the ChatGPT mobile interface](https://developers.openai.com/images/apps-sdk/overview.png) ## Design system To design high-quality UI that feels native to ChatGPT, you can use the [`@openai/apps-sdk-ui`](https://openai.github.io/apps-sdk-ui/) component library. It provides styling foundations with Tailwind, CSS variable design tokens, and a library of well-crafted, accessible components. The component library is optional. It provides a faster way to build components that match the ChatGPT design system. Before diving into code, start designing with our [Figma component library](https://www.figma.com/community/file/1625636989296445101) ## Display modes Display modes are the surfaces developers use to create experiences for apps in ChatGPT. They allow partners to show content and actions that feel native to conversation. Each mode is designed for a specific type of interaction, from quick confirmations to immersive workflows. Using these consistently helps experiences stay basic and predictable. ### Inline The inline display mode appears directly in the flow of the conversation. Inline surfaces currently always appear before the generated model response. Every app initially appears inline. ![Image 3: Examples of inline cards and carousels in ChatGPT](https://developers.openai.com/images/apps-sdk/inline_display_mode.png) **Layout** * **Icon & tool call**: A label with the app name and icon. * **Inline display**: A lightweight display with app content embedded above the model response. * **Follow-up**: A short, model-generated response shown after the widget to suggest edits, next steps, or related actions. Avoid content that is redundant with the card. #### Inline card Lightweight, single-purpose widgets embedded directly in conversation. They provide quick confirmations, basic actions, or visual aids. **When to use** * A single action or decision (for example, confirm a booking). * Small amounts of structured data (for example, a map, order summary, or quick status). * A fully self-contained widget or tool (for example, an audio player or a score card). **Layout** ![Image 4: Diagram of inline cards](https://developers.openai.com/images/apps-sdk/inline_card_layout.png) * **Title**: Include a title if your card is document-based or contains items with a parent element, like songs in a playlist. * **Expand**: Use to open a fullscreen display mode if the card contains rich media or interactivity like a map or an interactive diagram. * **Show more**: Use to disclose additional items if multiple results are presented in a list. * **Edit controls**: Provide inline support for app responses without overwhelming the conversation. * **Primary actions**: Limit to two actions, placed at bottom of card. Actions should perform either a conversation turn or a tool call. **Interaction** ![Image 5: Diagram of interaction patterns for inline cards](https://developers.openai.com/images/apps-sdk/inline_card_interaction.png) Cards support basic direct interaction. * **States**: Edits made are persisted. * **Basic direct edits**: If appropriate, inline editable text allows users to make quick edits without needing to prompt the model. * **Dynamic layout**: Card layout can expand its height to match its contents up to the height of the mobile display area. **Rules of thumb** * **Limit primary actions per card**: Support up to two actions maximum, with one primary CTA and one optional secondary CTA. * **No deep navigation or multiple views within a card.** Cards should not contain multiple drill-ins, tabs, or deeper navigation. Consider splitting these into separate cards or tool actions. * **No nested scrolling**. Cards should auto fit their content and prevent internal scrolling. * **No duplicate inputs**. Don’t replicate ChatGPT features in a card. ![Image 6: Examples of patterns to avoid in inline cards](https://developers.openai.com/images/apps-sdk/inline_card_rules.png) #### Inline carousel A set of cards presented side-by-side, letting users quickly scan and choose from multiple options. **When to use** * Presenting a small list of similar items (for example, restaurants, playlists, events). * Items have more visual content and metadata than will fit in basic rows. **Layout** ![Image 7: Diagram of inline carousel](https://developers.openai.com/images/apps-sdk/inline_carousel_layout.png) * **Image**: Items should always include an image or visual. * **Title**: Carousel items should typically include a title to explain the content. * **Metadata**: Use metadata to show the most important and relevant information about the item in the context of the response. Avoid showing more than two lines of text. * **Badge**: Use the badge to show supporting context where appropriate. * **Actions**: Provide a single clear CTA per item whenever possible. **Rules of thumb** * Keep to **3–8 items per carousel** for readability. * Reduce metadata to the most relevant details, with three lines max. * Each card may have a single, optional CTA (for example, “Book” or “Play”). * Use consistent visual hierarchy across cards. ### fullscreen Immersive experiences that expand beyond the inline card, giving users space for multi-step workflows or deeper exploration. The ChatGPT composer remains overlaid, allowing users to continue “talking to the app” through natural conversation in the context of the fullscreen view. **When to use** * Rich tasks that cannot be reduced to a single card (for example, an interactive map with pins, a rich editing canvas, or an interactive diagram). * Browsing detailed content (for example, real estate listings, menus). **Layout** ![Image 8: Diagram of fullscreen](https://developers.openai.com/images/apps-sdk/fullscreen_layout.png) * **System close**: Closes the sheet or view. * **fullscreen view**: Content area. * **Composer**: ChatGPT’s native composer, allowing the user to follow up in the context of the fullscreen view. **Interaction** ![Image 9: Interaction patterns for fullscreen](https://developers.openai.com/images/apps-sdk/fullscreen_interaction_a.png) * **Chat sheet**: Maintain conversational context alongside the fullscreen surface. * **Thinking**: The composer input “shimmers” to show that a response is streaming. * **Response**: When the model completes its response, an ephemeral, truncated snippet displays above the composer. Tapping it opens the chat sheet. **Rules of thumb** * **Design your UX to work with the system composer**. The composer is always present in fullscreen, so make sure your experience supports conversational prompts that can trigger tool calls and feel natural for users. * **Use fullscreen to deepen engagement**, not to replicate your native app wholesale. ### Picture-in-picture (PiP) A persistent floating window inside ChatGPT optimized for ongoing or live sessions like games or videos. PiP remains visible while the conversation continues, and it can update dynamically in response to user prompts. **When to use** * **Activities that run in parallel with conversation**, such as a game, live collaboration, quiz, or learning session. * **Situations where the PiP widget can react to chat input**, for example continuing a game round or refreshing live data based on a user request. **Interaction** ![Image 10: Interaction patterns for picture-in-picture](https://developers.openai.com/images/apps-sdk/fullscreen_interaction.png) * **Activated:** On scroll, the PiP window stays fixed to the top of the display area * **Pinned:** The PiP remains fixed until the user dismisses it or the session ends. * **Session ends:** The PiP returns to an inline position and scrolls away. **Rules of thumb** * **Ensure the PiP state can update or respond** when users interact through the system composer. * **Close PiP automatically** when the session ends. * **Do not overload PiP with controls or static content** better suited for inline or fullscreen. ## Visual design guidelines A consistent look and feel helps partner-built tools feel like a natural part of the ChatGPT platform. Visual guidelines support clarity, usability, and accessibility, while still leaving room for brand expression in the right places. These principles outline how to use color, type, spacing, and imagery in ways that preserve system clarity while giving partners space to differentiate their service. ### Why this matters Visual and UX consistency helps improve the overall user experience of using apps in ChatGPT. By following these guidelines, partners can present their tools in a way that feels consistent to users and delivers value without distraction. ### Color System-defined palettes help ensure actions and responses always feel consistent with the ChatGPT platform. Partners can add branding through accents, icons, or inline imagery, but should not redefine system colors. ![Image 11: Color palette](https://developers.openai.com/images/apps-sdk/color.png) **Rules of thumb** * Use system colors for text, icons, and spatial elements like dividers. * Partner brand accents such as logos or icons should not override backgrounds or text colors. * Avoid custom gradients or patterns that break ChatGPT’s minimal look. * Use brand accent colors on primary buttons inside app display modes. ![Image 12: Example color usage](https://developers.openai.com/images/apps-sdk/color_usage_1.png) _Use brand colors on accents and badges. Don’t change text colors or other core component styles._ ![Image 13: Example color usage](https://developers.openai.com/images/apps-sdk/color_usage_2.png) _Don’t apply colors to backgrounds in text areas._ ### Typography ChatGPT uses platform-native system fonts (SF Pro on iOS, a sans-serif font on Android) to ensure readability and accessibility across devices. ![Image 14: Typography](https://developers.openai.com/images/apps-sdk/typography.png) **Rules of thumb** * Always inherit the system font stack, respecting system sizing rules for headings, body text, and captions. * Use partner styling such as bold, italic, or highlights only within content areas, not for structural UI. * Limit variation in font size as much as possible, preferring body and body-small sizes. ![Image 15: Example typography](https://developers.openai.com/images/apps-sdk/typography_usage.png) _Don’t use custom fonts, even in full screen modes. Use system font variables wherever possible._ ### Spacing & layout Consistent margins, padding, and alignment keep partner content scannable and predictable inside conversation. ![Image 16: Spacing & layout](https://developers.openai.com/images/apps-sdk/spacing.png) **Rules of thumb** * Use system grid spacing for cards, collections, and inspector panels. * Keep padding consistent and avoid cramming or edge-to-edge text. * Respect system specified corner rounds when possible to keep shapes consistent. * Maintain visual hierarchy with headline, supporting text, and CTA in a clear order. ### Icons & imagery System iconography provides visual clarity, while partner logos and images help users recognize brand context. ![Image 17: Icons](https://developers.openai.com/images/apps-sdk/icons.png) **Rules of thumb** * Use either system icons or custom iconography that fits within ChatGPT’s visual world—monochromatic and outlined. * Do not include your logo as part of the response. ChatGPT will always append your logo and app name before the widget is rendered. * All imagery must follow enforced aspect ratios to avoid distortion. ![Image 18: Icons & imagery](https://developers.openai.com/images/apps-sdk/iconography.png) ### Accessibility Every partner experience should be usable by the widest possible audience. Accessibility should be a core consideration when you are building apps for ChatGPT. **Rules of thumb** * Text and background must maintain a minimum contrast ratio (WCAG AA). * Provide alt text for all images. * Support text resizing without breaking layouts. Ask AI ## Docs agent Loading docs agent...