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 skills add davidtoby/agent-skills --skill design-mdgit clone --depth 1 https://github.com/davidtoby/agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/davidtoby/agent-skills/design-md)<a href="https://agentmods.dev/skills/davidtoby/agent-skills/design-md"><img src="https://agentmods.dev/badge/skills/davidtoby/agent-skills/design-md.svg" alt="Measured on agentmods" height="20"></a>What 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.1 | $0.00014 | $0.01831 |
| Opus 5 | $0.00007 | $0.00915 |
| Sonnet 5 | $0.00003 | $0.00366 |
| Haiku 4.5 | $0.00001 | $0.00183 |
Grade A, and why
design-md 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 3d 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
91% identical to design-md — 18 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 — 199 lines — stays where its author put it; the contents beside it link to each section on GitHub.
DESIGN.md Skill
DESIGN.md is Google's open spec (Apache-2.0, google-labs-code/design.md) for
describing a visual identity to coding agents. One file combines:
- YAML front matter — machine-readable design tokens (normative values)
- Markdown body — human-readable rationale, organized into canonical sections
Tokens give exact values. Prose tells agents why those values exist and how to
apply them. The CLI (npx @google/design.md) lints structure + WCAG contrast,
diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON.
When to use this skill
- User asks for a DESIGN.md file, design tokens, or a design system spec
- User wants consistent UI/brand across multiple projects or tools
- User pastes an existing DESIGN.md and asks to lint, diff, export, or extend it
- User asks to port a style guide into a format agents can consume
- User wants contrast / WCAG accessibility validation on their color palette
For purely visual inspiration or layout examples, use popular-web-designs
instead. For process and taste when designing a one-off HTML artifact
from scratch (prototype, deck, landing page, component lab), use
claude-design. This skill is for the formal spec file itself.
File anatomy
---
version: alpha
name: Heritage
description: Architectural minimalism meets journalistic gravitas.
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
body-md:
fontFamily: Public Sans
fontSize: 1rem
rounded:
sm: 4px
md: 8px
lg: 16px
spacing:
sm: 8px
md: 16px
lg: 24px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "#FFFFFF"
rounded: "{rounded.sm}"
padding: 12px
button-primary-hover:
backgroundColor: "{colors.primary}"
---
## Overview
Architectural Minimalism meets Journalistic Gravitas...
## Colors
- **Primary (#1A1C1E):** Deep ink for headlines and core text.
- **Tertiary (#B8422E):** "Boston Clay" — the sole driver for interaction.
## Typography
Public Sans for everything except small all-caps labels...
## Components
`button-primary` is the only high-emphasis action on a page...
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.
- 3d ago First seen · 199 lines · 14 tokens per session scan A 6338f959dd6a
design-md is a skill published in the GitHub repository davidtoby/agent-skills (10 stars, last pushed 1mo ago), licensed MIT. It adds 14 tokens to every session and 1,831 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 91% identical to design-md, differing in 18 lines, and is treated as a copy.
Other skills, from other repositories
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
agent-browser
Headless browser automation CLI optimized for AI agents with accessibility tree snapshots and ref-based element selection.
canva
Manage Canva designs, assets, and folders via the Connect API. WHAT IT CAN DO: List/search/organize designs and folders Export finished designs (PNG/PDF/JPG) Upload images to asset library Autofill brand templates with data Create blank designs (doc/presentation/whiteboard/custom) WHAT IT CANNOT DO: Add content to…
canva
Create, export, and manage Canva designs via the Connect API. Generate social posts, carousels, and graphics programmatically.
core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
avalonia-layout-zafiro
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.