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 结构、内置变量、预乘 alpha 或基于 SDF 的绘制的可靠指导，而不是泛泛的 prompt 生成代码。

它有什么不同

和普通 prompt 不同，这个技能是围绕 Makepad 的具体约定来构建的：内联 shader 块、instance 与 uniform 的区别、Sdf2d.viewport，以及预乘 alpha 规则。这个差异很关键，因为哪怕是很小的语法错误或颜色错误，也可能导致渲染失败，或者出现难以察觉的视觉 bug。makepad-2.0-shaders 技能的价值，主要在于帮你少走弯路，得到更贴近引擎真实行为的代码。

如何使用 makepad-2.0-shaders 技能

安装并触发它

先按照技能元数据里给出的 repo 安装流程完成安装，然后在任务涉及 Makepad shader 工作时调用 makepad-2.0-shaders 技能。一个好的触发方式，是直接说明你要处理的 widget 或效果、视觉目标，以及 shader 应该响应的输入状态。比如：“为带有 hover 和 active 状态的圆角按钮创建一个 Makepad draw_bg shader，使用 Sdf2d 和预乘 alpha。”

给技能提供正确的输入

当你提供以下信息时，makepad-2.0-shaders 的效果会明显更好：

• 绘制目标：draw_bg、draw_text、draw_quad，或自定义 draw object
• 视觉需求：边框、填充、发光、遮罩、渐变、阴影或过渡
• 状态模型：hover、active、selected、主题色、DPI 敏感性
• 任何硬约束：需要保留的旧代码、性能限制，或不能进行纹理采样

弱一点的 prompt 会说：“做一个很酷的 shader。”
更好的 prompt 会说：“重写这个 draw_bg shader，画出 1px 描边和柔和的内填充，保留 hover 动画，并确保 Pal.premul 处理正确。”

先读这些文件

先看 SKILL.md，了解核心语法和边界规则；再读 references/shader-reference.md，掌握变量类型、颜色处理和自定义 shader 函数。遇到基于图形轮廓的任务，再使用 references/sdf2d-reference.md，它会给出准确的 SDF 基元、组合方式，以及 fill/stroke 的顺序。按这个阅读顺序，能最快从意图走到可用代码。

更容易产出好结果的工作流

想让 makepad-2.0-shaders 给出更好的结果，可以按下面的顺序来：

1. 先定义 widget 和视觉目标
2. 决定 shader 应该返回 sdf.result 还是预乘颜色
3. 把每个输入映射到 instance、uniform 或 varying
4. 先写出最小可用的 shader block
5. 在 hover、active 和高 DPI 尺寸下测试视觉行为

如果你是从其他引擎迁移过来，先从概念上翻译效果，而不是逐行硬搬。Makepad 的 shader 语法和 alpha 处理差异很大，直接移植通常会失败。

makepad-2.0-shaders 技能常见问题

这只适合高级 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，以及按实例状态与共享状态的区分。这样可以大幅降低“看着对，放进 repo 却跑不通”的概率。

它适合 Frontend Development 工作流吗？

适合，尤其适合那些把布局和渲染混在一起的 UI 系统。makepad-2.0-shaders for Frontend Development 在你的前端任务包含自定义视觉效果、动画状态，或者必须在 Makepad 内编译通过的可复用组件样式时，表现最强。

如何改进 makepad-2.0-shaders 技能

给 shader 一个明确任务，而不只是一个风格

最好的输入会说明 shader 必须完成什么，而不只是应该长什么样。比如，“渲染一个按下状态的按钮，带柔和阴影，hover 时阴影淡出”就比“做得现代一点”更有用。前者能让 makepad-2.0-shaders 选择正确的图形逻辑、状态连接方式和颜色流。

避免常见失败模式

大多数坏结果都来自细节缺失：用了旧版 shader 语法、忘了预乘 alpha，或者把状态声明在错误的作用域里。另一个常见问题是图形几何描述太模糊。如果你需要圆角矩形，不要只说“做一个圆角卡片”，而要明确成 box、box_all 或其他 SDF 基元。

让输出贴合你当前的文件

如果你已经有一个 widget，直接贴出当前的 draw_* block，并说明要改什么。makepad-2.0-shaders 最有价值的用法通常是迭代式的：先保留能正常工作的部分，再一次只改一个行为，比如描边宽度、混合方式、阴影柔和度或 hover 过渡。

用正确的检查方式验证

第一次生成后，要在小尺寸和大尺寸下测试 shader，在浅色和深色主题下测试，也要切换 hover 或 active 状态。若输出不对，就用最具体的缺陷来补充输入：比如“在 DPI 2.0 下描边太粗”，或者“填充颜色没问题，但 alpha 边缘不对”。这种反馈能帮助 makepad-2.0-shaders 技能更快收敛。