Agent skill · design visual · sickn33
design-spatial
Design — spatial composition
Why this skill is useful
Provides specific guidelines for spatial composition and layout checks that enhance design quality beyond generic practices.
What it needs
About 11k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Design — spatial composition When to Use Use this skill when you need design — spatial composition. A model cannot trust its own UI output. Everything else follows from two failures. 1. It can't see what it made UI is generated as a token stream, never as pixels — so the model cannot perceive collisions, overlap, imbalance, or broken spacing. It will write a headline that runs into the hero image and have no idea. Render it and judge the image, not the code. Serve with any static server (e.g. python3 -m http.server or npx serve) and screenshot headless via Playwright. Screenshot at a few widths. Critique with fresh eyes — not your own. Grading your own output rationalizes it; the builder looks at its overlapping headline and calls it fine (this is exactly how a real collision shipped in testing). Use a separate judge — a subagent that did not write the page — and tell it to hunt for what's wrong: collisions, edge tangents, ragged alignment, lopsided weight, no clear focal point, breaks at some width. Fix, re-render, re-judge. 2. Its first idea is the average Whatever it produces first is the mean of its training data — and there is more than one mean: the generic-AI mean: Inter, purple-on-white gradients, centered single column, three equal cards; the designer-trend mean: oversized condensed caps, dark-mode + grain, monospace "vibes" microtext, sticker badges. Landing on the second isn't taste — it's a more flattering average, which is why it slips past. Treat your first instinct as the mean and deviate deliberately — toward this product's specific world (use design-thinking's domain / color-world / signature as the direction), not toward another trend. If the result could be any startup, you shipped the mean. 3. So don't prescribe a style Any fixed rule — a 12-col grid, an 8-point scale, "mono = data" — becomes next cycle's mean, and a blind model executes it into collisions anyway. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/design-spatial--05742d