GPT-5 驱动的前端开发

GPT-5 是前端开发的一次重大飞跃。我们已经看到该模型能够一次性开发全栈应用程序，轻松完成复杂的重构，并在大型代码库中进行精准编辑。

在本指南中，我们将展示一些跨多个维度使用 GPT-5 开发前端应用程序的示例和经验。

简介

我们已经看到一些通用的原则在开发强大的前端应用程序方面非常有效。我们在提示指南中分享了其中一些经验。以下是构建前端应用程序时需要考虑的一些重要方面。

以下是我们建议用于指导模型的库和包：

框架：Next.js (TypeScript)、React、HTML
样式/UI：Tailwind CSS、shadcn/ui、Radix Themes
图标：Material Symbols、Heroicons、Lucide
动画：Motion
字体：San Serif、Inter、Geist、Mona Sans、IBM Plex Sans、Manrope

这些包并非详尽无遗的列表，我们已经看到了许多不同的应用程序样式。

下面您将找到一种迭代 API 前端抽象的简单方法。我们热切期待用户能够通过 GPT-5 解锁创造力。

交互式示例

让我们深入探讨一个从头开始创建前端的示例。首先，让我们创建一些帮助函数来查看 GPT-5 生成的网站。

import os
import re
import webbrowser
from pathlib import Path

import openai
from openai.types.responses import ResponseInputParam

client = openai.OpenAI()


def get_response_output_text(input: str | ResponseInputParam):

    response = client.responses.create(
        model="gpt-5",
        input=input,
    )
    return response.output_text


def extract_html_from_text(text: str):
    """从文本中提取 HTML 代码块；如果不存在，则回退到第一个代码块，否则返回全部文本。"""
    html_block = re.search(r"```html\s*(.*?)\s*```", text, re.DOTALL | re.IGNORECASE)
    if html_block:
        result = html_block.group(1)
        return result
    any_block = re.search(r"```\s*(.*?)\s*```", text, re.DOTALL)
    if any_block:
        result = any_block.group(1)
        return result
    return text


def save_html(html: str, filename: str) -> Path:
    """将 HTML 保存到 outputs/ 目录并返回路径。"""
    try:
        base_dir = Path(__file__).parent
    except NameError:
        base_dir = Path.cwd()

    folder = "outputs"
    outputs_dir = base_dir / folder
    outputs_dir.mkdir(parents=True, exist_ok=True)

    output_path = outputs_dir / filename
    output_path.write_text(html, encoding="utf-8")
    return output_path

def open_in_browser(path: Path) -> None:
    """在默认浏览器中打开文件（兼容 macOS）。"""
    try:
        webbrowser.open(path.as_uri())
    except Exception:
        os.system(f'open "{path}"')

现在，让我们将以上内容组合成一个辅助函数。

def make_website_and_open_in_browser(*, website_input: str | ResponseInputParam, filename: str = "website.html"):
    response_text = get_response_output_text(website_input)
    html = extract_html_from_text(response_text)
    output_path = save_html(html, filename)
    open_in_browser(output_path)

我们将从一个简单的示例开始：一次性构建一个具有合适主题的复古游戏商店。

make_website_and_open_in_browser(
    website_input="为我制作一个复古游戏商店的着陆页。有人可能会说是复古街机黑色风格。",
    filename="retro_dark.html",
)

get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/retro_dark.html
open_in_browser: finished

一行代码、一次性提示，效果还不错！

现在，让我们将其引导得更明亮、更柔和一些。

make_website_and_open_in_browser(
    website_input="为我制作一个复古游戏商店的着陆页。使其明亮、色彩更柔和、更具花卉风格（想想马里奥，而不是赛博朋克）", 
    filename="retro_light.html"
)

get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/retro_light.html
open_in_browser: finished

正如您所见，GPT-5 的可控性极强——只需一行提示，即可轻松更改整个应用程序。

但是，如果您有现有的网站设计并想对其进行添加呢？例如，我们已经有了这个仪表板。

由于 GPT-5 本身就是多模态的，并且接受图像和文本输入，因此在生成前端应用程序时，我们可以利用图像输入来提高模型性能。

import base64
from openai.types.responses import ResponseInputImageParam

# 编码图像的函数
def encode_image(image_path: str):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

image_path="../../images/input_image.png"
encoded_image = encode_image(image_path)
input_image: ResponseInputImageParam = {"type": "input_image", "image_url": f"data:image/png;base64,{encoded_image}", "detail": "auto"}
input: ResponseInputParam = [
    {
        "role": "user",
        "content": [
            {"type": "input_text", "text": "你能为这个网站创建一个登录页面，并保持相同的风格吗？"},
            input_image,
        ],
    }
]

make_website_and_open_in_browser(
    website_input=input, 
    filename="login_page.html"
)

get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/login_page.html
open_in_browser: finished

正如您所见，GPT-5 在匹配应用程序的现有风格和氛围方面做得非常出色。

到目前为止，这都是相当静态的——让我们尝试一个更具交互性的任务。

make_website_and_open_in_browser(
    website_input="给我做一个贪吃蛇游戏。它应该是未来主义、霓虹灯、赛博朋克风格。确保排版足够酷。", 
    filename="snake_game.html"
)

get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/snake_game.html
open_in_browser: finished

我们得到了一个主题一致的贪吃蛇游戏：匹配的颜色、排版，甚至还有声音。

我们希望这能让您对 GPT-5 在前端方面的强大功能有所了解。从一个未充分指定的提示和 API 调用，我们就能获得生产级的输出。

现在轮到您了——我们迫不及待地想看到您将构建什么。

your_prompt = "[编辑这个！您想构建什么网站？]"

make_website_and_open_in_browser(
    website_input=your_prompt, 
    filename="your_website.html"
)

get_response: finished
extract_html_from_text: finished (raw text)
save_html: finished -> outputs/your_website.html
open_in_browser: finished