# 策展 · X (Twitter) 🔥🔥

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

> 作者：Factory (@FactoryAI) · 平台：X (Twitter) · 日期：2026-07-14

> 原始來源：https://x.com/FactoryAI/status/2076710400729731349

## 中文摘要

Factory AI 推出 Factory Desktop 的 Design Mode 功能，讓使用者能透過點選介面元素並輸入自然語言指令，直接進行網頁樣式修改與程式碼編輯。

**核心功能與操作體驗**
Factory AI 著手優化 Agentic 程式開發流程中最費工的環節，認為開發者在描述需求時往往最為耗時。透過新推出的 Design Mode，使用者不再需要翻找複雜的元件程式碼，而是直接在 Factory Desktop App 中執行以下操作：
- **視覺化選取**：直接點選網頁上的元素、區塊或檔案。
- **自然語言指令**：針對選取項目輸入修改需求，由 Droid 自動獲取上下文並執行程式碼變更。
- **即時編輯**：系統會自動產生程式碼 diff，並在編輯器中呈現，實現「所見即所得」的開發體驗。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784012618045-v4x0t5mn.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/6cff3212725706e8.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用者透過 Factory Desktop 的 Design Mode 功能，以自然語言指令快速修改網頁介面樣式。

**開發流程整合與效能**
根據展示內容，Factory Desktop 整合了完整的開發環境，讓使用者能一站式完成設計與建置檢查：
- **自動化變更**：在修改網頁標題大小或按鈕顏色（如將按鈕改為橘色 `#EE801B`）時，系統會自動更新相關檔案，例如 `app/page.tsx` 與 `app/tailwind.config.ts`。
- **專案架構查詢**：側邊聊天功能（Side chat）支援對專案進行深度詢問。例如，系統能精確指出「deploy throughput chart」的資料來源，並說明該圖表是透過 `lib/metrics.ts` 中的 `useThroughput` hook 結合 SWR 每 5 秒輪詢一次 API。
- **建置驗證**：使用者可直接在終端機執行 `pnpm build`，系統會自動編譯並確認產出結果。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784012648076-jdzzp9kj.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/bc22169d331a467e.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Factory 平台展示了透過自然語言指令進行網頁 UI 設計、程式碼修改及系統測試的自動化開發流程。

**技術影響與市場回饋**
社群對於此項更新給予高度評價，認為這大幅降低了描述視覺調整的摩擦力，並顯著縮短了原型開發（prototyping）的時間。對於社群成員「讓應用程式自行編寫程式碼」的暢想，Factory AI 官方也附和表示，搭配「Factory Missions」功能「很有可能實現」。

影片中的數字來自 localhost 示範網站的介面內容，不代表 Factory 平台的實際生產效能。

## 媒體內容

**使用者透過 Factory Desktop 的 Design Mode 功能，以自然語言指令快速修改網頁介面樣式。**

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

Prompt（00:03）：

```
把標題變大
```

原文：make the headline bigger

Prompt（00:08）：

```
把按鈕變橘色
```

原文：make the buttons orange

操作步驟：

1. （00:00）開啟 Design Mode
2. （00:02）選取標題文字並輸入修改指令
3. （00:04）點擊送出按鈕
4. （00:07）選取按鈕元件並輸入修改指令
5. （00:10）點擊送出按鈕

**Factory 平台展示了透過自然語言指令進行網頁 UI 設計、程式碼修改及系統測試的自動化開發流程。**

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

Prompt（00:11）：

```
把標題變大
```

原文：make the headline bigger

Prompt（00:17）：

```
把按鈕變橘色
```

原文：make the buttons orange

Prompt（00:44）：

```
部署吞吐量圖表的資料來源是什麼？
```

原文：Where does the deploy throughput chart get its data?

操作步驟：

1. （00:08）點擊「Design Mode」按鈕
2. （00:11）在對話框輸入指令並送出
3. （00:17）在對話框輸入指令並送出
4. （00:30）在終端機輸入 `pnpm build`
5. （00:43）在側邊聊天框輸入查詢指令

## 標籤

Agent, 功能更新, 新產品, IDE, Factory AI