layout-grid — скилл для Claude Code: сетки и брейкпоинты
Скилл задаёт адаптивную сетку страницы: колонки, отступы между ними, поля и поведение на брейкпоинтах. Пригодится, когда верстаете структуру с нуля.
npx skills add Owl-Listener/designer-skills --skill layout-grid -a claude-codeЧто делает layout-grid
Скилл превращает агента в помощника по сеткам для цифрового продукта. Он разбирает анатомию сетки: колонки (4 на мобильном, 8 на планшете, 12 на десктопе), промежутки между колонками 16, 24 или 32 px, внешние поля страницы и точки, где раскладка меняется. Дальше идёт выбор типа: колоночная, модульная, базовая по вертикальному ритму или составная из пересекающихся сеток.
Поведение на разных экранах тоже разложено по вариантам: тянущаяся сетка, фиксированный контейнер с центрированием, отдельная раскладка под каждый брейкпоинт и уменьшение числа колонок на маленьких экранах. Отдельный блок — типовые паттерны вроде full-bleed, контейнера с полями, асимметричной раскладки с сайдбаром и карточек с автозаполнением.
Что это значит на практике: агент будет держать одинаковые промежутки и поля по всему макету и привязывать контент к сетке, а не ставить блоки на глаз. Скилл советует проверять каждую точку перелома, а не только крайние, и разрешает осознанно ломать сетку там, где нужен акцент. Если речь о шкале отступов внутри компонентов, это уже другой скилл — spacing-system; за поведением на разных устройствах идите в responsive-design.
Какие задачи решает
- задать колонки, промежутки и поля для нового макета
- выбрать тип сетки под конкретную страницу
- описать поведение раскладки на каждом брейкпоинте
- свести отступы к одним и тем же значениям по всему проекту
- задокументировать спецификацию сетки для разработчиков
Примеры запросов агенту
- задай сетку для лендинга: 12 колонок на десктопе, 4 на мобильном
- какие брейкпоинты и промежутки взять для карточной раскладки каталога
- распиши спецификацию сетки, чтобы передать её фронтенд-разработчику
Как установить layout-grid
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill layout-grid -a claude-code2Вручную: положить файлы
~/.claude/skills/layout-grid/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/layout-grid/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill layout-grid -a codex2Вручную: положить файлы
.agents/skills/layout-grid/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill layout-grid -a cursor2Вручную: положить файлы
.cursor/skills/layout-grid/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills layout-grid2Вручную: положить файлы
.github/skills/layout-grid/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill layout-grid -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/layout-gridВручную: положить файлы
.devin/skills/layout-grid/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill layout-grid -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора109
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о layout-grid
Как установить layout-grid в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill layout-grid -a claude-code. Скилл окажется в ~/.claude/skills/layout-grid/SKILL.md.
Что делает layout-grid?
Помогает определить адаптивную сетку страницы: колонки, промежутки между ними, внешние поля и поведение на брейкпоинтах. Плюс подсказывает типовые паттерны раскладки.
Чем layout-grid отличается от spacing-system и responsive-design?
layout-grid отвечает за структуру страницы. Шкала отступов внутри компонентов — задача spacing-system, а поведение на разных устройствах разбирает responsive-design.
Исходный текст
SKILL.md · MIT
--- name: layout-grid description: Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `responsive-design`. --- # Layout Grid You are an expert in layout grid systems for digital product design. ## What You Do You define responsive grid systems that create consistent, flexible page layouts across breakpoints. ## Grid Anatomy - **Columns**: Typically 4 (mobile), 8 (tablet), 12 (desktop) - **Gutters**: Space between columns (16px, 24px, or 32px typical) - **Margins**: Outer page margins (16px mobile, 24-48px desktop) - **Breakpoints**: Points where layout adapts (e.g., 375, 768, 1024, 1440px) ## Grid Types - **Column grid**: Equal columns for general layout - **Modular grid**: Columns + rows creating modules - **Baseline grid**: Vertical rhythm alignment (4px or 8px) - **Compound grid**: Overlapping grids for complex layouts ## Responsive Behavior - Fluid: columns stretch proportionally - Fixed: max-width container with centered content - Adaptive: distinct layouts per breakpoint - Column dropping: reduce columns at smaller sizes ## Common Patterns - Full-bleed: content spans entire viewport - Contained: max-width with margins - Asymmetric: sidebar + main content - Card grids: auto-fill responsive cards ## Best Practices - Use consistent gutters and margins - Align content to the grid, not arbitrarily - Test at every breakpoint, not just the extremes - Document grid specs for developers - Allow intentional grid-breaking for emphasis
© Owl-Listener · MIT · Owl-Listener/designer-skills
