使用 GPT-5 进行前端编码

GPT-5 在前端开发中实现了巨大飞跃。我们观察到，它能够在一次对话中开发出完整的全栈应用，轻松完成复杂重构，并在大型代码库中进行精准修改。

本手册将通过多个维度展示使用 GPT-5 开发前端应用的示例与经验。

介绍

我们总结了几条通用原则，可帮助你借助 GPT-5 构建高质量前端应用，并已在提示指南中分享。以下是构建前端时需要重点关注的要素。

推荐起步的库与包（用于引导模型）：

• 框架：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

上述列表并不穷尽，我们已见证多种应用风格诞生。

下面提供一个极简方式，让你通过 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:
        return html_block.group(1)
    any_block = re.search(r"```\s*(.*?)\s*```", text, re.DOTALL)
    if any_block:
        return any_block.group(1)
    return text


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


    outputs_dir = base_dir / "outputs"
    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",
)

单句提示即可生成页面！

接下来，我们将其调性改为更轻盈、柔和：

make_website_and_open_in_browser(
    website_input="为我制作一个复古游戏商店的落地页，风格更明亮、柔和、带点花卉元素（像马里奥，而非赛博朋克）",
    filename="retro_light.html"
)

可见 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"
)

GPT-5 完美匹配了现有风格与氛围。

目前示例还比较静态，让我们试试更具交互性的任务：

make_website_and_open_in_browser(
    website_input="为我做一个贪吃蛇游戏，未来主义、霓虹、赛博朋克风格，排版要足够酷炫。",
    filename="snake_game.html"
)

我们得到了一个主题统一的贪吃蛇游戏：配色、排版、音效一应俱全。

从一句简单提示 + 一次 API 调用，即可产出生产级前端。希望这些示例能激发你的灵感。

现在轮到你动手了——我们迫不及待想看到你将构建的网页：

your_prompt = "[在此编辑！你想构建什么网站？]"


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