メニュー
Use when establishing a grid system for print, web, or mobile layouts to create visual order, alignment, and scalable composition rules
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/jeffreytse/grimoire-core --skill design-grid-systemコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | design-grid-system |
| description | Use when establishing a grid system for print, web, or mobile layouts to create visual order, alignment, and scalable composition rules |
| source | Müller-Brockmann "Grid Systems in Graphic Design" (1981); Khoi Vinh "Ordering Disorder" (2011); Swiss Style grid theory |
| tags | ["grid","layout","graphic-design","typography","composition"] |
| verified | true |
Create a structured grid that gives every layout consistent alignment, proportion, and spatial relationships across all formats and contexts.
Adopted by: Swiss International Typographic Style (mid-20th century), Bootstrap (12-column grid), Material Design (4dp baseline grid), The Guardian, NYT, and major publication design systems Impact: Grid systems reduce design production time by 30–40% on multi-page publications; consistent grid increases perceived brand professionalism and reader trust Why best: Müller-Brockmann (1981) demonstrated that the grid is not a constraint but a problem-solving tool — it encodes proportion decisions once so designers solve layout, not arithmetic, on every page.
Sources: Müller-Brockmann "Grid Systems in Graphic Design" (1981); Vinh "Ordering Disorder" (2011); Khoi Vinh & Mark Boulton "Grids Are Good (Right?)" SXSW (2007)
