設計工具 on KnightLi的博客

從 PPT 到原型設計：歸藏 PPT Skill 與 Huashu Design 使用場景解析

Sat, 09 May 2026 08:34:23 +0800

最近兩個中文開發者做的設計類 Agent Skill 很值得放在一起看：一個是歸藏的 guizang-ppt-skill，另一個是花叔的 huashu-design。

它們都不是傳統意義上的「設計工具」，而是把一套設計流程、審美偏好、檢查清單和工程模板寫成 Agent 可以執行的 Skill。你不是打開一個 UI 慢慢拖元素，而是把需求交給 Claude Code、Codex、Cursor 這類 Agent，讓它按固定流程生成 HTML、PPT、動畫或原型。

這類專案的價值，不在於讓 AI 隨機發揮，而在於把「怎麼做才不難看」這件事流程化。

guizang-ppt-skill：專注雜誌風網頁 PPT

歸藏的 guizang-ppt-skill 定位很清楚：生成單檔 HTML 橫向翻頁 PPT，視覺基調是「電子雜誌 x 電子墨水」。它更像一套為演講準備的版式系統，而不是通用設計框架。

倉庫 README 裡列出的核心能力包括：

單檔 HTML 輸出，不需要建置和伺服器，瀏覽器直接打開。
橫向左右翻頁，支援鍵盤、滾輪、觸控滑動、底部圓點和 ESC 索引。
5 套主題色預設，包括墨水經典、靛藍瓷、森林墨、牛皮紙和沙丘。
10 種頁面版面，包括開場封面、章節幕封、資料大字報、左文右圖、圖片網格、Pipeline、懸念問題、大引用、Before/After 對比和圖文混排。
內建模板、元件說明、版面骨架、主題設定和品質檢查清單。

它適合做線下分享、產業內部講話、私享會、AI 產品發表、demo day，以及帶有強烈個人風格的演講稿。不太適合大段表格資料、培訓課件和多人協作編輯。

這個專案有一個很好的取捨：它沒有試圖覆蓋所有設計場景，而是把「雜誌風 PPT」這個場景做窄。主題色只能從預設裡選，版面也有明確骨架，這反而降低了 Agent 跑偏的機率。

如果你經常要把觀點、產業觀察、產品發表內容做成演講 deck，它的實用性會很高。

安裝命令也很直接：

`1`	`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill`

huashu-design：更完整的 HTML 原生設計工作流

花叔的 huashu-design 覆蓋面更大。它的目標不是只做 PPT，而是把 HTML 當成原生設計畫布，用 Agent 生成可交付的設計資產。

倉庫 README 裡列出的能力包括：

可點擊 App 或 Web 原型。
HTML 投影片，以及可編輯 PPTX 匯出。
產品發表動畫、MP4、GIF 和配樂版本。
多方向設計方案並排對比。
資訊圖、資料視覺化、PDF、PNG、SVG 匯出。
5 維專家評審，包括哲學一致性、視覺層級、執行工藝、功能性和創新性。

它的核心思路是：讓 Agent 先理解品牌和素材，再產出高保真設計。專案裡強調了 Core Asset Protocol，也就是遇到具體品牌時，要先確認 logo、產品圖、UI 截圖、配色、字體和品牌指南，而不是憑記憶猜。

這點很重要。很多 AI 生成設計看起來「像設計」，但不像某個真實產品或品牌。huashu-design 試圖把這個問題前置解決：先找真實資產，再做設計。

安裝命令是：

`1`	`npx skills add alchaincyf/huashu-design`

它更適合那些希望在終端裡完成較完整設計交付的人：產品原型、發表動畫、簡報、資訊圖、設計評審都可以放在一個 Agent 工作流裡處理。

兩者最大的區別

簡單說，guizang-ppt-skill 是一個更窄、更穩的演講 deck 生成器；huashu-design 是一個更寬、更完整的 HTML 原生設計系統。

如果只看 PPT：

guizang-ppt-skill 更強調雜誌感、節奏、版式和單檔瀏覽器演示。
huashu-design 更強調通用設計能力、可編輯 PPTX、品牌素材、匯出鏈路和評審流程。

如果看整體設計能力：

guizang-ppt-skill 的邊界更清晰，適合快速做一份有風格的橫向演講。
huashu-design 的能力更綜合，適合把一個產品或品牌設計任務拆成原型、動畫、投影片和資訊圖。

這兩個專案也代表了兩種不同的 Skill 寫法。前者像一套高度收斂的模板和審美約束，後者像一個小型設計團隊的工作流說明書。

