Grid Systems — AI skill for Claude Code

grid-systems

An AI coding-agent skill that teaches your agent to design layouts with Swiss-school discipline. Distilled from Josef Müller-Brockmann's *Grid Systems in Graphic Design* (1981) and structured around 16 principles that adapt across print, screen, mobile, poster, exhibition, and identity work.

What it does

When loaded into your agent, this skill makes it:

• Pick the right grid for the task. Ten canonical starting points cover landing pages, product UIs, dashboards, articles, mobile apps, emails, modals, books, posters, and design systems — each with pre-solved column counts, type scales, baselines, and spacing.
• Debug "this feels off" layouts. A 17-row scenario → solution → why table covers the symptoms most layouts fail on: cramped, scattered, busy, out-of-rhythm, unaligned.
• Make every decision traceable to a principle. No ad-hoc spacing. No picked numbers. Measurements derive from one baseline; type sizes derive from one progression; hierarchy is communicated by position and size before color and weight.
• Translate across media. A baseline of 8 px on web, 12 pt in print, 1 cm on signage — same principle, different units.

Install

npx skills add oskar-q/grid-systems

That's it. [`skills`](https://www.npmjs.com/package/skills) fetches the skill from this repo and drops it into the right directory for your agent tool.

Manual install (any tool, no `skills` CLI)

git clone https://github.com/oskar-q/grid-systems.git ~/.cursor/skills/grid-systems

Replace `~/.cursor/` with whichever your tool uses:

Tool	Path
Cursor	~/.cursor/skills/
Claude Code	~/.claude/skills/
Codex CLI	~/.codex/skills/
Windsurf	~/.windsurf/skills/

For project-scope install (shared with your team), replace `~/.TOOL/` with `.TOOL/` inside your repo root and commit it.

Restart your agent after installing — some tools pick up new skills on next launch only.

Verify it loade