# 策展 · X (Twitter) 🔥🔥🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：Alex Danilowicz (@alexdanilowicz) · 平台：X (Twitter) · 日期：2026-06-11
> 原始來源：https://x.com/alexdanilowicz/status/2064734626287878619
## 中文摘要
Magic Patterns 推出設計系統 Agent 實現跨專案同步。
Alex Danilowicz 近期宣布 Magic Patterns 整合了全新的「設計系統 Agent」，這項工具歷經三年開發，旨在解決設計系統在 AI 輔助開發中的核心痛點。使用者只需透過自然語言指令，即可全域調整元件、字體、間距與顏色，並能透過 GitHub、本地程式碼、網站連結或 NPM 套件同步既有的品牌設計語境。
> Magic Patterns 推出全新的設計系統代理工具，能透過 AI 快速管理與更新跨專案的設計元件。
**核心功能與應用**
- **全域設計變更**：使用者可透過自然語言（例如「make all of my components red」）對整個設計系統進行即時修改，系統會自動將變更套用到所有連結的專案介面中。
- **多風格原型生成**：該工具支援建立多種設計系統，並能快速產出不同風格的原型，目前已提供包含 Robinhood、Windows XP、Material UI 及 Apple Retro 等範本供使用者測試。
> 這段影片展示了多種不同設計風格的 UI 元件庫，包含現代極簡、深色模式金融介面、經典 Windows 風格以及 Material Design 風格。
- **靈活的同步機制**：支援將現有的品牌設計資源導入，透過 `GitHub` 儲存庫、本地程式碼檔案、網站 URL 或 `NPM` 套件進行整合，確保 AI 生成的內容符合既有的設計規範。
> 此介面顯示了軟體設定流程中連結外部來源的選項，使用者可選擇連結 GitHub 儲存庫、本機程式碼資料夾或現有網站，以匯入樣式與元件。
- **限時優惠**：為推廣此功能，Magic Patterns 在本週五前提供「Auto」模式下的免費額度，讓使用者能無負擔地體驗 Agent 驅動的設計流程。
> Magic Patterns 提供免費設計系統資源，包含配色、字體與組件庫，並支援透過 GitHub、NPM 或官方網站獲取。
**實際案例與影響**
資安合規平台 Vanta 是該工具的早期使用者，其資深產品經理 Erika Hairston 指出，過去從產品構想到工程師可執行的原型需耗時兩週，現在透過 Magic Patterns 僅需數小時即可完成。
- **提升決策效率**：產品經理（PM）現在能直接在工作階段中生成多個 UX 變體（例如使用 `/Inspiration` 指令），並在設計師介入前就鎖定互動細節，大幅減少了「這是你想要的意思嗎？」這類反覆確認的會議。
- **縮短開發週期**：Vanta 團隊在開發 AI 帳號偵測功能時，透過該工具在一小時內產出兩種介面版本並完成決策，最終實現了七週的端到端交付。
- **打破瓶頸**：Magic Patterns 讓 PM 能在設計與工程資源投入前，先以具體的視覺產出進行溝通，使設計師能專注於更深層的系統優化，而非基礎的探索性草圖。
如欲體驗此功能，可前往 [Magic Patterns 設計系統頁面](https://www.magicpatterns.com/product/design-systems) 進行測試。更多關於 Vanta 如何運用此工具優化產品開發流程的細節，可參考 [Vanta 客戶案例研究](https://www.magicpatterns.com/customers/vanta)。
## 媒體內容
**Magic Patterns 推出全新的設計系統代理工具，能透過 AI 快速管理與更新跨專案的設計元件。**
**影片中的 Prompt 與操作**
Prompt（00:23）：
```
將我所有的元件變為紅色
```
原文：make all of my components red
操作步驟：
1. （00:05）點擊左側選單 Typography
2. （00:09）點擊左側選單 Colors
3. （00:10）點擊左側選單 Icons
4. （00:23）在右側對話框輸入指令
5. （00:42）點擊 Publish 按鈕發布更新
6. （00:48）勾選需要更新的設計專案
7. （00:58）點擊 Update 按鈕更新設計專案
8. （01:52）進入 Link your sources 設定頁面
**逐字稿**
- `00:00` 這是我們全新的設計系統 Agent。（This is our new design system agent.）
- `00:02` 我們這裡涵蓋了從元件到字體排印的所有內容。（We have everything here from the components to the typography.）
- `00:06` 你可以上傳自訂字體、顏色與圖示。（You can upload custom fonts, colors, icons.）
- `00:11` 以這個案例來說，我使用的是 Duolingo。（In this case, I have Duolingo.）
- `00:15` 假設我正在進行品牌重塑。（And let's say I'm going through a rebrand.）
- `00:18` 我想把所有東西都變成紅色，打造邪惡版的 Duolingo。（I want to make everything red, evil Duolingo.）
- `00:21` 所以我到這裡輸入指令，將我所有的元件都變成紅色。（So I'm going to go here and say, make all of my components red.）
- `00:30` 這是一個針對設計系統中所有元件的全域編輯器。（And this is a global editor for all the components in the design system.）
- `00:33` 讓我們來看看效果如何。（So let's see how this looks.）
- `00:36` 可以看到它已經把我所有的元件都變成了紅色。（And so we see it made all of my components red.）
- `00:40` 如果我現在發布這些變更，（And if I go ahead and publish those changes,）
- `00:43` 那麼我們就能在 Magic Patterns 中製作的所有設計裡使用這個設計系統。（then we can use this design system across all the designs I've made in Magic Patterns.）
- `00:49` 你會看到我們的翻譯練習在這裡，這就是我剛剛透過 prompt 產生的。（So we'll see our translation exercise here, which I just prompted.）
- `00:54` 如果我重新整理並更新，（And if I go ahead and refresh this and update,）
- `01:00` 我們應該會看到它使用了我的紅色按鈕。（we should see it use my red button.）
- `01:03` 因為這裡的所有內容都使用了該設計系統，並參照了那些元件。（Because everything here is using the design system and referencing those components.）
- `01:11` 你會看到這裡可以連結你的來源，（You'll see here you can link your sources,）
- `01:13` 匯入你現有的公司聯絡人，（bring in your existing company contacts,）
- `01:15` 透過 GitHub、網站或本機程式碼進行連結。（link through GitHub or from a website or local code.）
- `01:18` 我們迫不及待想看看你會創作出什麼作品。（And we can't wait to see what you'll create.）
- `01:22` 祝你 prompt 愉快。（Happy prompting.）
- `01:23` 你在這裡想做什麼呢？（What do you want to do here?）
- `01:23` 你可以開啟你所有的專案項目。（You can open all your items.）
**這段影片展示了多種不同設計風格的 UI 元件庫，包含現代極簡、深色模式金融介面、經典 Windows 風格以及 Material Design 風格。**
**影片中的 Prompt 與操作**
操作步驟：
1. @00:00 展示現代 UI 元件
2. @00:01 展示深色模式金融 UI
3. @00:04 展示經典 Windows 風格 UI
4. @00:07 展示 Material You 風格 UI
## 標籤
Agent, 新產品, AIGC, Figma, Magic Patterns