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 品牌强调
企业数字化 ERP 产品动态
相关推荐
XSS系统性复习：从三类漏洞原理到SpringBoot与文件上传实战修复 XSS这个知识点，说简单也简单，无非就是往页面里塞一段脚本；但说复杂，它可以从一枚alert(1)一路延伸到一个完整的攻击链。我刚入行那会儿也以为这题目太基础，结果在真实项目里被一个文件上传点卡了半天，才意识… · 2026/9/24 18:55:22
基于EVE-NG抓包分析STP BPDU：从原理到故障排查实践 1. 实验目标：为什么STP适合放进EVE-NG做流量洞察1.1 这期实验解决什么问题STP（Spanning Tree Protocol，生成树协议）是二层网络里无论如何都绕不开的协议，也是很多工程师觉得“原理背得挺熟，一到排障就发懵”… · 2026/9/24 18:55:22
EVE-NG实战：Wireshark抓包深度解析STP与BPDU 1. 为什么要在EVE-NG里研究STP流量搞网络的人都知道一句话：交换网络最怕的不是没有带宽，而是环没消掉。我早年在客户现场遇到过全网交换机疯狂刷MAC漂移告警，整个办公网时断时续，查了大半天才发现两台汇聚交换机之间被多接了一根跳… · 2026/9/24 18:55:22
基础OJ第二天：吃透04-06题，避开多组输入与格式陷阱 走出新手村的第一步，往往不是会写代码，而是会读题。第二天继续推进基础OJ的04到06题，这个节奏其实非常关键。很多人第一天兴致勃勃刷了前三题，第二天一上来看见题目变长、格式复杂就直接卡住，心态崩一大半。这个阶段真… · 2026/9/24 19:35:10
MySQL CONVERT函数实战：类型转换、隐式转换与索引失效全攻略 在MySQL里做开发，类型转换是躲不开的活儿。不管是接外部接口、清洗历史数据，还是写报表SQL，总会遇到“明明字段看着是数字，一排序就变成1、10、2”这种糟心事。这时候很多人第一个想到的是CONVERT函数，但真用起来又容易… · 2026/9/24 19:35:10
掌握ROC曲线与PR曲线：分类模型评估关键技巧全解析 1. 从一次模型评估翻车说起：为什么单看准确率远远不够 我印象特别深，有次给一个信贷风控模型做评测，测试集里坏样本只有3%。模型跑完，准确率98.7%，当时团队里有人差点直接拍板上线。后来我们把预测结果拉出来一看&… · 2026/9/24 19:35:10
亚马逊SIOC认证全解析：从包装测试到数字备案实战指南 1. SIOC不是新概念，而是亚马逊物流体系里藏得最深的“通关文牒”你刚在卖家后台点开一个新品链接，准备上架，系统突然弹出红色警告：“SIOC未通过，无法启用原包装直发（FBA Ship-in-Own-Container）… · 2026/9/24 19:35:10
需求评审中多问一句：从表面诉求挖出真实业务价值 最近一次需求评审会上，业务方提了一个客户管理模块的需求，理由是“方便销售跟进”。负责分析的同学多问了一句：“方便销售跟进，然后呢？”现场安静了几秒。有人说：“销售就不会漏单了。”再问：“… · 2026/9/24 19:35:10
GTA5 460报错排查：GPU TDR与D3D初始化失败的完整修复指南 1. 先别急着翻论坛，460报错的真实来源藏在系统日志里大概半年前，我遇到GTA5启动没几分钟就弹ERR_GFX_D3D_INIT的460报错，画面一黑、驱动停止响应，然后被踢回桌面。那时候我和大多数人一样，第一反应就是去贴吧、论坛一页… · 2026/9/24 19:35:04
基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程 简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战：从Conv1d原理到工业落地 简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26
柔软的L：汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44
