Claude Design 將網頁文章轉 Instagram／Threads 輪播圖卡、教學圖片！

我最近開始使用 Claude Design ，用完覺得 Claude 推出的這個 Claude Design 功能，其實滿強大的。它能夠自己分析一篇網頁文章內容主要是在講什麼，然後將網頁文章轉成好看的 Instagram／Threads 輪播圖卡。這件事在過去基本上是做不到的，但現在 Claude Design 能做到這件事。（其實 ChatGPT 也可以）

使用 Claude Design 將網頁文章轉 Instagram／Threads 輪播圖卡、教學圖片，這可以節省不少時間，並且 Claude Design 生成出來的圖卡，也相當優質，到了可以直接使用的地步，就算你不滿意 Claude Design 的設計，也可以直接跟它說，叫它調整，這樣很快就能改成你滿意的那個樣式。

如果你還沒用過 Claude Design，也不知道如何使用 Claude Design 將網頁文章轉 Instagram／Threads 輪播圖卡、教學圖片，本篇文章會有完整教學。

Claude Design 是什麼？

Claude Design 是 Anthropic 推出的視覺設計工具，目前仍處於 Beta 階段。你可以用對話方式描述想製作的內容，Claude 會在設計畫布上建立初稿，再讓你透過聊天或直接編輯畫布的方式修改。

根據 Anthropic 官方介紹，Claude Design 可以製作：

互動式原型。
Wireframe 與產品 Mockup。
設計方向提案。
簡報。
Landing Page。
社群素材與行銷視覺。
履歷、單頁文件與 PDF。

官方也明確把 social assets 列為 Claude Design 的用途，因此拿它製作 Instagram 或 Threads 圖卡，符合這項工具的產品定位。（資料來源：Your idea, designed with Claude）

Claude Design 可以免費使用嗎？

目前不行。Anthropic 官方說明，Claude Design Beta 提供給 Claude Pro、Max、Team 與 Enterprise 方案，並包含在訂閱額度中。Free 方案目前不在官方支援清單內。

Claude Design 可以從以下位置開啟：

網頁版：https://claude.ai/design
Claude Desktop 側邊欄。

Claude Design 的用量也會與 Claude Chat、Claude Cowork、Claude Code 共用，而不是另外提供一組獨立額度。

叫 Claude Design 網頁文章轉圖片前，可以先準備好設計規範檔

設計規範可以整理成 HTML、文件或純文字內容，再加入 Claude Design 專案。Anthropic 官方表示，Claude Design 可以匯入設計系統、設計檔案與原始上傳內容，並依照既有品牌規則建立畫面。

如果你還沒有設計規範，下面提供範例當參考。

基本上設計規範檔可以包含以下內容：

1. 品牌定位與文案語氣

品牌名稱與內容類型。
主要讀者是誰。
希望呈現的品牌個性。
使用繁體中文或其他語言。
文案要正式、口語、幽默或簡潔。
產品名稱與專有名詞是否保留英文。

2. 品牌顏色

主色、輔助色與中性色。
背景、主要文字、次要文字與分隔線顏色。
每一種顏色的色碼。
哪些顏色只能用來強調，不能用來顯示小字。
禁止使用的配色與漸層。

3. 字體與字級

中文標題與內文字體。
英文、數字與產品名稱使用的字體。
程式碼、指令與檔名使用的等寬字體。
封面標題、內頁標題、內文與頁尾的最小字級。
字重、行高與字距規則。

4. 圖卡尺寸

常見尺寸可以包含：

方形 Instagram／Threads 貼文：1080 × 1080 px。
直式 Instagram／Threads 貼文：1080 × 1350 px。
限時動態：1080 × 1920 px。
部落格封面／OG 圖：1200 × 630 px。

圖卡頁數可以交給 Claude Design 根據文章長度與內容結構自行安排，不需要事先指定。

5. 間距與版面

四邊安全邊界。
基準格線與常用間距。
一頁可以出現幾個主要焦點。
卡片圓角、邊框與陰影樣式。
圖片、標題與內文的對齊方式。

6. 圖卡版型與元件

封面卡的標題與背景規則。
步驟卡的編號、標題與內文結構。
金句卡、比較卡與提示框的版型。
Logo、品牌名稱、網址與頁碼要放在哪裡。
哪些頁面不能放 Logo 或網址。

7. 文案與閱讀規則

每頁只保留一個主要觀念。
使用短句與條列，避免整段文章直接搬上圖卡。
每行文字長度與每頁重點數量。
強調色每頁最多使用幾次。
重要資訊不能只靠顏色區分。
手機尺寸下仍要能清楚閱讀。

一定要先建立設計規範嗎？

不是 Claude Design 的強制要求，但如果你經常製作社群圖卡，那就很值得來準備。它能避免 Claude Design 每次的輸出配色都不一樣的問題。

如果你覺得上面列的這麼多設計規範項目太麻煩，可以先從下面這份簡版模板開始：

品牌名稱：[填入名稱]
用途：Instagram／Threads 輪播圖卡
主要讀者：[填入讀者]
文案語氣：[正式／口語／幽默／簡潔]
畫布尺寸：[填入尺寸]
頁數：由 Claude Design 根據文章內容安排
主色：[填入色碼]
輔助色與中性色：[填入色碼]
標題字體：[填入字體]
內文字體：[填入字體]
最小字級：[填入標題、內文與頁尾字級]
安全邊界：[填入像素]
封面規則：[填入版型與禁止項目]
內頁規則：[填入版型與文字限制]
Logo、網址與頁碼位置：[填入規則]
禁止事項：[填入不能使用的配色或版面]

規範的作用不是要限制 Claude Design，而是讓整組圖片看起來屬於同一個系列。

Claude Design 網頁文章轉輪播圖卡教學

下面開始進入實際操作流程。

▼使用 Claude Design 將網頁文章轉 Instagram／Threads 輪播圖卡的步驟很簡單。直接打開 Claude 桌機版應用程式，點擊畫面左下角的「Claude Design」。

▼進入 Claude Design 介面之後，如果你還沒有成立專案，可以先建立一個專案。

▼建立好專案之後，要做的第一步，就是先告訴 Claude Design ，這個專案以後主要是用來「將網頁文章轉成圖片」。然後直接拖曳上傳你製作好的「設計規範檔」。

▼接下來就能直接丟給 Claude Design 網頁文章，Claude Design 會先將該網頁文章整理成 HTML 格式的輪播圖卡，你可以直接邊用聊天對話視窗邊修改，修到你滿意為止。

▼將圖卡頁面修到你滿意之後，接下來就可以直接請 Claude Design 輸出圖片。這樣就大功告成啦！

以上就是使用 Claude Design 將網頁文章轉成圖片的步驟啦！我自已使用過 Claude Design 之後，覺得相當滿意。

Claude Design 製作社群圖卡的優點

1. 文章整理與設計可以在同一個專案完成

你不需要先到一個 AI 工具摘要，再到另一個工具排版。Claude 可以先理解文章內容，再依照同一份上下文建立圖卡腳本與設計。

2. 可以用對話修改整組版面

如果覺得整體顏色太暗、文字太多或頁面順序不對，可以直接用聊天要求修改，不需要每一頁從頭重做。

3. 能匯入品牌設計系統

如果你經常製作社群網站圖卡，可以在同一份設計檔中固定品牌顏色、字體、間距、安全邊界、手機可讀字級，以及 Logo、網址與頁碼的放置規則。

4. 可以直接把 HTML 圖卡轉成圖片

設計確認後，可以繼續在同一個 Claude Design 對話中要求它將 HTML 各頁轉成 PNG 或 JPG，從文章整理、版面製作到圖片輸出都能在同一個專案完成。

總結

Claude Design 可以將一篇已經寫好的網頁文章，重新整理成 Instagram 或 Threads 輪播圖卡。

簡單來說，完整流程是：

建立 Claude Design 專案
→ 加入設計規範檔
→ 貼上文章網址與簡單提示詞
→ Claude Design 製作 HTML 圖卡
→ 對話修改並確認
→ 將 HTML 各頁轉成 PNG／JPG
→ 下載圖片

如果只是偶爾製作一組圖卡，把規格寫進提示詞也可以；但如果你經常需要把文章轉成社群內容，準備一份固定設計檔會省事很多。