Paper.design 是什麼？超酷新技術，一鍵生成 SVG 檔

Paper 有一個超實用的新功能：它可以直接把畫布裡的內容輸出成 SVG。

這件事看起來只是多了一個輸出格式，但對平常會做 UI、網站設計或前端協作的人來說，其實很有感。因為很多 AI 工具可以幫你產生畫面，最後拿到的卻只是圖片，真正要放進網站、做成 Icon、調整尺寸，還是得再進其他工具重新處理。

SVG 不太一樣。它本身就是向量格式，可以自由縮放、不容易失真，也很適合拿來做網站圖示、裝飾圖形、Illustration，甚至直接交給前端使用。

而 Paper 比較有意思的地方是，它不只是讓你在畫布上做設計，還把輸出這一步直接接進工作流程裡。也就是說，你做完的東西，不只是「看起來完成」，而是有機會直接變成下一步可以使用的設計資產。

這篇就來實際看一下，Paper 的 SVG 功能到底怎麼用，以及它適合放在哪些設計情境裡。

Paper.design 是什麼？

Paper.design 是一款把設計畫布、網頁技術與 AI Agent 放在一起的設計工具。

乍看它有點像一般的 UI 設計軟體，可以建立畫板、文字、圖片與各種視覺元素，但 Paper 的底層思路不太一樣。它的畫布建立在 HTML 與 CSS 的概念上，因此畫面中的版面、間距、文字與樣式，本身就更接近實際的網頁結構。

這個差異在 AI 時代會變得很重要。

因為除了人在畫布上操作之外，Paper 也支援透過 MCP 讓 Codex、Claude Code、Cursor 等 AI Agent 直接讀取設計內容。Agent 可以知道你目前選了哪個物件、讀取節點結構與樣式，也能修改文字、調整 CSS、建立新的畫板或直接寫入 HTML。

換句話說，以前比較常見的流程是「設計師做好畫面 → 工程師看設計稿 → 再重新寫成前端」，Paper 想做的則是讓設計、AI 和程式碼待在更接近的工作環境裡。

例如你可以先在 Paper 裡完成一個 Landing Page，再讓 AI Agent 讀取目前的版面結構，把它轉成 React 或 Tailwind；反過來，也可以讓 Agent 直接修改畫布上的文字、樣式與元件。

Paper 本身也能將節點輸出成 PNG、JPG、SVG 等格式。

而這次我最有興趣的，就是它新出的 SVG 生成方式。

為什麼 SVG 這個功能值得注意？

如果平常比較少碰設計，SVG 可以簡單理解成一種向量圖形格式。

PNG、JPG 是由一格一格像素組成的圖片，所以解析度固定，當圖片被放得比原始尺寸大很多時，就容易出現模糊或鋸齒。

SVG 的概念不同。

它不是記錄「這一格像素是什麼顏色」，而是用路徑、形狀、座標等資料描述一個圖形。因此同一個 SVG，不論放在 24px 的 Icon，還是放大到大型 Banner，都可以維持清楚的邊緣。

這也是為什麼在網站和產品設計裡，Icon、Logo、Illustration、裝飾圖形等素材經常會使用 SVG。

對前端來說也很方便，因為 SVG 本身可以直接放進網頁，部分顏色、線條甚至動畫都能再透過程式控制。

但 Paper 這次有趣的地方，不只是「它可以 Export SVG」。

單純支援 SVG Export，其實很多設計工具本來就做得到。Paper 比較特別的是，你可以提供一張既有圖片，再透過自然語言告訴它應該怎麼重新畫，最後直接得到一個新的 SVG。

它更像是：

參考圖片 → 描述視覺風格 → AI 重新繪製 → SVG

而不是把 PNG 換一個副檔名而已。

它跟一般「圖片轉 SVG」工具有什麼不同？

以前如果要把一張圖片變成 SVG，最常見的方法通常是 Auto Trace 或 Image Trace。

原理比較接近「沿著原圖描線」，因此如果圖片本身細節很多，最後可能會產生大量路徑，畫面雖然看起來相似，但實際編輯起來很複雜。

Paper 這個功能比較不一樣。

它不是要求你百分之百保留原圖，而是可以先告訴 AI：我想保留什麼，以及最後希望它長什麼樣子。

例如同一張人物照片，你可以要求它變成極簡線稿、版畫、單色 Illustration，甚至限制它不要使用填色、減少筆畫數量。

這時候 AI 做的事情已經不只是「描圖」，而是重新解讀圖片，再按照你的視覺規則重畫一次。

對設計工作來說，這個差異其實很大。

因為很多時候我們要的並不是一張百分之百還原照片的向量圖，而是一個能符合網站或品牌風格的視覺素材。

實際教學：一段 Prompt，把圖片重新畫成 SVG

實際操作比想像中簡單。

先把想要轉換的圖片放進 Paper，選取圖片後，在下方的 AI 輸入框描述你希望最後呈現的效果。

