OpenAI 前端提示词指令

以下指令面向GPT-5.5，其中许多模式也适用于其他模型版本。它们旨在改善前端体验，可加入编程智能体的提示词中。它是供应用采用的示例，不是对本次文档制作的执行要求。

前端提示词指令（来源示例1，text）

## 前端指导
构建含前端体验的应用时，遵循以下指令。

### 以用户为出发点
- 有现成设计或上下文指定框架时，仔细遵循既有惯例，让新内容与框架和应用设计一致。
- 深入考虑目标读者，据此决定功能、布局、组件、视觉、屏幕文字及交互，让使用体验丰富、成熟。
- 设计匹配领域。SaaS、CRM等业务工具应安静、实用、专注工作，避免巨型主视觉、重装饰卡片和营销式构图，优先密集但有组织的信息、克制样式、可预测导航，以及便于浏览、比较、反复操作的界面。游戏可更具插画感、表现力、动画和趣味。
- 常用流程符合操作习惯、高效、完整，让用户顺畅进出不同视图和页面。

### 设计指令
- 工具按钮用图标，颜色用色块，模式用分段控件，二元设置用开关/复选框，数值用滑块/步进器/输入框，选项组用菜单，视图用标签页。文字或图标加文字按钮只用于明确命令，除非另有规定。卡片圆角不超过8px，现有设计系统另有要求时除外。
- 可用熟悉符号或图标时，不用内含文字的圆角矩形，如撤销/重做箭头、粗体/斜体B/I、保存/下载/缩放图标。陌生图标悬停时提供命名或说明工具提示。
- 有对应Lucide图标就使用，不手画SVG；现有应用已启用其他图标库时用该库。
- 构建目标用户自然期待的完整控件、状态、视图。
- 不用应用内可见文字描述功能、键盘快捷键、样式、视觉元素或使用方法。
- 非绝对必要不做落地页；要求网站、应用、游戏、工具时，首屏是实际可用体验，而非营销或解释内容。
- 制作主视觉页时，用相关图片、生成位图或沉浸式全出血交互场景作背景，文字叠其上且不放卡片。绝不用一侧卡片一侧文字的图文分栏，不将主视觉文字或主要体验放卡片，不用渐变/SVG主视觉页；真实或生成图片能表达主题时，不造SVG主视觉插画。
- 品牌、产品、场所、作品集或物件页面中，品牌/产品/地点/物件应在首屏明显呈现，而非仅微小导航或眉题。所有手机、桌面（含宽桌面）视口都应露出下一节一点内容。
- 落地页主视觉的H1使用品牌/产品/地点/人物名，或字面明确的产品类别/优惠；描述价值放辅助文案，不放标题。
- 网站和游戏必须用视觉资产。除游戏情形外，可以用图片搜索、已知相关图或生成位图替代SVG。主图和媒体应展示真实产品、地点、物件、状态、玩法或人物；需要检查实物时，避免暗、模糊、裁切、图库感或纯氛围媒体。高度特定的游戏素材用自定义SVG、Three.js等。
- 规则、物理、解析或AI引擎成熟的游戏/交互工具，核心领域逻辑采用经过验证的库，不手写重造，除非明确要求从零实现。
- 3D用Three.js，主要场景全出血或不设框，不放装饰卡片/预览容器。结束前用Playwright截图及画布像素检查，覆盖桌面/移动，确认非空白、取景正确、可交互/运动、引用素材正常且无重叠。
- 不把卡片放进卡片；页面小节不做浮动卡片。仅重复单项、弹窗和确需框定的工具使用卡片；页面小节用全宽条带或无框布局，内部内容限制宽度。
- 不增加独立球体、渐变光球或散景斑块作装饰或背景。
- 所有移动/桌面视口中，文字须适配父元素；必要时换行，仍不适配则动态调整尺寸，使最长单词放得下。文字不遮挡前后内容，同时保证按钮/卡片内文字专业、精致。
- 显示文字匹配容器：巨型字体仅用于真正主视觉，紧凑面板、卡片、侧栏、仪表盘、工具界面用更小、更紧凑标题。
- 棋盘、网格、工具栏、图标按钮、计数器、方块等固定形态UI，通过aspect-ratio、网格轨道、min/max或容器相对尺寸等响应式约束保持尺寸稳定，避免悬停、标签、图标、棋子、加载文字、动态内容使布局改变或移动。
- 不随视口宽度缩放字号，字距为0，不为负。
- 不使用单调单色系：避免界面被同一色相变体主导，限制大面积紫/紫蓝渐变、米白/奶油/沙/棕褐、深蓝/石板、棕/橙/浓咖啡配色。结束前检查CSS颜色，若整页呈现这些主题之一则调整。
- 确保UI与屏幕文字不发生不协调重叠，这非常重要，重叠会带来突兀体验。

网站或应用需开发服务器才能正常运行时，实现后启动本地服务并给用户URL；端口已有服务则换端口。直接打开HTML即可用的网站，不启动服务，提供可在浏览器打开的HTML链接。