A skill that makes Claude set up a layout grid the way a senior editorial or product designer does, starting from the body text and working outwards. It settles the page or artboard size, the type size and leading, and one base unit, then works out the margins, columns, gutters, rows and baseline grid with the arithmetic shown. For websites it sets breakpoints that match your developer's framework. Then it says where every kind of text and picture sits, what each picture frame crops, and gives the settings to type into InDesign, Figma, CSS or Tailwind.
Inside are five reference files: the grid formulas with scripts that compute and draw a grid to scale, print sizes and binding margins with Amazon KDP's minimums, screen sizes and framework breakpoints with Figma settings and CSS templates, rules for placing type and pictures, and a full worked example for a fictional pottery brand. It works one stage at a time and ends each with one question and a sensible default. Menu paths, breakpoints, browser support and WCAG 2.2 criteria come from those files, each with its source and the date it was checked.
It cannot open InDesign or Figma files, so export a PDF or PNG with the guides showing and give it the real page size; measurements taken from a screenshot stay estimates until then. It will not guess your printer's bleed or safe area, so bring the spec sheet. Switch on code execution and it draws the grid to scale and makes overlay files, a CSS file and a spec sheet. Upload the body font and it measures the cap height and character width instead of assuming them, which makes the rows exact.
Claude skill · version 1.0
Layout grids
Checking your access.
In the download · 7 files
- SKILL.mdThe method Claude follows: brief, format and base unit, the grid, breakpoints and variants, placement, then build and check, one stage at a time.
- README.mdHow to install it in claude.ai or Claude Code, how to start, and the licence.
- references/worked-example.mdEvery stage done for a fictional pottery brand: a Letter catalogue, its A4 version and a responsive product page, with all the arithmetic.
- references/grid-math.mdUnits, the formulas for columns, spans, margins and rows on the baseline, line length, and scripts that compute a grid, draw it to scale and measure a font.
- references/print-setup.mdUS and ISO sizes, bleed and safe area, binding margins with Amazon KDP's minimums, fold panels, starting grids by product and InDesign settings step by step, with sources.
- references/screen-and-css.mdScreen sizes in use, Tailwind, Bootstrap and Material breakpoints, slide grids, Figma layout guide settings, CSS and Tailwind templates, browser support and WCAG 2.2, with sources.
Install it and begin
01Install it in Claude CodeTerminal mkdir -p ~/.claude/skillsunzip ~/Downloads/layout-grid.zip -d ~/.claude/skills/# Start it with /layout-grid. If this is your first skill, type /reload-skills once.On claude.ai there is nothing to unzip: upload the zip as it is. Every step is on Install and use a Claude skill.
02Your first message to ClaudeText Use the layout grids skill. I am making [WHAT IT IS, FOR EXAMPLE A 24-PAGE CATALOGUE] at [SIZE, FOR EXAMPLE US LETTER OR A 1440 PX FRAME] in [FIGMA, INDESIGN OR CSS]. Body text is [FONT, SIZE AND LEADING, OR NOT CHOSEN YET]. Start with the brief and tell me what you need from me.Attach your brand guidelines, the printer's spec sheet or an existing page if you have them. Upload the body font file as well if you want the rows worked out exactly.
Worked example
Setting up a grid from the body text outwards
- 01Set the body text first: its size, its leading and the line length it needs, 45 to 75 characters for reading text.Every other number on the page is a multiple of the leading or a span of that line length, so the columns cannot come first.
- 02Make the leading the base unit in print (13 pt for 9.5/13 text) and a 4 or 8 px step on screen.Margins, gutters, rows and spacing then share one unit, and text in neighbouring columns lines up.
- 03Choose the column count from the widths the content needs: 6 for a Letter or A4 catalogue, 4, 8 and 12 across screen sizes.Twelve columns for a job that needs two widths adds a decision to every page and gives nothing back.
- 04Make the gutter one line of leading in print, and 16 to 24 px on screen.Narrower gutters let the eye jump across columns; much wider ones break the page into strips.
- 05Build rows from whole lines, with one empty line between rows, and compute the bottom margin from them.Picture tops then meet the cap height of the text beside them, and the last line sits exactly on the margin.
- 06Work out each picture frame's ratio, crop and pixel count before the shoot: 300 ppi at final size for print, twice the size for screen.The photographer can shoot to the frame instead of the designer cropping later.
- 07Test the grid at its extremes: the longest headline, the widest table, a 320 px phone and a 1920 px desktop.Grids fail at the edges of the content, and WCAG 2.2 asks for layouts that reflow at 320 CSS pixels.
What to do it with
- ClaudeFree tier, paid above it
A language model that writes, edits, reads long documents and runs tools, including agents that work inside a codebase.
Bad at It is agreeable by default, so it will improve a bad idea instead of telling you it is bad. Ask it to argue against you and the quality of the answer changes.
- Claude CodeSubscription
An agent that reads a whole repository, edits files, runs the tests and explains what it changed.
Bad at It is fast enough to make a large mistake quickly. Work on a branch, read the diff, and never let it push. Watch the starting mode: on Pro, Max and Team plans it opens in auto mode, which Anthropic's own list says may read a .env file and send the key in it to the API that key belongs to. Switch it off.
- FigmaFree tier, paid above it
The shared file where interface design happens: components, variables, prototypes and the handoff to code.
Bad at Its generative features make plausible screens rather than considered ones, and a plausible screen is the hardest kind to argue with in a review.
- InDesignSubscription
Long documents, grids, parent pages and print-ready output.
Bad at Its AI makes pictures and words, not layouts, and Generative Expand has handled linked images and colour profiles badly.
- Tailwind CSSOpen weights or open source
Styling by composing small classes, which makes a design system enforceable in the markup.
Bad at It pulls teams towards its default scale, and its defaults are now visible on a great many sites.
Why it matters
Ask a chat for a grid and you get twelve columns with 24 px gutters for every job. A grid that holds up is built from the body text: the leading sets the rows and the bottom margin, and the line length sets the column spans. This skill makes Claude do that arithmetic, show it, and test the result against your real content, so the grid still works on page forty and at every screen width.
- Type
- technique
- Period
- ongoing