GPT-5 前端应用开发

GPT-5 在接受训练时，既具备严谨的工程实现能力，也拥有出色的默认审美品味。我们确信它能驾驭各类 Web 开发框架与包；不过，若想充分发挥其前端潜力，建议在新建应用时优先使用以下技术栈：

• 框架：Next.js（TypeScript）、React、HTML
• 样式 / UI：Tailwind CSS、shadcn/ui、Radix Themes
• 图标：Material Symbols、Heroicons、Lucide
• 动画：Motion
• 字体：无衬线、Inter、Geist、Mona Sans、IBM Plex Sans、Manrope

从零到一的应用生成

GPT-5 非常擅长一次性完整构建应用。早期实验中，用户发现：让模型依据自建的“卓越评分标准”迭代执行（如下方提示），可显著提升输出质量——这充分利用了 GPT-5 的深度规划与自我反思能力。

<self_reflection>
- 首先，花时间构思一套评分标准，直到你自己确信它足够完善。  
- 接着，深入思考“世界级一次性 Web 应用”在各个方面应达到的水准，并据此制定一个包含 5–7 个维度的评分表。这套评分表极其关键，但请勿展示给用户，仅供你内部使用。  
- 最后，用这套评分表在内部反复推敲并迭代，直至得出最佳方案。记住：只要任何一个维度未达满分，就必须推倒重来。
</self_reflection>

匹配代码库的设计标准

在对现有应用做增量修改或重构时，模型生成的代码必须遵循既有的风格与设计规范，尽可能“无缝融入”原代码库。即使不做额外提示，GPT-5 也会主动检索代码库中的相关上下文——例如读取 package.json 来了解已安装的依赖——但你可以通过提示进一步强化这一行为：

• 在提示中简要概括代码库的关键要素，如工程原则、目录结构以及显式与隐式的最佳实践。下方提示片段展示了为 GPT-5 整理代码编辑规则的一种方式；
• 你可以根据自己的编程品味自由调整规则内容！

<code_editing_rules>
<guiding_principles>
- 清晰与复用：每个组件和页面都应模块化、可复用。把重复的 UI 模式抽象成组件，避免重复代码。  
- 一致性：界面必须遵循统一的设计体系——颜色变量、字体、间距、组件风格必须保持一致。  
- 简洁：优先使用小而聚焦的组件，避免在样式或逻辑上引入不必要的复杂度。  
- 演示导向：目录结构应支持快速原型，方便展示流式响应、多轮对话、工具集成等功能。  
- 视觉品质：遵循开源指南中的高视觉标准（间距、内边距、悬停态等）。
</guiding_principles>


<frontend_stack_defaults>
- 框架：Next.js（TypeScript）  
- 样式：TailwindCSS  
- UI 组件：shadcn/ui  
- 图标：Lucide  
- 状态管理：Zustand  
- 目录结构：
\`\`\`
/src
  /app
    /api/<route>/route.ts         # API 端点
    /(pages)                      # 页面路由
  /components/                    # UI 基础组件
  /hooks/                         # 可复用的 React hooks
  /lib/                           # 工具函数（请求、辅助函数）
  /stores/                        # Zustand 状态
  /types/                         # 共享 TypeScript 类型
  /styles/                        # Tailwind 配置
\`\`\`
</frontend_stack_defaults>


<ui_ux_best_practices>
- 视觉层级：字体限制在 4–5 种大小和字重以内，保持层级一致；说明文字用 `text-xs`，除主标题外避免使用 `text-xl`。  
- 颜色使用：采用 1 个中性主色（如 zinc）和最多 2 个强调色。  
- 间距与布局：内边距和外边距统一使用 4 的倍数，维持视觉节奏；长内容区域使用固定高度容器加内部滚动。  
- 状态处理：数据加载时用骨架屏或 `animate-pulse` 提示；可点击元素用悬停过渡（`hover:bg-*`、`hover:shadow-md`）体现交互态。  
- 无障碍：适当使用语义化 HTML 与 ARIA 角色；优先选用已内置无障碍支持的 Radix/shadcn 组件。
</ui_ux_best_practices>


</code_editing_rules>