关于 better-layout
better-layout 是用于构建和审查界面布局的设计技能，重点包括分组、对齐、响应式行为、本地化及适配 RTL 的布局。
主要功能
- 01分组与对齐指南
- 02间距和自适应布局原则
- 03适应方向变化的逻辑属性
- 04按内容确定响应式断点
- 05布局审查报告规范
适用场景
- 01检查界面层级与内容分组
- 02适配翻译后的文本长度
- 03检查小尺寸和大尺寸下的布局
- 04使用逻辑属性支持 RTL
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/better-layout确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
grouping-and-alignment.mdreview-output.mdspacing-and-adaptivity.md详细介绍
传达结构的布局
布局在读到任何文字之前就开始传达信息：位置、间距和对齐本身就能体现层级，留白充足胜过装饰。好的布局也能经受考验：调整尺寸、翻译、镜像为 RTL 后，依然应保持协调。构建或审查 UI 代码时，请遵循这些原则，并用项目自身的惯用方式编写每项修复：沿用现有的样式系统，绝不另起一套。
better-accessibility 技能涵盖点击区域大小和焦点行为；better-ui 技能涵盖视觉润色（圆角、阴影、动画）；better-typography 技能涵盖行长和文本间距。
如果界面尚无既定的密度或间距系统，请将下方的数值视为起点。当有意设计的平台界面元素、紧凑的专业工具和项目设计令牌在点击区域、缩放、本地化和视口压力测试中仍然适用时，请予以保留。
快速参考
| 类别 | 适用场景 |
|---|---|
| 分组与对齐 | 空间与分隔线、对齐边缘、逻辑属性、重要性排序 |
| 间距与自适应 | 目标之间的间距、布局边距、渐进式披露、全宽内容、断点、i18n 扩展 |
| 审查输出格式 | 严重程度等级、问题表格、验证、结论 |
核心原则
1. 用空间分组，而非线条
留白是首要的分组工具，其次是背景形状，最后才是分隔线；只有单靠空间无法呈现结构时才使用分隔线。组间距必须至少是组内间距的 2 倍（组内 8px → 组间 16px 以上），否则分组看起来会像噪声。
2. 让控件与内容清晰区分
交互元素必须看起来可交互：使用背景形状、边框或一致的放置区域。绝不要将控件设计得与相邻的静态文本完全相同。
3. 对齐到共同边缘
选定对齐边缘并始终遵循；每个偏离的边缘都会显得杂乱。每个从属层级使用一个项目间距步长（16px 是实用的默认值）。使用逻辑属性（padding-inline-start、margin-inline-end）处理方向相关的布局；只有在几何形状确实与物理方向相关时，才使用物理左／右属性。
4. 按重要性排序
最重要的内容放在靠近顶部和起始边缘的位置；阅读顺序从上到下、从起始端到末尾端。思考起始端和末尾端，而非左侧和右侧。
5. 暗示隐藏内容
渐进式披露需要可见的提示。使用项目既有的提示方式；如果没有，就让下一项在滚动边缘处露出 16–32px，或显示披露控件。隐藏内容若毫无提示，就如同不存在。
6. 在目标之间留出空间
如果尚无既定的密度系统，相邻的带边框或填充的控件之间应留出 12px；无边框的纯文本或纯图标控件周围应留出 24px。在 better-accessibility 的点击区域不重叠且控件仍能清晰区分时，紧凑布局可以采用更小的间距。
7. 按钮与边缘保持间距
在内容布局中，全宽按钮应置于布局边距内（移动端的内联起始侧从接近 16px 处开始），并使用可见的圆角。如果操作有意遵循既有的平台或应用界面元素、考虑了安全区域，且能与系统 UI 区分开来，那么边到边的操作也可以接受。
8. 内容延伸，控件悬浮
背景和媒体延伸至视口边缘；控件和文本则留在布局边距和安全区域内（env(safe-area-inset-*)）。固定界面元素应悬浮在内容层上方，而非阻挡内容。
9. 保持布局结构，直到确实需要调整
断点应由内容决定，而不是预设的设备尺寸。只要展开式布局确实适用，就应尽量保持，并尽可能晚地折叠；组件级适配优先使用容器查询。先测试最小和最大尺寸。
10. 为内容增长和裁切做好规划
应预留充足空间，以应对字符串长度增长和语言差异，而不是依赖通用百分比：文本容器不要设置固定宽度或高度，并让行内容可以换行。不要把关键操作放在可能因调整大小或滚动而被裁切的位置；应让它们在常规文档流中始终可访问，或放在符合产品设计的稳定界面区域中。
常见错误
| 错误 | 修正方法 |
|---|---|
| 本可用间距解决的问题却添加分隔线 | 移除分隔线，将组间距加倍 |
可本地化布局中使用 margin-left / padding-right | 改用 margin-inline-start / padding-inline-end |
| 内容布局中的按钮意外贴到视口边缘 | 在项目边距内留出内缩空间；保留有意设计的平台界面区域 |
| 看起来已完整显示的轮播图／滚动区域 | 让下一个项目超出边缘 16–32px 显示一部分 |
| 相邻控件融为一体，或扩大的点击区域相互重叠 | 按照项目的间距尺度加大间隔；以 12px／24px 作为起始值 |
| 因为 768/1024 是默认值，就将它们设为断点 | 在内容确实无法容纳时设置断点 |
| 文本容器固定宽度，只适配一种语言 | 使用 max-width 并允许换行；测试伪本地化和有代表性的语言区域 |
| 主要操作位于面板底部容易被裁切的位置 | 使用粘性定位或稳定的界面区域，并添加安全区域内边距 |
报告
只有在按照 review-output.md 中的格式报告所有已确认的问题，并提供验证结果和结论后，独立布局审查才算完成。在 better-interface 下，应改用其规定的格式。