為什麼這類 Skill 重要

Agent 的一個常見問題是「會做，但不穩定」。同樣一句需求，有時輸出很好，有時就會滑向紫色漸層、圓角卡片、假圖標和一堆看似高級的空話。

Skill 的意義就是把穩定性補上。它把下面這些東西固化下來：

可複用的模板。
可執行的檢查清單。
明確的審美偏好。
常見錯誤的規避規則。
輸出格式和驗證流程。
什麼時候該問問題，什麼時候該直接開始做。

這比單純寫一句「請做得高級一點」可靠得多。

尤其是設計任務，審美並不是一句 prompt 就能穩定復現的。真正有用的是流程：先確認素材，再定方向，再搭結構，再做視覺，再檢查輸出。把這個流程寫成 Skill，Agent 才更像一個可協作的執行者，而不是一次性圖片生成器。

使用建議

如果你只是想把一個主題做成線下演講或分享 deck，可以優先試 guizang-ppt-skill。它的輸出邊界窄，單檔 HTML 也方便分發和預覽。

如果你想讓 Agent 承擔更完整的設計任務，比如 App 原型、發表動畫、品牌化投影片、可匯出 PPTX 或資訊圖，可以優先看 huashu-design。它的鏈路更長，適合需要多輪迭代和交付物匯出的任務。

如果你已經在寫自己的 Codex 或 Claude Code Skill，這兩個專案也都值得參考：

想學「如何把一個窄場景做穩」，看 guizang-ppt-skill。
想學「如何把複雜工作流拆成可執行協議」，看 huashu-design。

總結

歸藏和花叔這兩個專案的共同點，是都把「設計能力」從一次 prompt 變成了可重複執行的流程。

guizang-ppt-skill 的重點是雜誌風 HTML PPT，適合高風格化演講；huashu-design 的重點是 HTML 原生設計系統，覆蓋原型、動畫、投影片、資訊圖和評審。它們解決的不是「AI 能不能生成設計」，而是「AI 能不能按一套穩定方法生成可交付的設計」。

這可能會成為 Agent 工具生態裡很重要的一類開源專案：不只是程式碼模板，而是把人的經驗、審美和工作方法打包成 Skill。

參考連結：

AI 怎麼畫虛線、箭頭、曲線？AI 更改畫布大小教學

Fri, 08 May 2026 09:18:53 +0800

這裡的 AI 指常見向量設計軟體，不是人工智慧繪圖。

很多剛開始用 AI 軟體的人，最常搜尋的幾個問題是：AI 怎麼畫虛線、AI 怎麼畫箭頭、AI 怎麼畫曲線，以及 AI 怎麼更改畫布大小。它們都屬於基礎操作，但入口分散在描邊、鋼筆工具、線段工具和畫板工具裡。

下面按實際使用順序整理。

AI 怎麼畫虛線

在 AI 軟體裡，虛線不是單獨的工具，而是透過「描邊」面板設定出來的。

操作步驟：

用 直線段工具、鋼筆工具 或 形狀工具 畫出一條線或一個路徑。
選中這條線。
打開 窗口 -> 描邊。
在描邊面板裡勾選 虛線。
設定 短劃線 和 間隙 數值。

常見設定可以這樣理解：

短劃線：每一段實線有多長。
間隙：每一段實線之間空多少。
描邊粗細：控制虛線整體線寬。

例如想要一條比較均勻的虛線，可以先試：

1
2

短劃線：8
間隙：8

如果想要點狀線，可以把描邊端點改成圓頭，再把短劃線設得很小：

1
2
3

短劃線：0
間隙：8
端點：圓頭

這樣看起來就會更像一串圓點。

虛線沒有顯示怎麼辦

如果勾選虛線後沒有明顯變化，通常檢查這幾項：

目前物件有沒有描邊顏色。
描邊粗細是不是太小。
是否選中了正確物件。
短劃線 和 間隙 數值是不是都太小。
物件是不是只有填充色，沒有描邊。

很多線條問題，本質都是「物件有路徑，但沒有描邊」。

AI 怎麼畫箭頭

箭頭同樣不是單獨畫出來的，而是在路徑描邊上加入箭頭樣式。

操作步驟：

用 直線段工具 畫一條直線。
選中直線。
打開 窗口 -> 描邊。
在描邊面板底部找到 箭頭。
給起點或終點選擇箭頭樣式。
調整箭頭比例。

如果箭頭方向反了，可以用兩種方式處理：

在描邊面板裡把箭頭從起點換到終點。
使用路徑方向相關命令反轉路徑方向。

