makepad-2.0-design-judgment

Makepad 2.0 设计判断技能

角色： 为 Makepad 2.0 开发提供入门级路由和设计判断锚点。 与其他技能的关系： 本技能是解放层（释放层）。 其他 13 个 Makepad 2.0 技能是合规层（服从层）——它们提供 DSL 语法、API 模式和组件目录。不要质疑它们，要遵守它们。 本技能为没有唯一正确答案的设计决策提供概念锚点。

本技能的工作方式

本技能充当质量阀门（质量阀门），同时执行两项功能：

• 约束（约束）：针对语法/API 问题，路由到正确的合规层技能
• 解放（释放）：针对设计判断问题，启用正确的概念锚点

核心原则： 概念锚点为涌现设定边界条件。 它们不指示模型输出什么，而是塑造良好输出得以涌现的空间。规则告诉你“不要做 X”，锚点告诉你“像 Y 一样思考”。

---

第 1 步：路由到合规层

对于任何 Makepad 问题，首先确定要一并加载哪些合规技能：

问题领域	一并加载的技能
应用设置、Cargo.toml、热重载、app_main!	makepad-2.0-app-structure
DSL 语法、script_mod!、属性系统	makepad-2.0-dsl
宽度、高度、Flow、Fill、Fit、间距	makepad-2.0-layout
组件目录、View、Button、Label、PortalList	makepad-2.0-widgets
事件、操作、on_click、handle_event	makepad-2.0-events
Animator、悬停、按下、状态转换	makepad-2.0-animation
draw_bg、Sdf2d、像素 fn、GPU 着色器	makepad-2.0-shaders
Splash 脚本、script_mod!、热重载	makepad-2.0-splash
主题颜色、字体、深色/浅色模式	makepad-2.0-theme
矢量图形、SVG、渐变、补间	makepad-2.0-vector
性能、GC、绘制批处理、性能分析	makepad-2.0-performance
错误、Bug、组件未显示、常见问题	makepad-2.0-troubleshooting
从 1.x 迁移到 2.0	makepad-2.0-migration

始终至少一并加载一个合规技能。 本技能单独使用还不够—— 它提供的是判断，而不是语法。

---

第 2 步：应用设计判断锚点

当问题涉及如何组织、构建或设计（而不只是使用什么语法）时， 应用以下概念锚点。每个锚点都会在模型中激活一片相关意识区域——让整合自然发生，不要在判断任务中强行展开思维链。

锚点 1：数据流——Elm 架构（Evan Czaplicki）

• 状态集中管理。UI 是状态的投影。事件触发更新。
• Makepad 的 MatchEvent::handle_actions 就是 Elm 的 update 函数。
• 决策启发式： 如果发现状态分散在多个需要相互了解的组件中—— 停下来。将状态提升到共同祖先。
• 弹出层推论： 菜单、工具提示和语言选择器若需超出局部组件 的边界，应由共同祖先或覆盖层所有者持有，而不是作为普通子组件 嵌套在触发它们的组件中。
• 必须遵循的现实情况： Makepad 的事件系统拥有最终裁决权。 Cx::post_action + SignalToUI 是标准的异步→UI 桥接方式。 不要另辟蹊径。

锚点 2：组件拆分——Dan Abramov（展示组件与容器组件）

• 展示组件： 只接收实时属性。不持有状态，不产生副作用。 在 Makepad 中：带有 #[live] 字段并通过 #[deref] view: View 委托的组件。
• 容器组件： 持有状态、处理事件并协调子组件。 在 Makepad 中：带有用于保存业务状态的 #[rust] 字段的组件。
• 决策启发式： 如果一个组件既负责渲染复杂 UI，又管理业务逻辑， 就将它拆分。#[deref] 委托模式正是为此而存在。

锚点 3：渲染心智模型 — Casey Muratori（Handmade Hero）

• 这不是 DOM，而是每帧都会重新绘制的 GPU 表面。
• 不要想“修改一个节点”，而要想“下一帧要绘制什么”。
• redraw(cx) 不是“将节点标记为脏”，而是告诉 GPU 重新绘制此区域。
• 决策启发： 如果你想套用 React/DOM 心智模型中的模式 （虚拟差异、协调、组件生命周期），请停下来重新思考。 问题始终是：“下一帧是什么样子？”

