# 策展 · X (Twitter) 🔥

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

> 作者：Framer (@framer) · 平台：X (Twitter) · 日期：2026-06-17

> 原始來源：https://x.com/framer/status/2066939366568804508

## 中文摘要

Framer 3.0 正式推出，透過深度整合 AI Agent、分支管理與社群功能，全面提升網頁設計與開發的生產力。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781664054319-vd64r1gl.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/4cbfbfa96a2f3cea.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Framer 3.0 推出全新 AI 代理功能，協助使用者進行網頁設計、內容管理與程式碼開發。

**核心 AI Agent 功能**
Framer 3.0 將 AI Agent 嵌入設計流程的各個環節，旨在提升使用者的生產效率而非取代人工。這些 Agent 具備多項關鍵能力，包括：
- 設計網頁頁面與更新網站內容。
- 管理 CMS（內容管理系統）並優化 SEO。
- 自動修正響應式設計，確保在 Desktop、Tablet 與 Phone 裝置上的排版精確。
- 解析數據分析結果，並協助使用者快速完成專案發布。
- 透過 AI 聊天視窗輸入指令，即可自動生成如 `ImageWheel.tsx` 等自訂程式碼元件。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/f4ca7150cacca719.jpg)
> 這是一個軟體介面的局部截圖，顯示了包含「Agent」、「Style」、「New Chat」選項以及「Publish」按鈕的工具列。

**分支管理機制**
為了提供更安全的編輯環境，Framer 3.0 引入了「分支（Branching）」功能，讓使用者與 Agent 能在隔離的環境中進行實驗性修改。
- 允許 Agent 進行頁面重新設計、內容更新或大型變更，而不會直接影響正式環境。
- 使用者可針對每一項編輯進行審核與精煉，確認無誤後再合併至主分支，確保發布過程的穩定性。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/902f80ff0bf46b23.jpg)
> 這是一個展示軟體開發版本控制介面的設計圖，左側列出各個分支（Branches），右側則顯示對應的變更內容（Changes）。

**外部 Agent 整合**
Framer 3.0 支援將現有的 AI 工作流程帶入專案中，透過連結 [Claude](https://www.framer.com/agents/external/)、[Codex](https://www.framer.com/agents/external/) 與 [Cursor](https://www.framer.com/agents/external/) 等工具，讓外部 Agent 能夠直接建立、編輯、稽核並管理 Framer 專案。這讓使用者能延續既有的 AI 開發習慣，並在 Framer 畫布上進行最終審核與發布。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/694837fad2a1f6ff.jpg)
> 三個具有現代化設計風格的應用程式圖示並排呈現於黑色背景上。

**社群與生態系**
全新改版的 [Framer Community](https://www.framer.com/community/) 直接內建於應用程式中，旨在協助使用者建立個人聲譽、尋找合作機會並拓展業務。
- 整合了 Marketplace、Gallery、Feed、Members 與 Contests 等功能。
- 使用者可透過這些管道展示作品、與頂尖人才互動，並探索更多設計資源。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/7968763a37e44849.jpg)
> 這是一張展示社交平台介面設計的螢幕截圖，畫面呈現了包含個人資訊、動態牆及社群功能選單的深色模式佈局。

**實作與應用**
在實際操作中，使用者可透過側邊欄管理 Pages、Layers 與 Assets，並利用分支功能進行版本控制。系統展示了多種進階互動效果的應用，如 `InteractivePointSphere`、`GravityCursorImages`、`ChromaticCylinder` 與 `MagneticGallery`。此外，CMS 管理介面也經過優化，能清晰呈現部落格文章狀態（Live）、圖片與作者資訊（如 Sarah Chen, Marcus Rivera, James Liu 等），實現「與 Agent 共同設計、在畫布上精煉、與團隊共同發布」的完整工作流。詳細資訊請參考 [Framer 官網](https://www.framer.com/) 與 [協作功能頁面](https://www.framer.com/collaborate/)。

## 媒體內容

**Framer 3.0 推出全新 AI 代理功能，協助使用者進行網頁設計、內容管理與程式碼開發。**

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

Prompt（00:20）：

```
使用這些新的文字樣式和佈局設定，並更新頁面的其餘部分以進行匹配。
```

原文：Use these new text styles and layout settings and update the rest of the page to match.

Prompt（00:31）：

```
建立一個 Framer 程式碼元件，將上傳的圖片顯示在一個可拖曳的旋轉環中，並隨捲動速度加快
```

原文：Build a Framer code component that displays uploaded images in a draggable rotating ring that speeds up on scroll

Prompt（00:43）：

```
閱讀這些部落格文章並為每一篇建立類別，新增一個欄位。
```

原文：Read these blogposts and create categories for each of them, adding a new field.

操作步驟：

1. （00:20）使用者在 Agent 對話框輸入指令調整頁面樣式。
2. （00:26）使用者透過「+」號選單生成不同裝置（Tablet, Phone）的版面。
3. （00:30）使用者在 Agent 對話框輸入指令生成程式碼元件。
4. （00:43）使用者在 CMS 介面透過 Agent 自動分類部落格文章。

## 標籤

新產品, Web, Agent, AIGC, Framer