Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From design-practice
Design Machines editorial layout and art direction philosophy rooted in grid systems, reader-centered design, and visual storytelling. Use when critiquing page layouts, advising on grid construction, evaluating editorial spreads, planning page structure, designing landing pages, building CSS Grid layouts, or reviewing art direction decisions in HTML/CSS, Figma, InDesign, Illustrator, or Affinity. Trigger this skill when the user asks about grids, columns, margins, gutters, whitespace, visual hierarchy, page structure, editorial design, magazine layouts, art direction, content pacing, or responsive layout strategy — even informally like "how should I lay this page out" or "the spacing feels wrong." Also trigger when designing Live Wires layout primitives, building Assembly page layouts, or any design review where spatial relationships and content organization matter. Draws on Müller-Brockmann, Gerstner, Franchi, White, Lupton, Turley, Chimero, and Caldwell.
npx claudepluginhub design-machines-studio/depot --plugin design-practiceHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-practice:layoutThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design your grid as a programme (Gerstner), build it on mathematical proportions (Müller-Brockmann), use it as a flexible structure for arranging type hierarchically (Lupton), then allow content to rupture it where editorial meaning demands (Turley).
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
Share bugs, ideas, or general feedback.
Design your grid as a programme (Gerstner), build it on mathematical proportions (Müller-Brockmann), use it as a flexible structure for arranging type hierarchically (Lupton), then allow content to rupture it where editorial meaning demands (Turley).
You never generate designs. You inform, critique, and advise.
Every layout decision exists on a spectrum between four positions. The strongest editorial design draws on all of them simultaneously.
The grid divides space into consistent horizontal and vertical modules with uniform gutters. Mathematical proportions govern all relationships. Elements are placed precisely. The grid creates intelligibility, order, and faster comprehension. "The use of the grid system implies the will to systematize, clarify, penetrate to the essentials."
The grid is a programme -- a rule set that accommodates unpredictable content. His 58-module mobile grid for Capital magazine allowed 2, 3, 4, 5, and 6 column configurations within a single system. "Instead of solutions for problems, programmes for solutions." Maximum conformity with maximum freedom.
People don't want to read. They are lazy and in a hurry. They scan for 2.5 seconds before turning the page. Every layout decision must pass the WIIFM test (What's In It For Me?). Design as psychology (use curiosity), service (organize for ease), and interpretation (emphasis where deserved).
Learn the grid thoroughly, then break it deliberately. Photography, illustration, display type, and infographics sit free of the grid -- they disrupt to give energy and tone. "The design and type is quite formal and boring when you really look at it. What sits on top is multiple crazed levels of irony, sarcasm and visual spin."
The baseline grid must divide the full page or viewport height evenly -- not just the text block. Choose a whole number of rows that produces a baseline increment close to your target leading. Margins become whole baseline counts, and Gerstner's field divisions nest cleanly within the remaining text block rows. This is the foundation that makes everything else work. See ${CLAUDE_SKILL_DIR}/references/grid-systems.md for the complete calculation method.
| Principle | Guidance |
|---|---|
| Margins | Wider outside than gutter; bottom wider than top |
| Columns | 2--6 for editorial; single column for long-form reading |
| Gutters | Consistent; wide enough to prevent column bleed |
| Baseline grid | Must divide the full page/viewport height evenly (fitbaseline method); all text snaps to it; margins are baseline multiples |
| Hanging elements | Allow images, pull quotes, and display type to break the grid intentionally |
Scale, weight, color, spacing, and placement create typographic hierarchy. Changes in scale express priorities. An effective grid is not a rigid formula but a flexible and resilient structure. "Think more, design less."
Before asking How (which grid? which typeface?), ask Why. What is the editorial intent? What should the reader feel, know, or do? "How enables, but Why motivates."
Allow multiple design voices within the same publication. Let nervousness about an idea being "not quite right" signal creative risk worth taking. Hire hybrid talents who can cross disciplines.
Develop text, headlines, photographs, and infographics together as a unified visual story. The art director is a journalist. Every visual element must advance the narrative. "A visual form that is as graphic as it is narrative, as entertaining as it is informative."
Every material has a grain. The web's grain favors fluidity, verticality, and assembly.
Digital is not degraded print; it is a different material with its own grain. Print allows precise grid construction with fixed proportions. Digital requires fluid systems that compose rather than decompose.
grid-template-columns with fr units for proportional columnssubgrid for nested alignment to the parent gridWhen critiquing a layout, assess these eight dimensions:
| Skill | Plugin | When to Load |
|---|---|---|
| typography | design-practice | Type hierarchy and rhythm that layouts contain |
| livewires | live-wires | CSS layout primitives (stack, grid, sidebar, etc.) |
| dataviz | design-practice | When layouts include charts or data displays |
Official and third-party Claude Code plugins that complement this skill:
| Plugin | Tool | When to Use |
|---|---|---|
| figma | Design context tools | Extract layout specs from Figma designs |
| frontend-design | Frontend skills | Layout implementation guidance |
| Topic | File | When to Load |
|---|---|---|
| Grid Systems | ${CLAUDE_SKILL_DIR}/references/grid-systems.md | Deep dive on Müller-Brockmann and Gerstner grid theory |
| Editorial Design | ${CLAUDE_SKILL_DIR}/references/editorial-design.md | White, Franchi, Turley, Caldwell editorial principles |
| Digital Editorial | ${CLAUDE_SKILL_DIR}/references/digital-editorial.md | Chimero's web-specific framework and responsive layout |
| Anti-Patterns | ${CLAUDE_SKILL_DIR}/references/anti-patterns.md | Named layout failures and their principled alternatives |
| Context Questionnaire | ${CLAUDE_SKILL_DIR}/references/context-questionnaire.md | Shared design context prerequisites (used by design-advisor and design-critic agents) |
LLMs produce reflexive layout patterns -- centered hero stacks, three-equal-cards rows, side-stripe decorations, cookie-cutter section rhythm -- that signal template thinking rather than structural design. The anti-patterns reference names these failures with DM source citations (White on pacing, Muller-Brockmann on grid, Gerstner on hierarchy, Tufte on chartjunk, Chimero on why-before-how) and provides Live Wires alternatives. Load this reference when critiquing layouts or reviewing generated output.