更簡單的做法是重新畫線：從箭頭尾部拖到箭頭頭部。這樣終點就是箭頭方向。

怎麼畫雙向箭頭

雙向箭頭只需要同時給起點和終點設定箭頭。

操作步驟：

選中線段。
打開描邊面板。
在第一個箭頭位置選擇一個箭頭。
在第二個箭頭位置也選擇一個箭頭。

如果箭頭太大或太小，調整 縮放 數值即可。

一般來說，箭頭大小要和線寬匹配。線很細但箭頭很大，會顯得不協調；線很粗但箭頭太小，也會看不清。

AI 怎麼畫曲線

AI 畫曲線最常用的是 鋼筆工具。

基礎方法：

選擇 鋼筆工具。
在畫布上點擊一次，建立第一個錨點。
在第二個位置按住滑鼠拖動，不要只點擊。
拖動時會出現方向手柄，曲線就會被拉出來。
繼續點擊並拖動，形成連續曲線。

關鍵點是：畫直線時只點擊，畫曲線時點擊並拖動。

很多新手畫不出曲線，是因為每次都只點擊，沒有拖動方向手柄。

曲線怎麼調順

畫完曲線後，可以用這些工具調整：

直接選擇工具：選擇錨點，移動錨點或手柄。
錨點工具：切換尖角和平滑點。
平滑工具：讓路徑更順。
曲率工具：用更簡單的方式建立平滑曲線。

如果只是想畫一條自然曲線，曲率工具 比鋼筆工具更適合新手。它不需要手動拉很多方向手柄，點擊幾個點就能生成平滑路徑。

用曲率工具畫曲線

曲率工具更接近「點到哪裡，曲線自動跟到哪裡」。

操作步驟：

選擇 曲率工具。
在畫布上點擊第一個點。
點擊第二個點。
繼續點擊第三個點，軟體會自動生成曲線。
拖動已有點，可以改變曲線形狀。

如果想要尖角，可以雙擊某個點，讓它在平滑點和角點之間切換。

對新手來說，先用曲率工具畫大形，再用直接選擇工具微調，通常比一開始就用鋼筆工具更容易。

AI 怎麼更改畫布大小

AI 裡的「畫布大小」通常指 畫板大小。如果你想改變匯出範圍、設計尺寸或頁面尺寸，改的是畫板。

操作步驟：

選擇左側工具列裡的 畫板工具。
點擊目前畫板。
在頂部屬性列輸入寬度和高度。
也可以拖動畫板邊緣手動調整大小。

常見尺寸例子：

公眾號封面：900 x 383 px
小紅書封面：1242 x 1660 px
Instagram 方圖：1080 x 1080 px
A4 紙張：210 x 297 mm

如果你的單位不是 px，可以在文件或屬性面板裡切換單位。

用畫板面板改尺寸

除了直接使用畫板工具，也可以透過畫板面板管理多個畫板。

操作步驟：

打開 窗口 -> 畫板。
選中要修改的畫板。
點擊畫板選項。
輸入寬度、高度和位置。

如果一個檔案裡有多個頁面、多個海報尺寸或多套匯出圖，畫板面板會比直接拖動更清楚。

更改畫板大小會影響圖形嗎

只改畫板大小，一般不會自動縮放裡面的圖形。

也就是說：

畫板變大，圖形尺寸不變。
畫板變小，圖形尺寸也不變，只是可能超出畫板範圍。
匯出時通常只匯出畫板範圍內的內容。

如果你想讓圖形跟著畫板一起縮放，需要手動選中圖形再縮放，或者使用縮放工具、變換面板來調整。

常用快捷入口

幾個常用入口可以記住：

描邊面板：窗口 -> 描邊
畫板面板：窗口 -> 畫板
畫板工具：Shift + O
鋼筆工具：P
直接選擇工具：A

不同版本軟體的介面可能略有差異，但核心邏輯基本一致：虛線和箭頭在描邊裡，曲線靠路徑工具，畫布大小改畫板。

小結

AI 畫虛線：選中路徑，在 描邊 面板勾選 虛線，設定短劃線和間隙。

AI 畫箭頭：先畫線，再在 描邊 面板給起點或終點加入箭頭。

AI 畫曲線：用 鋼筆工具 點擊並拖動，或用 曲率工具 更輕鬆地畫平滑曲線。

AI 更改畫布大小：使用 畫板工具 或 畫板 面板修改畫板寬高。

這幾個操作掌握後，大部分基礎線條、流程圖、標註圖和頁面尺寸調整都能處理。