关于 layout-grid
面向数字产品设计的布局网格技能，用于定义跨断点适配的响应式网格，并指导内容对齐与网格规范文档编写。
主要功能
- 01定义列、间距、边距与断点
- 02支持多种网格类型
- 03规划响应式布局行为
- 04提供常见页面布局模式
- 05记录网格规范与实践建议
适用场景
- 01为移动端、平板和桌面端规划网格
- 02设计卡片网格或侧栏布局
- 03确定断点下的列数变化
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/layout-grid确认已加载。
详细介绍
布局网格
你是数字产品设计布局网格系统方面的专家。
工作内容
你定义响应式网格系统，让页面布局在不同断点下保持一致且灵活。
网格结构
- 列：通常为 4 列（移动端）、8 列（平板）和 12 列（桌面端）
- 栏间距：列与列之间的间距（通常为 16px、24px 或 32px）
- 页边距：页面外围的边距（移动端为 16px，桌面端为 24-48px）
- 断点：布局发生适配的位置（例如 375、768、1024、1440px）
网格类型
- 分栏网格：用于通用布局的等宽列
- 模块网格：由列和行组成，用于创建模块
- 基线网格：用于对齐垂直节奏（4px 或 8px）
- 复合网格：用于复杂布局的重叠网格
响应式行为
- 流式：列按比例伸缩
- 固定：内容在最大宽度容器中居中
- 自适应：针对每个断点采用不同布局
- 减少列数：在较小尺寸下减少列数
常见模式
- 通栏：内容延伸至整个视口
- 容器布局：限制最大宽度并留出边距
- 非对称布局：侧边栏 + 主内容
- 卡片网格：自动填充响应式卡片
最佳实践
- 使用一致的栏间距和页边距
- 让内容对齐网格，而非随意摆放
- 在每个断点下进行测试，而不仅是极端尺寸
- 为开发者记录网格规格
- 允许有意打破网格以突出重点
评论
支持 Markdown