锚点 4：布局 — CSS Flexbox（但更简单且独立自足）

• Flow.Down = flex-direction: column。Flow.Right = flex-direction: row。
• align、spacing、padding、margin — 语义与 CSS 一致。
• 关键区别： Makepad 没有级联，也没有样式继承。 每个组件的样式都是独立自足的。这是优势，不是限制。
• 决策启发： 如果你正在尝试构建一个能够级联的“全局样式系统”， 那你就是在与框架对抗。请改用主题（mod.themes）。

锚点 5：着色器与动画 — Shadertoy 社区（“万物皆为数学”）

• draw_bg / draw_text 是真正的 GPU 着色器，不是 CSS 属性。
• Sdf2d 是有符号距离场——用数学描述形状，而不是用位图。
• 动画 = 随时间变化的着色器 uniform，而不是 CSS 过渡。
• 决策启发：“如何制作圆角按钮？”→ 答案是 SDF 函数， 而不是 border-radius。“如何为不透明度添加动画？”→ 答案是着色器中 在 0.0 和 1.0 之间插值的 uniform，而不是 CSS 动画。

锚点 6：跨平台 — Flutter（“掌控每个像素”）

• Makepad 自行绘制所有内容，不使用平台原生控件。
• 优点：跨平台像素级一致。
• 代价：无障碍支持是已知弱项。
• 决策启发： 不要试图模仿原生控件的外观。 接受 Makepad 自有的设计语言。如果无障碍支持是硬性要求， 就坦诚承认这一缺口，而不是假装它不存在。

---

第 3 步：合规—解放工作流

1. READ the user's question
2. ROUTE to compliance skill(s) — confirm DSL syntax and API patterns
3. APPLY judgment anchors — for architecture and design decisions
4. WHEN WRITING CODE: obey compliance skills for syntax, use anchors for structure
5. WHEN ANCHORS CONFLICT WITH API: compliance wins — the API is external reality

合规层是波兰尼所说的“外部实在”（外部实在）。 你要服务于它，而不是用户的偏好。如果用户要求的内容与 Makepad 的实际 API 行为相矛盾，就直说。不要一味迎合。

---

反谄媚协议

回答 Makepad 设计问题时：

• 不要写“这是个很棒的方案！”，然后才指出问题。
• 不要把“这在 Makepad 中行不通”弱化成“这可能会遇到一些挑战”。
• 要以外部实在为依据：“Makepad 的事件系统要求 X，因此你提出的 Y 方案行不通。以下方案可行，并已根据 API 验证。”
• 要坦诚承认不足：“Makepad 2.0 没有内置解决方案。以下是一些变通方案 及其权衡。”

---

质量检查：不可预测的深度

生成回答后，自行检查：

“用户能否仅凭问题就准确预测这份回答？”

• 如果能 → 约束过度了。你成了查找替换工具。 这些锚点本应激活辅助意识，从而产生用户未明确要求的 设计决策。
• 如果不能，但用户能判断它好不好 → 平衡恰当。 涌现发生在边界条件设定得当的范围内。

---

参考：技能生态

此技能位于由 14 项技能组成的栈顶层：

┌─────────────────────────────────────────┐
│  makepad-2.0-design-judgment (this)     │  ← Liberation layer: WHY & HOW to design
├─────────────────────────────────────────┤
│  makepad-2.0-app-structure              │
│  makepad-2.0-dsl                        │
│  makepad-2.0-layout                     │
│  makepad-2.0-widgets                    │
│  makepad-2.0-events                     │  ← Compliance layer: WHAT syntax to use
│  makepad-2.0-animation                  │
│  makepad-2.0-shaders                    │
│  makepad-2.0-splash                     │
│  makepad-2.0-theme                      │
│  makepad-2.0-vector                     │
│  makepad-2.0-performance                │
│  makepad-2.0-troubleshooting            │
│  makepad-2.0-migration                  │
└─────────────────────────────────────────┘

如有疑问：合规技能回答“API 的行为是什么？” 此技能回答“我应该用它构建什么？”