Skip to main content
Glama
Sign In

Designers

by com.allthepossibles
OverviewDiscussionsAdmin

Grid builder

build_grid
Read-only

Build a column grid from page or container width. Pass width, and optionally columns (default 12), gutter (default 24), margin (default 24). Returns the column width, the x position of every column, the width of every span from 1 to N columns, CSS grid code (fixed pixel and fluid fr versions), and the Figma layout grid settings. Flags fractional column widths and suggests the nearest widths that give whole pixels. For a modular grid, also pass rows and height; optionally rowGutter (defaults to the gutter) and baseline (line height in px). The modular result gives module size, row positions, CSS, and whether module height plus row gutter lands on whole baseline lines, with the module height that would fix it (a convention). Rejects zero, negative, NaN and layouts where the columns do not fit. Sources: Müller-Brockmann, Grid Systems in Graphic Design; Samara, Making and Breaking the Grid; Marcotte, Responsive Web Design. Pure arithmetic, nothing stored.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "width": "<width>"
    },
    "name": "build_grid"
  }
}

Input Schema

NameRequiredDescriptionDefault
rowsNoRows for the modular variant (needs `height`).
widthYesPage or container width in px.
gutterNoGutter in px (default 24, 0 allowed).
heightNoPage height in px for the modular variant.
marginNoOuter margin on each side in px (default 24, 0 allowed).
columnsNoNumber of columns (default 12, max 64).
baselineNoBaseline unit in px, to check module alignment.
rowGutterNoGutter between rows in px (default: the column gutter).

Schema Changelog

Changes observed during successful MCP inspections.

  1. Added

TDQS

A4.4/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations cover safety (readOnly, non-destructive, closed-world), and the description adds behavior the annotations cannot: the tool is pure arithmetic with nothing stored, it rejects zero/negative/NaN and non-fitting layouts, and it proactively flags fractional column widths with suggested whole-pixel fixes. That is real operational context beyond the annotation boilerplate.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with width and the primary mode, then returns, then the modular variant, then validation — a sensible progression with dense but non-redundant sentences. The cited source list at the end is defensible rationale but is the one part that could be trimmed.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema present, the description carries the full return-shape burden and does so: column width, per-column x positions, all span widths, fixed-px and fluid-fr CSS, and Figma layout grid settings, plus modular module size, row positions and baseline verification. Error conditions and defaulting behavior are also covered, so an agent can call it and interpret results without guessing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so defaults for `columns` (12), `gutter` (24), `margin` (24) and the `rowGutter`-defaults-to-gutter rule are already documented. The description restates them and adds only minor meaning (that `baseline` drives a whole-line alignment check and a corrective module height), so baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Names a specific verb and resource ('Build a column grid') plus a precise input basis (page or container width), and immediately branches into the fixed-column and modular variants. No sibling in the list does grid arithmetic, so an agent can distinguish it without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives clear conditions for each mode — pass only `width` for a column grid, add `rows` + `height` for the modular variant — and states what happens on invalid input. It stops short of naming differentiating alternatives (e.g. audit_spacing or modular_scale), but the mode selection guidance is explicit.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

All Designers toolsInspect
Try in Browser
Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources