视觉设计：主题、配色、排版、间距与现成库-北京尧图网络

1. 背景：你的 App 是 ChatGPT 家中的客人在画按钮、选字体之前，先接受一个现实：用户并未打开“你的网站”，他正身处 ChatGPT。ChatGPT 已经自带了：配色方案，字体与字号，间距与元素布局。你的小部件会展示在这个环境中，通常是在 iframe 里。重要结论是：视觉上 App 应该像 ChatGPT 界面的自然延伸，而不是一个来自 2008 年的横幅。OpenAI 的官方指南正是强调这一点：不要破坏系统颜色与字体，只做克制的品牌强调，并遵循平台的基本排版与间距网格。落到实操，这意味着三件事。首先，背景、基础文字颜色、标准排版——都应当从 ChatGPT 或系统变量继承，而不是“我就是这么想的”。其次，如果你想要“自己的风格”，请把它集中在强调部件上：主要按钮、徽章、强调态等，而不是彩虹背景或自定义的 Comic Sans 字体——哪怕你内心再想。第三，同一个 App 的 inline 与 fullscreen 模式在视觉上必须是一致的世界：相同的 CTA 颜色、相同的卡片圆角与间距、相同的排版。用户从 inline 切到 fullscreen 时不该感觉进入了另一个产品。接下来按层来拆：颜色与主题、排版、间距与网格，然后看看 Tailwind 和 shadcn/ui 如何把它们拼起来。洞察ChatGPT sandbox 不仅限制你小部件的功能，还会给它加上自己的样式。首先——HTML 根元素站点原始代码：html lang="ru"在沙盒中：html lang="en-US" style="--safe-area-inset-top: 0px; --safe-area-inset-bottom: 0px; --safe-area-inset-left: 0px; --safe-area-inset-right: 0px;"其次——系统自带的 CSS 样式，让你的小部件更像 ChatGPT：style html,body,#root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0} html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif!important} button,input,textarea,select{font-family:inherit} html{background-color:#fff} html.dark{background-color:#212121} html.mobileSkybridge.dark{background-color:#000} @supports (font: -apple-system-body){html.mobileSkybridge{font:-apple-system-body}} /style请牢记这一点——意外会更少。2. 主题与配色：同时生活在浅色与深色宇宙浅色与深色主题ChatGPT 界面已经支持浅色与深色主题。你的小部件会展示在其中之一，且用户可以随时切换。因此，任何硬编码的纯白或纯黑背景都可能是地雷。想象一个小部件，白底黑字。在浅色主题下还能接受；在深色主题里就像探照灯直射眼睛。反过来，在浅色主题里硬上黑底也不妙。这就是为什么官方建议不要硬编码颜色，而应依赖宿主的主题/变量。在 Apps SDK 的环境中，通常会提供当前主题的 API 或 CSS 变量。文档中会出现类似 window.openai.theme 的方式，以及使用 ChatGPT 的标准 CSS 变量。当然也可以利用 prefers-color-scheme 与 Tailwind 的 dark: 工具类。核心思路：你的小部件应根据宿主主题自动调整下列内容：卡片背景（比底色略浅/略深），文本颜色（满足足够对比度），边框、阴影与 hover 状态。一个基于 Tailwind 的最简单主题包裹：// components/AppShell.tsx export function AppShell({ children }: { children: React.ReactNode }) { return ( div className="bg-background text-foreground" {/* bg-background/text-foreground 由主题重写 */} {children} /div ); }其中 bg-background 与 text-foreground 并非 Tailwind 的默认类，而是你设计系统（例如 shadcn/ui）中映射到 CSS 变量的别名，这些变量再与 ChatGPT 的浅/深主题绑定。系统颜色 vs 品牌强调

视觉设计：主题、配色、排版、间距与现成库

相关推荐

XSS系统性复习：从三类漏洞原理到SpringBoot与文件上传实战修复

基于EVE-NG抓包分析STP BPDU：从原理到故障排查实践

EVE-NG实战：Wireshark抓包深度解析STP与BPDU

更多资讯

MySQL基础(二)：增删改查、索引优化与锁表排查实战

ClickHouse 高性能分析实战指南：表引擎选型、查询优化与数据管道设计（基于 AAS cc-skill-clickhouse-io）

深入解析Mach-O __common节：C语言全局变量与链接器合并机制

栅格数据组织、转换与统计导出Excel的完整实践指南

RS485通讯从原理到实战：参数、外围电路与接线排查全解析

Windows上配置codex辅助JS逆向：从安装到实战的完整指南

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？