Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/connerkward/deterministic-design-skill/design-spatialnpx skills add connerkward/deterministic-design-skill --skill design-spatialgit clone --depth 1 https://github.com/connerkward/deterministic-design-skillWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00000 | $0.04445 |
| Opus 5 | $0.00000 | $0.02223 |
| Sonnet 5 | $0.00000 | $0.00889 |
| Haiku 4.5 | $0.00000 | $0.00445 |
Grade A, and why
design-spatial scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to design-spatial — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 256 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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. Prescribe the process, not the look: see it with fresh eyes, and push off the average toward the domain. Taste supplies the direction (design-thinking / design-philosophy); this skill only insists you look and don't ship the mean.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 256 lines · 0 tokens per session scan A 4cf938a363a2
design-spatial is a skill published in the GitHub repository connerkward/deterministic-design-skill (1 stars, last pushed 2mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 4,445 tokens. A static security scan graded it A with 0 findings. It is 100% identical to design-spatial, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
layout-discipline
为 AI 生成的 HTML/网页/demo 施加排版纪律——统一字号档位、4px 间距栅格、对齐规则、卡片规范与颜色变量,并在交付前自检。只要用户让你做网页、HTML、demo、卡片、界面、落地页、原型,或抱怨排版不齐/间距乱/层级糊/不够规范,就务必使用本技能。.
composing-html
Composes single-file HTML artifacts (PR review writeups, status reports, incident postmortems, slide decks, design systems, prototypes, flowcharts, module maps, feature explainers, kanban boards, prompt tuners) from a small JSON spec instead of hand-written HTML/CSS/JS. Use when the user asks to "compare options…
web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。.
hue
Meta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design language', 'new design system skill', 'design skill inspired by X', 'design skill from this screenshot', '/hue', or 'use hue'. Also triggers for 'remix my design skill'…
design-review
Use when adding or restyling a Facet UI component, or before merging a UI PR — walks the component against DESIGN.md (tokens, states, a11y, contrast, responsive) so the design system is matched, not just remembered. The judgment check verify.sh can't grep.
thesis-figure-skill
生成学术论文配图:LaTeX/TikZ 代码(结构化图表,直接嵌入论文)或 draw.io XML (技术路线图、汇报配图)。自动按论文领域风格设计,编译验证后交付。 Use when the user asks for: 论文配图、画架构图、画流程图、TikZ 图、draw.io 学术图、复刻论文图、tikz/latex diagram。.