makepad-2.0-layout
作者 ZhangHanDongmakepad-2.0-layout 是一项 Makepad 2.0 布局技能，用于把 UI 想法转换为有效的 Walk 和 Layout 代码。它能帮助处理尺寸、流式布局、间距、内边距、对齐以及滚动容器行为，并为设计实现、安装和使用提供实用指导。当你需要的是 Makepad 特定的布局决策，而不是通用的 CSS 建议时，就该用它。
这项技能评分为 76/100，属于扎实但不是顶级的目录条目：用户能拿到一个触发条件明确的 Makepad 2.0 布局指南，里面还有真实示例和模式参考；但也要预期它更偏聚焦、专业，而不是一个覆盖全面的 UI 工具箱。如果你在做 Makepad，并且希望比通用提示少一些布局语法错误，那么它值得安装。
- 触发性强：前言明确说明它适用于 Makepad 2.0 布局，并列出了大量具体触发短语，包含英文和中文术语。
- 实操深度不错：正文内容较完整，采用 8 个 H2 和 21 个 H3 的结构，结合代码示例解释了 layout turtle 模型以及 Walk/Layout 概念。
- 参考支持有用：提供了独立的 references/layout-patterns.md 文件，其中包含可用的布局模式和语法说明。
- 范围较窄：它只针对 Makepad 2.0 布局，因此在尺寸、流式布局、间距、对齐和滚动视图模式之外的场景帮助有限。
- 没有提供安装命令或脚本，用户只能依赖书面指导，而没有可执行的安装或校验流程。
makepad-2.0-layout 技能概览
makepad-2.0-layout 是用来做什么的
makepad-2.0-layout 技能帮助你处理 Makepad 2.0 的布局 turtle 模型：尺寸与排布通过 Walk 和 Layout 来控制，而不是 CSS flexbox 或 grid。它最适合你需要把一个 UI 想法转成可用的 Makepad 布局代码，却不想在 Fill、Fit、Flow.Down、间距、内边距、对齐方式或滚动容器行为上反复试错的时候。
适合谁安装
如果你正在开发 Makepad UI、把 Web/UI 工具里的布局迁移到 Makepad，或者经常卡在 widget 尺寸和容器流向上，就应该安装 makepad-2.0-layout 技能。它尤其适合需要针对屏幕、面板、工具栏、列表和嵌套视图获得实用 makepad-2.0-layout usage 指南的开发者。
它为什么不一样
makepad-2.0-layout skill 的核心区别在于，它聚焦的是 Makepad 特有的语法和约束，而不是通用 UI 建议。它会把最影响落地的规则直接提炼出来：widget 的尺寸如何被占用、容器如何放置子元素、滚动视图如何与高度和 flow 协作。这样一来，当你的阻塞点是“为什么这个视图尺寸不对或滚不起来”时，它比快速扫一遍仓库更能帮你做判断。
如何使用 makepad-2.0-layout 技能
先安装，再先读这两个文件
按你现有的技能安装流程来，例如：npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout。安装后，先读 skills/makepad-2.0-layout/SKILL.md，再打开 references/layout-patterns.md 看具体示例。在这个 repo 里，这两个文件是 makepad-2.0-layout install 和立即上手 makepad-2.0-layout usage 的最高信号起点。
把模糊目标改写成可用提示词
好的输入要描述屏幕目标、容器类型和尺寸意图。比如不要只问“做一个登录页”，而是直接说：“用 Makepad 2.0 做一个登录表单：卡片居中，纵向堆叠，按钮固定高度，文本框宽度填满，卡片高度随内容自适应。”这样技能才有足够上下文去判断 Fill 还是 Fit，设置 flow，并避免布局歧义。
先讲布局约束，不要先讲视觉效果
把这个技能用在 Design Implementation 时，先说会影响最终结构的约束：哪一部分应该拉伸、哪一部分应该收缩、间距放在哪里、内容能不能滚动。最常见的坏输出来源，是高度行为说得太含糊，尤其是在容器和滚动视图内部。如果某个区域不能无限扩展，要直接说清楚。
按 Makepad 的布局模型来提问
makepad-2.0-layout guide 在你用 Makepad 术语提问时效果最好：width: Fill, height: Fit, flow: Down, spacing, padding, align 和 ScrollYView。如果你是从 CSS 迁移过来，先描述你想要的效果，再让它给出等价的 Makepad 布局结构，而不是直接照搬 CSS 规则本身。这样能减少翻译错误，也能让输出更贴合 turtle 模型。
makepad-2.0-layout 技能常见问题
这个技能只适用于 Makepad 2.0 项目吗？
是的，makepad-2.0-layout skill 只用于 Makepad 2.0 的布局工作。它不是通用 UI 布局助手，也不应被当作 CSS 或其他框架模式的直接替代品。
我不是专家，也能用好吗？
可以。只要你能提供一个具体的 UI 目标和几个约束，初学者也能用。这个技能最有帮助的场景，是你大致知道屏幕长什么样，但不确定要怎么用 Makepad 布局语法表达出来。
什么时候不该用它？
不要把它用于纯视觉设计任务、非 Makepad 框架，或者布局行为本来就已经完全解决的问题。如果你的问题主要是品牌、文案或动画时序，makepad-2.0-layout guide 能提供的价值会比更专门的提示词少得多。
它和普通提示词相比好在哪里？
普通提示词往往会输出泛泛的 flexbox 语言，或者只给出模糊结构。makepad-2.0-layout 技能更适合你需要精确的容器行为、尺寸默认值，以及与滚动感知相关、且符合 Makepad 语法和模型的布局决策时使用。
如何改进 makepad-2.0-layout 技能效果
先把缺失的尺寸信息说全
想获得更好的 makepad-2.0-layout usage 结果，就要明确哪些元素固定宽高、哪些元素随内容收缩、哪些元素吃掉剩余空间。更强的输入应该像这样：“侧边栏宽 280px，内容区填满剩余宽度，列表纵向滚动，头部保持内容高度。”这样技能就能直接选对 Walk 值，不用来回猜。
明确说明嵌套关系和 flow
很多布局 bug 都来自父子结构不清楚。要告诉技能子元素是纵向堆叠、横向并排，还是在嵌套容器里混合使用。如果某个区域包含头部和可滚动正文，就把这两层都说出来，这样输出才会用对 flow 和 height 行为。
用 Makepad 约束检查第一版结果
常见失败模式包括：把 Fit 当成 CSS 的 auto-height、忘记滚动容器需要有受限高度，以及把间距加在错误的层级。拿到第一版输出后，可以一次只针对一个问题要求修正，比如“修正滚动区域高度”或“把这一行改成居中的纵向堆叠”。通常，逐步收紧要求，比一次性大改更容易得到更好的 Makepad 代码。