makepad-2.0-shaders

makepad-2.0-shaders 技能總覽

這個技能的用途

makepad-2.0-shaders 技能能幫你撰寫與除錯 Makepad 2.0 的 shader 程式，特別是在你需要 pixel: fn() / vertex: fn() 區塊、Sdf2d 形狀，或自訂 widget 繪製時最有幫助。它最適合的情境不是「學圖形學」，而是「讓這個 Makepad UI 依照正確的 shader 語法、變數與色彩處理正常渲染」。

適合誰安裝

如果你的 Frontend Development 工作流程會碰到 Makepad UI、自訂控制項、動畫狀態或形狀渲染，makepad-2.0-shaders 技能會很合適。當你需要的是 shader 結構、內建變數、premultiplied alpha，或以 SDF 為基礎的繪製指引，而不是一般 prompt 生成的泛用程式碼時，就值得安裝。

它的不同之處

和單純的 prompt 不同，這個技能是以 Makepad 的實作慣例為核心：inline shader 區塊、instance 與 uniform 的區分、Sdf2d.viewport，以及 premultiply-alpha 規則。這點很重要，因為一點點語法錯誤或色彩處理錯誤，就可能讓渲染失敗，或造成細微但難追的視覺 bug。makepad-2.0-shaders 技能最大的價值，在於能少走彎路，輸出更貼近實際引擎可用的程式碼。

如何使用 makepad-2.0-shaders 技能

安裝並觸發它

先依照技能中繼資料裡的 repo 安裝流程完成安裝，之後在任務包含 Makepad shader 工作時呼叫 makepad-2.0-shaders 技能。很好的觸發方式，是直接描述你要的 widget 或效果、視覺目標，以及 shader 應該對哪些輸入狀態產生反應。例如：「幫我做一個 Makepad draw_bg shader，用 Sdf2d 和 premultiplied alpha 畫出有 hover 與 active 狀態的圓角按鈕。」

提供正確的輸入內容

當你提供以下資訊時，makepad-2.0-shaders 的效果會更好：

• 繪製目標：draw_bg、draw_text、draw_quad，或自訂 draw object
• 視覺需求：邊框、填色、光暈、遮罩、漸層、陰影或轉場
• 狀態模型：hover、active、selected、主題色、DPI 敏感度
• 任何硬性限制：要保留的舊程式碼、效能上限、不能做 texture sampling

弱的提示會說：「做一個很酷的 shader。」更好的提示會說：「把這段 draw_bg shader 改成畫出 1px stroke 和柔和的內層填色，保留 hover 動畫，並維持 Pal.premul 正確。」

先讀這些檔案

先從 SKILL.md 讀起，掌握核心語法與安全邊界，再看 references/shader-reference.md 了解變數型別、色彩處理與自訂 shader function。當任務是以形狀為主，且你需要精確的 SDF primitive、組合器，或 fill/stroke 順序時，再看 references/sdf2d-reference.md。這個閱讀順序能最快把意圖轉成可用程式碼。

能產出更好結果的工作流程

要讓 makepad-2.0-shaders 給出更好的指引，建議依照這個順序做：

1. 先定義 widget 和視覺目標
2. 決定 shader 應該回傳 sdf.result 還是 premultiplied color
3. 把每個輸入對應到 instance、uniform 或 varying
4. 先寫最小可行的 shader 區塊
5. 在 hover、active，以及高 DPI 尺寸下測試視覺行為

如果你是從其他引擎移植，先從概念上對應效果，不要逐行硬搬。Makepad 的 shader 語法與 alpha 處理差異夠大，直接照搬通常會失敗。

makepad-2.0-shaders 技能 FAQ

這只適合進階 shader 工作嗎？

不是。即使只是簡單的 UI 形狀，只要你想要正確的 Makepad 語法並減少渲染 bug，makepad-2.0-shaders 也很有用。初學者通常在目標明確、能直接套用引擎正確範例時，受益最大。

什麼情況不適合用？

如果你不是在寫 Makepad 程式、只需要通用的 GLSL 理論，或你的任務和 widget 繪製、SDF 型 UI 渲染無關，就可以先不要用。當你需要的是廣泛的前端設計建議，而且完全不涉及 shader 實作時，它也不是最佳選擇。

它比一般 prompt 好在哪裡？

一般 prompt 可能會產出看起來合理的 shader 程式，但 makepad-2.0-shaders 技能是針對 Makepad 的實際慣例調校：pixel: fn()、Sdf2d、Pal.premul，以及 per-instance 和 shared state 的區別。這能大幅降低「看起來對、進 repo 就壞掉」的輸出風險。

它適合 Frontend Development 工作流程嗎？

適合，尤其是把版面配置和渲染混在一起處理的 UI 系統。當你的前端任務包含自訂視覺效果、動畫狀態，或必須能在 Makepad 內編譯的可重用元件樣式時，makepad-2.0-shaders for Frontend Development 特別強。

如何改進 makepad-2.0-shaders 技能

給 shader 一個任務，不只是風格

最好的輸入會直接說明 shader 必須完成什麼，而不只是看起來怎樣。例如：「畫一個按下狀態的按鈕，帶有會在 hover 時淡出的柔和陰影」比「做得現代一點」更有用。前者能讓 makepad-2.0-shaders 選對形狀邏輯、狀態接線與色彩流向。

避開常見失敗模式

大多數糟糕輸出都來自資訊不足：用了舊版 shader 語法、忘了 premultiplied alpha，或把 state 宣告在錯的 scope。另一個常見問題是形狀幾何描述太含糊。如果你要的是圓角矩形，請直接寫 box、box_all 或其他 SDF primitive，不要只說「做一個圓角卡片」。

要求和你目前檔案一致的程式碼

如果你已經有 widget，直接貼上目前的 draw_* 區塊，並說明要改哪裡。makepad-2.0-shaders 最有價值的用法是迭代式：先保留可正常運作的部分，再一次只改一個行為，例如 stroke 寬度、混色、陰影柔化，或 hover 轉場。

用對檢查方式驗證

第一次產出後，請在小尺寸與大尺寸下測試 shader，並切換淺色與深色主題，以及 hover 或 active 狀態。如果結果不對，再用精確缺陷來修正輸入：例如「DPI 2.0 時 stroke 太粗」或「填色正確，但 alpha 邊緣看起來不對」。這種回饋方式能幫助 makepad-2.0-shaders 技能更快收斂。