例如我這次使用的 Prompt 是：

remove background and redraw as an engraving illustration.
thick dark blue lines on white back, light hatching for shading, no fills, minimal number of strokes

接著按下 Create SVG，Paper 就會根據原圖重新產生一個 SVG 版本。

這段 Prompt 其實沒有什麼特殊語法，幾乎都在描述畫面。

remove background 是要求它把原本照片的背景拿掉；engraving illustration 指定整體改成雕刻版畫的插圖風格；thick dark blue lines 控制主要線條使用較粗的深藍色；light hatching for shading 則是希望陰影改用少量排線呈現。

最後再加上 no fills 與 minimal number of strokes，限制它不要出現太多大面積填色，也盡量減少不必要的線條，讓整體更接近乾淨的向量插圖。

所以實際使用時，不需要把 Prompt 寫得像程式碼。

比較好用的方式，是把 Prompt 拆成三件事：

要處理什麼 → 想要什麼風格 → 有哪些視覺限制。

例如：

remove background 是處理方式。

engraving illustration 是風格。

dark blue lines、no fills、minimal strokes 則是在限制最後的視覺結果。

比起只告訴 Paper「幫我轉成 SVG」，真正重要的是把你希望它怎麼畫描述清楚。

這個功能可以拿來做什麼？

我覺得最直接的用途，不是拿它取代完整的向量繪圖軟體，而是處理原本很花時間的素材前製。

例如把人物照片快速轉成網站插圖、製作 Landing Page 的裝飾元素、將參考圖片改成線稿，或先快速做出一批 Icon、Illustration 的視覺方向。

尤其是「統一素材風格」這件事很實用。

假設今天一個網站需要五張不同主題的 Illustration，但手上的參考素材有照片、有 3D 圖、有不同風格的插圖。

以前要讓它們最後看起來像同一套視覺，通常還是得重新繪製。

現在則可以先固定一套 Prompt，例如統一使用深藍線條、白底、少量排線、不填色，再讓 Paper 依照同一組規則重新生成。

這對 Landing Page、品牌官網、簡報視覺，甚至設計前期的 Style Exploration，都會很方便。

SVG 不只可以當圖片，還能繼續做成動畫

Paper 產出的 SVG 還有一個滿有趣的玩法：把生成好的角色繼續拿去做網頁動畫。

因為 SVG 本身是由 Path、Shape 等向量元素組成，不只是單純的一張圖片。只要生成結果的圖層與路徑結構夠清楚，就可以再透過 CSS 或 JavaScript 控制它的位置、旋轉、縮放、透明度，甚至針對不同部位加入動態效果。

首先，一張小幽靈圖片，生成 SVG，再進一步用 JavaScript 做成動畫。原本只是靜態的插圖，後面就可以延伸成漂浮、左右晃動、眨眼，或其他互動效果。

這也是 SVG 比一般 PNG 更有彈性的地方：它不只是可以放大不失真的圖片，也可以繼續被程式操作。

如果今天是在做 Landing Page、品牌官網或產品互動效果，就可以變成：

圖片 → Paper 生成 SVG → JavaScript／CSS 動畫 → 網頁互動素材

不過實際好不好做動畫，還是要看 Paper 最後產出的 SVG 結構。如果所有細節都被合併成大量 Path，後續要控制單一部位就會比較麻煩；如果不同元素有清楚拆開，動畫就會更好處理。

生成 SVG 後，還是要做最後檢查

當然，AI 生出 SVG 不代表它一定可以完全不檢查就直接上線。

實務上我還是會確認幾件事：線條有沒有出現奇怪的斷點、人物細節有沒有失真、是否產生太多不必要的路徑，以及縮小到實際使用尺寸後還看不看得清楚。

尤其是 Logo、正式品牌識別或需要非常精準幾何結構的圖形，還是比較適合人工整理。

所以我會把 Paper 這項功能定位成快速產出與視覺探索工具，而不是所有向量設計工作的終點。

Paper 真正方便的地方，是把中間步驟縮短了

Paper 的 SVG 功能本身不代表 Illustrator 或其他向量工具就不需要了。

真的要處理複雜 Logo、精細路徑或正式品牌資產，人工調整依然有它的必要。

但如果今天只是想快速把一張參考圖片變成可以使用的向量插圖，Paper 把原本可能需要經過去背、描圖、重新繪製、調整風格、輸出 SVG的流程，縮短成「圖片＋Prompt」。

而且這也符合 Paper 整體的產品方向：它不是只想讓 AI 幫你生成一張好看的畫面，而是希望設計結果能夠繼續往下一個工作環節走。

對設計師來說，這種差異其實比「又多了一個 AI 生圖功能」重要得多。

因為接下來 AI 設計工具真正值得看的，可能已經不是誰生成得更漂亮，而是生成出來的東西，到底能不能真的拿來用。

Paper 的 SVG 功能，就是一個很直接的例子。

Source

• Paper.design