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 slogsdon/skills-design --skill design-plangit clone --depth 1 https://github.com/slogsdon/skills-designWrote 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/slogsdon/skills-design/design-plan)<a href="https://agentmods.dev/skills/slogsdon/skills-design/design-plan"><img src="https://agentmods.dev/badge/skills/slogsdon/skills-design/design-plan/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/slogsdon/skills-design/design-plan"><img src="https://agentmods.dev/badge/skills/slogsdon/skills-design/design-plan.svg" alt="Reviewed on agentmods" width="80" 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.00081 | $0.01949 |
| Opus 5 | $0.00041 | $0.00975 |
| Sonnet 5 | $0.00016 | $0.00390 |
| Haiku 4.5 | $0.00008 | $0.00195 |
Grade A, and why
design-plan 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 10d 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.
How it starts
The opening of the file, as written. The whole thing — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: design-plan
Produces ./design/<brand-slug>/DESIGN-PLAN.md — a brand-agnostic strategic plan that the design-system skill consumes to derive concrete tokens. Think of it as the design equivalent of a PRD: it captures intent, constraints, and direction without committing to specific hex codes or fonts yet.
When to use
- Starting a new branding project (Shane's own brand, a client brand, or an experiment)
- Before
/design-system— the system skill needs strategic input to make non-arbitrary token decisions - When revisiting a brand and the existing plan no longer matches the work
Do NOT use this for one-off artifacts where the brand is already defined and a DESIGN.md exists. Skip straight to a platform skill.
Inputs
A brand slug (kebab-case, e.g. shane-personal, acme-launch) and answers to 3 short questions (default) or 8 deeper questions (with --deep flag).
Output
./design/<brand-slug>/DESIGN-PLAN.md — created in the current working directory. The skill creates the parent dirs if needed. Never write to any other location.
Steps
1. Determine brand slug
If the user said "design plan for X", derive the slug from X (kebab-case, lowercase, no special chars). If they didn't, ask:
What brand slug should I use? (kebab-case, e.g.
shane-personal,acme-launch)
2. Run the interview
Default (3 questions, ~2 min):
1. One sentence: who is this brand for, and what do they do? (e.g. "tooling for senior engineers building AI products")
2. Pick a visual direction + give me 3 voice/tone adjectives:
- editorial (type-led, print-inspired, restrained)
- technical (dev aesthetic, mono-led, dense)
- bold (high-contrast, expressive, attention-grabbing)
- minimal (whitespace-led, calm, neutral)
- mixed (specify which two and how)
Voice adjectives: e.g. "direct, dry, confident" or "warm, curious, generous"
3. Hard NOs and mood references:
- Aesthetic constraints to never violate (e.g. "no emojis ever", "no gradients", "no stock photography")
- 2–3 reference brands or sites whose vibe you want to channel (URLs or names)
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.
- 10d ago First seen · 159 lines · 81 tokens per session scan A bbfde7771e75
design-plan is a skill published in the GitHub repository slogsdon/skills-design (3 stars, last pushed 26d ago), licensed MIT. It adds 81 tokens to every session and 1,949 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
component-family-consistency
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and spacing rhythm. Inconsistency between them breaks the sense of a coherent product. Use when building or reviewing a component library…
modular-scale-typography
Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font size choices, or when typography feels inconsistent or arbitrary.
extract-design
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design tokens, want to reverse-engineer a visual…
data-display-and-selection
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use large hit areas (the whole row or card, not just a checkbox). Selected state is communicated through a subtle background colour shift. Mass actions appear when items are selected.…
information-architecture
In large applications, information architecture determines whether users can find, understand, and act on data. Naming matters. The UI should mirror the data model and signal how data can be transformed. Dangerous or irreversible changes always require a confirm dialog. Use when designing navigation, naming entities…