By FutureMedia
Build editorial/magazine/report webpages on a genuine Müller-Brockmann modular grid (Swiss / International Typographic Style) — real, visible, and verified. Ships a scaffold generator and a Puppeteer harness that proves 0px grid adherence.
A Claude Code plugin that packages the Müller-Brockmann Grid Systems skill: build editorial/magazine/report webpages on a genuine modular grid (Swiss / International Typographic Style) — and then prove the page sits on it.
The skill encodes both the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red) and the front-end engineering most attempts get wrong:
.claude-plugin/
plugin.json # plugin manifest
marketplace.json # single-plugin marketplace, so it's installable as-is
skills/
muller-brockmann-grid-systems/
SKILL.md # the skill
grid_tokens.py # deterministic grid scaffold generator (no deps)
verify_grid.js # Puppeteer verification harness (0px adherence proof)
From a local clone:
/plugin marketplace add /Users/lefteris/claude-plugins/muller-brockmann-grids
/plugin install muller-brockmann-grids@fm-design-skills
Or, once pushed to GitHub:
/plugin marketplace add <your-org>/muller-brockmann-grids
/plugin install muller-brockmann-grids@fm-design-skills
The skill then loads automatically on triggers like "magazine spread", "grid system", "Swiss design", "editorial layout", "show the grid", or "align everything to the grid".
grid_tokens.py has no dependencies. python3 grid_tokens.py --scaffold emits a
full minimal HTML page; flags: --cols --baseline --gutter --margin --maxw --accent.verify_grid.js needs puppeteer-core and a Chrome binary, passed via env:
CHROME=<chrome path> PUP=<puppeteer-core module path> node verify_grid.js <file-or-url> --widths=1440,1180,900.MIT
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub futuremedia/muller-brockmann-grids --plugin muller-brockmann-gridsMassimo Vignelli's complete design discipline from The Vignelli Canon — the Intangibles and Tangibles, the grid, Helvetica-led two-size typography, primary-color-as-identifier, and the NYC Subway / Grandi Stazioni wayfinding module logic. Ships a deterministic token generator.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Frontend design skill for UI/UX implementation
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions
Marketing skills for AI agents — conversion optimization, copywriting, SEO, paid ads, ad creative, and growth
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.