拓冰网站定制 
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 品牌强调 视觉设计：主题、配色、排版、间距与现成库
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 品牌强调