icon of getdesign

getdesign

www.getdesign.app

從公開網站擷取設計系統並輸出為可下載的 design.md 檔案

前往官網在新視窗開啟
image of getdesign前往官網

什麼是 getdesign?

getdesign 會從公開網站擷取設計系統。它會以真實瀏覽器開啟網站,讀取網站的 CSS 並擷取轉譯後的頁面,然後將網站的色彩、字體排印、間距與元件寫入 design.md 檔案,內容以網站實際的 CSS 為依據。輸出結果可當作樣式指南閱讀,或在建構介面時交給程式碼代理作為脈絡使用。

此工具提供五種介面,共用同一個代理核心,另外還有一個可在程式碼代理內執行的 Skill。目前為 beta 版,代管執行需自備供應商金鑰,而非 getdesign API 金鑰。

如何使用 getdesign?

網頁儀表板

登入儀表板,在 Account 中儲存你的 Daytona 與 OpenAI 金鑰,然後將公開網站的 URL 貼到 Agent 中即可產生 design.md。你也可以在不執行供應商的情況下探索快取的範例。

API

api.getdesign.app 上,GET /v1/design 會回傳 Markdown 或 JSON。需使用 WorkOS 持有人驗證與供應商金鑰。

CLI

在 Bun 上執行 bunx @getdesign/cli,並搭配你的 Daytona 與 OpenAI 金鑰。它會將 design.md 寫入本機檔案。

SDK

使用 bun add @getdesign/sdk 安裝 @getdesign/sdk,即可在 Bun 上以行程內方式執行代理,取得具型別的結果與進度事件,並使用你的供應商金鑰。

Skill

使用 skills add MohtashamMurshid/getdesign 加入可攜式的 SKILL.md。它會在 Claude Code、Codex 或 Cursor 內執行,並使用代理本身的工具。

getdesign 的核心功能

設計系統擷取

getdesign 會讀取公開網站的 CSS 權杖、在瀏覽器中擷取頁面,並產出涵蓋色彩、字體排印、間距與元件的設計文件。

design.md 輸出

結果會以 Markdown 文件形式提供,描述網站的設計系統。視覺化執行也會包含擷取的螢幕截圖。

多種存取介面

網頁、API、CLI 與 TypeScript SDK 都會存取同一個代理核心;Skill 則在你自己的程式碼代理內執行。CLI 與 SDK 在本機的 Bun 上執行,而 HTTP API 支援代管執行。

私人執行與可選發布

儀表板執行會保持私人狀態,直到你發布它們。發布會建立一個任何人都能用來檢視與下載設計文件及螢幕截圖的連結;你可以將執行再次設為私人,以關閉未來的存取,但已下載的副本仍會留在收件者手中。

getdesign 的使用案例

從實際運作的網站產出樣式指南

從公開網站產出可閱讀的設計文件,描述其色彩、字體排印、間距與元件。

為程式碼代理提供設計脈絡

將產生的 design.md 與其螢幕截圖交給程式碼代理,或安裝 Skill,讓代理使用自己的工具擷取設計脈絡。

在本機或代管工作流程中執行擷取

使用 CLI 或 TypeScript SDK 在 Bun 上進行本機執行,或使用 HTTP API 進行代管執行並回傳 Markdown 或 JSON。

分享設計文件

發布儀表板執行,建立一個其他人能用來檢視與下載設計文件及螢幕截圖的連結。

關於 getdesign 的常見問題

什麼是 design.md 檔案?

design.md 是一份描述網站設計系統的 Markdown 文件。你可以將它當作樣式指南閱讀,或在建構介面時交給程式碼代理作為脈絡。視覺化執行也會包含擷取的螢幕截圖。

我要如何擷取網站的色彩與字型?

在 Account 中儲存你的 Daytona 與 OpenAI 金鑰,然後將公開網站的 URL 貼到 Agent 中。getdesign 會讀取 CSS 權杖、在瀏覽器中擷取頁面,並產生可下載的設計文件。你也可以在不執行供應商的情況下探索快取的範例。

我可以將 getdesign 與程式碼代理搭配使用嗎?

可以。將產生的 design.md 與其螢幕截圖交給你的程式碼代理,或安裝 getdesign Skill,讓代理使用自己的工具擷取設計脈絡。CLI 與 TypeScript SDK 也可在 Bun 上本機執行,而 HTTP API 支援代管執行。

是否有驗證或付費層級?

儀表板使用 WorkOS 登入。代管執行需自備 Daytona 與 OpenAI 金鑰;V1 沒有 getdesign API 金鑰。V1 沒有 getdesign 執行計費。你需就瀏覽器擷取向 Daytona 付費,並就模型使用向 OpenAI 付費。

我的設計執行是公開的嗎?

你的儀表板執行會保持私人狀態,直到你發布它們。發布會建立一個任何人都能用來檢視與下載設計文件及螢幕截圖的連結。你可以將執行再次設為私人,以關閉未來的存取,但已下載的副本仍會留在收件者手中。

同類工具

瀏覽分類