# 策展 · X (Twitter) 🔥🔥🔥

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

> 作者：Pietro Schirano (@skirano) · 平台：X (Twitter) · 日期：2026-06-11

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

## 中文摘要

MagicPath 推出 Cursor 官方 plugin 實現互動式開發。

Pietro Schirano 近期宣布 MagicPath 已整合至 Cursor 編輯器，這項工具旨在將「無限畫布」引入開發流程，讓使用者能直接在 Cursor 內檢視、編輯互動式程式碼，並快速建構可分享的應用程式。透過與 Cursor Composer 2.5 的深度整合，開發者能以極高的效率進行設計與開發，並將成果無縫匯出至 Figma。

**核心功能與體驗**
MagicPath 透過在 Cursor 內部提供原生畫布，大幅提升了開發者的視覺化編輯能力：
- **無限畫布互動**：使用者可直接在 Cursor 內操作互動式程式碼，並利用本地檔案與 skill 進行開發。
- **多玩家與多 Agent 協作**：支援團隊成員與 Agent 同時在畫布上工作，Agent 可根據單一請求同時建立多個螢幕或設計變體，並即時同步變更。
- **視覺化編輯**：結合 AI 與手動控制，使用者可針對畫布上的元素進行點擊編輯，或透過自然語言指令進行複雜調整（如加入漸層效果或動態動畫）。
- **生產級匯出**：支援將設計成果轉化為生產環境可用的 React、TypeScript 與 Tailwind 程式碼，並提供直接同步至現有程式庫的功能。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781139233817-w2daxvp1.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/a13b0b28f719f226.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用 MagicPath 平台透過自然語言指令修改網頁元件樣式。

**安裝與操作流程**
使用者可透過以下步驟在 Cursor 中啟用 MagicPath：
1. 開啟 Cursor 編輯器，進入 Marketplace 搜尋並安裝 `MagicPath`。
2. 透過 Cursor 的 Composer 介面輸入自然語言指令（例如根據 `DESIGN.md` 建立專案）。
3. MagicPath 將自動執行檔案讀取、專案架構建立與元件渲染，並在編輯器右側呈現 UI 元件庫。
4. 若需使用外部 Agent 整合（如連接 MCP 或 Linear 任務），可參考 [MagicPath 官方定價頁面](https://www.magicpath.ai/pricing) 了解 Builder 方案。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781139216943-ozcvhnhs.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/bc362b36d9fd1c5c.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 影片展示了如何透過 Cursor 編輯器中的 MagicPath 外掛，將設計系統文件自動轉化為可編輯的 UI 元件庫。

**跨平台整合**
MagicPath 強調與主流設計工具的相容性，特別是與 Figma 的整合。使用者在 MagicPath 畫布上完成的元件，可直接透過複製功能貼上至 Figma 編輯器中，並保留完整的設計參數（如字體、顏色、透明度與特效設定），實現設計與程式碼的「端到端」同步。欲了解更多資訊，請造訪 [MagicPath Cursor Marketplace 頁面](https://cursor.com/marketplace/magicpath)。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781139249664-0yhg9t8p.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/4e186218264c01bb.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用 MagicPath 將 Figma 元件從網頁複製並貼上到 Figma 編輯器中。

## 媒體內容

**影片展示了如何透過 Cursor 編輯器中的 MagicPath 外掛，將設計系統文件自動轉化為可編輯的 UI 元件庫。**

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

Prompt（00:08）：

```
使用 magicpath 和這個設計系統 DESIGN.md 在新專案中建立一個完整的元件庫，每個元件放在獨立的框架中
```

原文：use magicpath and this design system DESIGN.md build an entire component library in a new project, each component in a separate frame

操作步驟：

1. （00:03）在 Marketplace 搜尋並點擊安裝 MagicPath
2. （00:06）點擊 Add to Cursor 按鈕
3. （00:08）在 Cursor Composer 輸入指令並執行
4. （00:21）觀察 MagicPath 自動建立元件檔案並在右側預覽介面

**使用 MagicPath 平台透過自然語言指令修改網頁元件樣式。**

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

Prompt（00:06）：

```
幫我加個漸層，讓它自動輕微地彈跳
```

原文：Uh add a gradient an make it bounce gently automatically

操作步驟：

1. （00:03）點擊編輯器輸入框
2. （00:06）輸入指令並送出
3. （00:15）系統自動執行程式碼更新與預覽渲染

**使用 MagicPath 將 Figma 元件從網頁複製並貼上到 Figma 編輯器中。**

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

操作步驟：

1. （00:00）點擊網頁上的複製按鈕
2. （00:05）在 Figma 畫布中執行貼上操作

## 標籤

IDE, 功能更新, 新產品, Figma, MagicPath, Cursor