# MagicPath 推出 Codex 官方 plugin 實現 AI 協作設計

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

> 原作者：Pietro Schirano (@skirano) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥 · 日期：2026-06-06

> 原始來源：https://x.com/skirano/status/2062942695547375829

## 證據與延伸閱讀

- [youtube.com](https://www.youtube.com/watch?v=9TI_XrRB8xU)
- [digg.com/ai/e0uddmwm](https://digg.com/ai/e0uddmwm)
- [MagicPath推出Codex官方plugin](https://www.magicpath.ai/blog/magicpath-official-codex-plugin)

## 中文摘要

MagicPath 推出 Codex 官方 plugin 實現 AI 協作設計。

Pietro Schirano 宣布 MagicPath 已成為 OpenAI Codex 的官方 plugin，旨在透過將視覺化畫布與開發環境深度整合，重新定義軟體開發的互動體驗。該團隊認為，Agentic 程式開發將成為未來軟體構建與應用的核心介面，而 MagicPath 正是為了推動此願景而生。

**核心功能與應用**
透過安裝 MagicPath plugin，Codex 獲得了處理視覺設計與專案上下文的專屬 skill，主要功能包括：
- **互動式 UI 生成**：在無限畫布上建立並編輯可互動的介面，生成的成果為可編輯的 React 程式碼。
- **儲存庫整合**：Codex 能讀取現有儲存庫中的 UI，理解其元件與設計系統，並將其重構為畫布上的可編輯設計。
- **設計系統協作**：在建立或調整元件時，自動套用專案的配色、字體與樣式規範。
- **視覺資產處理**：支援生成與匯入圖片，並將其作為介面建構的上下文參考。
- **多人協作**：設計成果可於共享 workspace 中供團隊成員檢視、搜尋與進一步迭代。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745843364-9icceg9a.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745844134-mgNNx9Jcw4YRecVU4jpg.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Codex 平台展示如何透過 MagicPath 外掛程式自動生成網頁設計與元件。

**安裝與使用流程**
若要開始使用，請依照下列步驟操作：
1. 開啟 Codex 的 plugin 目錄，搜尋「MagicPath」並選擇「Add plugin」。
2. 安裝完成後，在 Codex 對話視窗中輸入指令或提及 `@MagicPathAI` 即可啟用。
3. 建議在 Codex 瀏覽器中開啟 MagicPath，以便將對話視窗與視覺化 workspace 並排顯示，提升工作流效率。
4. 登入後開啟專案，Codex 將自動偵測專案名稱或由使用者手動指定，隨後即可開始進行設計與開發。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745880428-iwi5kefp.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745882613-g6uqWg521ogI6ke2ajpg.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用者透過 Codex 整合 MagicPath 平台，在開發環境中啟動 AI 專案協作流程。

**實際操作體驗**
根據展示內容，使用者在 Codex 中安裝插件後，僅需透過自然語言指令（例如要求建立具備極簡風格的登陸頁面），系統便能在右側視窗即時呈現設計成果，並在左側面板同步顯示執行日誌。此外，MagicPath 亦支援在 Figma 等環境中進行多輪對話迭代，讓 AI 根據指令精確調整 SVG 顏色、規劃儀表板佈局或生成包含 KPI 卡片與導覽列的完整 UI 組件。最終產出的設計不僅具備視覺預覽，還能將成果帶回生產環境的程式碼中，實現從視覺探索到功能實作的端到端整合。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745861095-i31pti0c.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745862207-gLxmRrZu19UKAnbbpjpg.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用者在 Figma 的 MagicAI 插件中，透過對話介面與 AI 協作進行介面設計與樣式調整。

## 媒體內容

**Codex 平台展示如何透過 MagicPath 外掛程式自動生成網頁設計與元件。**

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

Prompt：

```
/magicpath 建立 3 個 openai 的登陸頁面，極簡設計，並為其建立圖片
```

原文：/magicpath build 3 landing pages for openai, minimal design, create images for it as well

操作步驟：

1. 在搜尋欄輸入「magic」並選擇 MagicPath 插件。
2. 點擊「Try in chat」安裝插件。
3. 在對話框輸入指令並點擊發送按鈕。
4. 觀察系統自動生成網頁設計與執行日誌。

**使用者在 Figma 的 MagicAI 插件中，透過對話介面與 AI 協作進行介面設計與樣式調整。**

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

Prompt：

```
將此 SVG 的顏色改為 #e4ede7
```

原文：change the color of this svg to #e4ede7

操作步驟：

1. 使用者在對話框輸入顏色變更指令。
2. AI 執行指令並更新 SVG 顏色。
3. 使用者瀏覽 AI 生成的設計規劃與 UI 組件。
4. AI 根據需求生成包含 KPI 儀表板的設計方案。

**使用者透過 Codex 整合 MagicPath 平台，在開發環境中啟動 AI 專案協作流程。**

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

Prompt：

```
/magicpath 讓我們開始工作於
```

原文：/magicpath lets work in

操作步驟：

1. 點擊 Codex 右上角圖示開啟側邊面板。
2. 在瀏覽器網址列輸入 magicpath.ai 並進入網站。
3. 在專案頁面點選專案檔案。
4. 在左側對話輸入框輸入指令並發送。

## 標籤

Codex, Skills, 新產品, Agent, MagicPath, OpenAI, Codex