# 策展 · X (Twitter) 🔥🔥🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：ChatGPT (@ChatGPTapp) · 平台：X (Twitter) · 日期：2026-07-15

> 原始來源：https://x.com/ChatGPTapp/status/2077123809677906328

## 中文摘要

ChatGPT 推出 Sites 與 Build Web Apps 讓使用者直接建置網頁。

**核心功能與應用**
使用者現在可以透過 ChatGPT 內建的「Sites」與「Build Web Apps」外掛，將開發流程整合於對話中，實現從構思到部署的端到端開發。根據演示內容，開發者不僅能快速生成網頁，還能透過視覺化工具進行即時調整：
- 系統提供多種設計風格供選擇，例如「The Living Grid」、「Issue No. 26」及「Catalog Orbit」。
- 具備內建的瀏覽器標註工具，讓使用者能直接在預覽畫面上點擊並輸入修改建議，系統會據此更新程式碼。
- 部署流程高度簡化，演示中生成的網頁應用程式可直接發布至 `form-field-2026.openai.chatgpt.site` 等網域。

**開發流程演示**

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784082811610-xaazqruh.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/a396f1334bd12b2a.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 一位講者展示如何透過 ChatGPT 的 Sites 與 Build Web Apps 外掛，直接在對話介面中建置並部署網頁應用程式與遊戲。

根據演示影片，開發網頁與遊戲的步驟如下：
1. 啟用「Sites」外掛，並開啟「Sites Building」與「Sites Hosting」等 skill。
2. 選擇系統生成的設計風格，並透過對話介面輸入需求。
3. 使用瀏覽器標註工具選取網頁元素，並輸入修改指令進行視覺調整。
4. 切換至「Build Web Apps」外掛，即可進行更複雜的專案開發，例如演示中展示的 2D 橫向捲軸遊戲「MOXIE & THE MOONBYTE」，畫面顯示該遊戲具備生命值、分數與關卡名稱等介面元素。

**技術觀察**
此次更新顯示 ChatGPT 正從單純的文字與程式碼生成工具，轉向具備完整開發環境（workspace）的 Agent 平台。透過將部署與視覺化編輯整合進對話 loop，使用者無需離開 ChatGPT 介面即可完成從原型設計到產品上線的完整工作流。這項變革大幅降低了網頁應用程式的開發門檻，讓非專業開發者也能透過自然語言指令，建置具備互動功能的網頁與遊戲。

## 媒體內容

**一位講者展示如何透過 ChatGPT 的 Sites 與 Build Web Apps 外掛，直接在對話介面中建置並部署網頁應用程式與遊戲。**

**影片中的 Prompt 與操作**

Prompt（00:23）：

```
為設計研討會建立一個發布網站，包含講者卡片、可篩選的議程，以及乾淨簡約的編輯風格。
```

原文：Build a launch site for a design conference, with speaker cards, a filterable agenda, and a clean and minimalist editorial style.

Prompt（00:40）：

```
我希望議程排版更容易瀏覽，並讓主題演講感覺像是主要活動。
```

原文：I want the schedule layout to be easier to scan, and the keynote to feel like the main event.

Prompt（01:21）：

```
建立一款色彩鮮豔、2000 年代初期的 2D 橫向捲軸遊戲，包含卡通英雄與動畫環境。使用生動的像素藝術、響應式控制與趣味效果。
```

原文：Build a colorful early 2000s 2D side-scrolling game with a cartoon hero and an animated environment. Use vibrant pixel art, responsive controls, and playful effects.

操作步驟：

1. （00:23）輸入網頁設計需求
2. （00:34）選擇設計風格「Catalog Orbit」
3. （00:56）開啟內建瀏覽器進行標註
4. （00:59）輸入網頁修改建議
5. （01:05）點擊「Deploy this site」
6. （01:21）輸入遊戲開發需求

**逐字稿**

- `00:03` 讓我來示範如何直接從 ChatGPT 建立並部署網頁應用程式。（Let me show you how to build and deploy web apps directly from ChatGPT.）
- `00:06` 我將使用 Sites，這是一個新的 plugin，讓您能在幾分鐘內建立功能完整的網頁應用程式。（I'm going to use Sites, a new plugin that lets you create fully functional web apps in minutes.）
- `00:12` 它包含內建的代管與儲存空間，因此您可以立即發布您的應用程式。（It includes built-in hosting and storage, so you can publish your app immediately.）
- `00:17` 無需設定額外的服務。（No need to set up a separate service.）
- `00:19` 您可以直接在聊天視窗中開始。（You can start directly in the chat window to begin.）
- `00:21` 我會先描述我想要的東西。（I'll start by describing what I want.）
- `00:23` 為一場設計研討會建立一個發布網站，包含講者卡片、可篩選的議程，以及簡潔、極簡主義的編輯風格。（Build a launch site for a design conference with speaker cards, a filterable agenda, and a clean, minimalist editorial style.）
- `00:31` 在幕後，它會設定專案、撰寫程式碼，並持續運作直到第一個版本準備就緒。（Behind the scenes, it sets up the project, writes the code, and keeps working until the first version is ready.）
- `00:37` 我可以開啟結果並親自試用。（I can open up the result and try it for myself.）
- `00:40` 這是一個很好的開始，但我希望日程表的版面配置更容易瀏覽，並讓主題演講看起來像是主要活動，所以我會要求進行調整。（This is a strong start, but I want the schedule layout to be easier to scan and the keynote to feel like the main event, so I'll ask to refine that.）
- `00:49` 我可以持續用淺顯易懂的語言提供回饋，而它會在幕後處理實作。（I can keep giving feedback in plain language while it handles the implementation behind the scenes.）
- `00:54` 我也可以在應用程式內的瀏覽器中開啟網站，以使用內建的註解工具。（I can also open the site in the in-app browser to use the built-in annotation tool.）
- `00:59` 我可以留下針對性的意見，讓它確切知道該更新什麼。（I can drop targeted comments that let it know exactly what to update.）
- `01:04` 這個版本感覺已經準備好了。（This version feels ready.）
- `01:05` 我可以點擊發布，或是直接告訴 ChatGPT 進行部署。（I can hit publish or just tell ChatGPT to deploy it.）
- `01:09` Sites 也能與其他 plugin 搭配使用，例如 Build Web Apps。（Sites also work with other plugins, like Build Web Apps.）
- `01:12` Build Web Apps 透過設計、實作與測試的 skill 來提升您網站的品質。（Build Web Apps improves the quality of your site with skills for design, implementation, and testing.）
- `01:19` 開始吧。（Here we go.）
- `01:21` 使用 Build Web Apps，建立一個色彩繽紛、2000 年代初期風格的 2D 橫向捲軸遊戲，主角為卡通人物，並具備動畫環境。（Using Build Web Apps, build a colorful early 2000s 2D side-scrolling game with a cartoon hero and animated environments.）
- `01:29` 使用鮮豔的像素藝術、響應式控制與趣味效果。（Use vibrant pixel art, responsive controls, and playful effects.）
- `01:34` 這就完成了。（There you have it.）
- `01:35` 從一個想法到一個可運作的網頁應用程式，全部都在 ChatGPT 內完成。（From an idea to a working web app, all inside ChatGPT.）
- `01:39` 謝謝。（Thank you.）

## 標籤

功能更新, 新產品, Web, ChatGPT, OpenAI, ChatGPT