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

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

> 作者：Arena.ai (@arena) · 平台：X (Twitter) · 日期：2026-07-03

> 原始來源：https://x.com/arena/status/2072713730711023673

## 中文摘要

Fullstack Code Arena 推出讓 AI Agent 直接開發完整應用程式。

**核心功能與定位轉型**
Arena.ai 宣布 Code Arena 正式從單純的前端原型工具，進化為支援「端到端」開發的完整平台。此次更新的核心在於讓 AI Agent 不再僅限於生成靜態介面，而是能處理複雜的後端邏輯與資料持久化需求。主要功能亮點包括：
- **資料庫整合**：支援 PostgreSQL，讓 Agent 能自動生成包含資料表結構、使用者驗證及資料存取的程式碼。
- **第三方服務存取**：新增安全設定面板，使用者可配置 API key 與 token，讓應用程式能呼叫外部服務（如 OpenAI API）或串接金鑰。
- **持久化開發環境**：每個專案皆在獨立的雲端 Sandbox 中執行，支援熱重載（hot reloading）與即時除錯。
- **工具鏈擴充**：Agent 現在具備執行 `bash` 指令與網路搜尋的能力，能即時獲取技術文件或處理系統級任務。
- **快速部署**：提供從開發到發布的完整管線，支援將應用程式直接部署至 Vercel。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1783044580020-q2rt8p6i.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/94b8c1eae81363ae.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 兩位講者介紹「Full Stack Code Arena」平台，展示其如何協助開發者從原型構建到部署生產環境的完整流程。

**應用場景與開發體驗**
透過 Fullstack Code Arena，開發者與創業者現在可以構建過去無法實現的複雜應用，例如：
- 具備登入與會員管理系統的電商平台。
- 需儲存使用者進度與狀態的教育學習軟體。
- 整合 AI 模型 API 的聊天機器人產品。

在實際操作中，使用者只需輸入需求描述，系統會根據任務複雜度自動導向 Fullstack 模板。若過程中出現錯誤，使用者可透過對話指令要求 Agent 修正程式碼並重新部署。此外，平台透過齒輪圖示的設定面板，讓使用者能安全地管理環境變數，並透過資料庫檢視器即時監控應用程式的資料狀態。

**對 AI 評測的影響**
Arena.ai 強調，此次升級不只是為了開發者，也為了推動 AI 軟體工程的評測標準。透過測試模型在處理資料庫操作、多檔案生成及後端邏輯編寫上的表現，平台能產出更具參考價值的評測數據。目前的投票機制已整合至排行榜中，使用者可針對不同模型的開發成果進行評選，例如在展示案例中，Claude Fable 5 在處理電商網站的邏輯與介面一致性上，表現優於 GLM-5.1。

欲體驗完整的 Fullstack 開發流程，可前往 [Arena.ai Code](http://arena.ai/code) 進行測試與建置。

## 媒體內容

**兩位講者介紹「Full Stack Code Arena」平台，展示其如何協助開發者從原型構建到部署生產環境的完整流程。**

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

Prompt（00:12）：

```
為一家名為 Sole Society 的運動鞋店建立一個線上店面。顧客可以瀏覽運動鞋、將其加入購物車並結帳。請在 /admin 提供一個管理員儀表板，讓我能管理庫存、查看訂單並追蹤營收。將所有內容（產品、訂單、庫存水準）儲存在資料庫中，並預先填入 12 雙帶有生成產品圖片的運動鞋。在管理面板中，新增一個使用我的 OPENAI_API_KEY 的 AI「撰寫產品描述」按鈕。
```

原文：Build me an online storefront for a sneaker shop called Sole Society. Customers can browse sneakers, add them to a cart, and check out. Give me an admin dashboard at /admin where I can manage inventory, see orders come in, and track revenue. Store everything — products, orders, stock levels — in the database, and seed it with 12 sneakers with generated product images. In the admin panel, add an AI 'write product description' button that uses my OPENAI_API_KEY|

操作步驟：

1. （00:12）輸入 prompt 並點擊送出
2. （00:17）切換至「Option A」檢視前端頁面
3. （00:19）切換至「Secrets」與「Database」分頁檢視後端設定
4. （00:24）點擊「ADMIN」按鈕切換至管理員儀表板
5. （00:27）點擊「INVENTORY」分頁檢視庫存清單

**逐字稿**

- `00:00` 我們非常興奮能在本週推出 Fullstack Code Arena。（We're really excited to launch Fullstack Code Arena this week.）
- `00:03` Arian，跟我們介紹一下吧。（Arian, tell us a little bit about it.）
- `00:05` 沒問題，Fullstack 讓使用者能在 Arena 內建構更複雜、達到生產等級的應用程式。（Yeah, so Fullstack allows you to build a lot more complex production-grade apps inside the arena.）
- `00:11` 我們看過開發者建立出很棒的前端原型，但他們希望能更進一步。（We've seen builders create awesome front-end prototypes, but they want to take it further.）
- `00:16` 他們想要加入後端、伺服器邏輯、API 金鑰以及資料庫。（They want to add backend to them, add server logic, add API keys, and a database.）
- `00:21` 這讓開發者能將任何想法一路帶到生產環境，（It allows builders to take any idea that they have and bring it all the way to production,）
- `00:26` 並透過一個可以與全世界分享的網址進行部署。（deployment, with a URL that they can share with the world.）
- `00:29` 大家會製作什麼樣的應用程式呢？（What kinds of apps are people going to make?）
- `00:31` 你知道的，從電子商務、產品店面到社群媒體應用程式，（You know, anything from e-commerce and product storefronts to social media apps,）
- `00:35` 甚至像是個人軟體，例如連接到你所有的大型語言模型。（or maybe even like personal software, like connecting to all your LLMs.）
- `00:39` 太棒了。（Amazing.）
- `00:40` 沒錯。（Yeah.）
- `00:40` 我們迫不及待想看看你們會做出什麼作品。（We can't wait to see what you build.）

## 標籤

Agent, 新產品, 功能更新, Arena.ai