Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/martineserios/thebrananpx agentmods add skills/martineserios/thebrana/design-systemWrote 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/martineserios/thebrana/design-system)<a href="https://agentmods.dev/skills/martineserios/thebrana/design-system"><img src="https://agentmods.dev/badge/skills/martineserios/thebrana/design-system/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/martineserios/thebrana/design-system"><img src="https://agentmods.dev/badge/skills/martineserios/thebrana/design-system.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.00044 | $0.01728 |
| Opus 5.5 | $0.00018 | $0.00691 |
| Sonnet 5.5 | $0.00009 | $0.00346 |
| Haiku 4.5 | $0.00004 | $0.00173 |
Grade A, and why
design-system 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 1mo 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
86% identical to design-system — 19 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 — 248 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System
Token architecture, component specifications, systematic design, slide generation.
When to Use
- Design token creation
- Component state definitions
- CSS variable systems
- Spacing/typography scales
- Design-to-code handoff
- Tailwind theme configuration
- Slide/presentation generation
Token Architecture
Load: references/token-architecture.md
Three-Layer Structure
Primitive (raw values)
↓
Semantic (purpose aliases)
↓
Component (component-specific)
Example:
/* Primitive */
--color-blue-600: #2563EB;
/* Semantic */
--color-primary: var(--color-blue-600);
/* Component */
--button-bg: var(--color-primary);
Quick Start
Generate tokens:
node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
Validate usage:
node scripts/validate-tokens.cjs --dir src/
References
| Topic | File |
|---|---|
| Token Architecture | references/token-architecture.md |
| Primitive Tokens | references/primitive-tokens.md |
| Semantic Tokens | references/semantic-tokens.md |
| Component Tokens | references/component-tokens.md |
| Component Specs | references/component-specs.md |
| States & Variants | references/states-and-variants.md |
| Tailwind Integration | references/tailwind-integration.md |
Component Spec Pattern
| Property | Default | Hover | Active | Disabled |
|---|---|---|---|---|
| Background | primary | primary-dark | primary-darker | muted |
| Text | white | white | white | muted-fg |
| Border | none | none | none | muted-border |
| Shadow | sm | md | none | none |
Scripts
| Script | Purpose |
|---|---|
generate-tokens.cjs |
Generate CSS from JSON token config |
validate-tokens.cjs |
Check for hardcoded values in code |
search-slides.py |
BM25 search + contextual recommendations |
slide-token-validator.py |
Validate slide HTML for token compliance |
fetch-background.py |
Fetch images from Pexels/Unsplash |
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.
- 1mo ago First seen · 248 lines · 44 tokens per session scan A 3ece9374d54c
design-system is a skill published in the GitHub repository martineserios/thebrana (3 stars, last pushed 3d ago), licensed MIT. It adds 44 tokens to every session and 1,728 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 86% identical to design-system, differing in 19 lines, and is treated as a copy.
Other skills, from other repositories
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
accessibility-per-component
Audit one design system component's accessibility against WCAG 2.2 AA: keyboard, screen reader, contrast, focus, ARIA, target size. Trigger: a11y audit, is this accessible, WCAG check, screen reader support, keyboard navigation check. Not for page- or product-wide audits.
figma-variable-audit
Audit Figma variable collections: tier mapping, naming, alias chains, modes, orphans; can fix in place with Figma Console MCP. Triggers: audit my Figma variables, review variable collections, Figma variable health. For token files in code use token-audit.
theme-audit
Audit theme parity: tokens missing or unchanged per theme, component tokens bypassing semantics, contrast within each theme, resolver contexts, theme-switch regressions. Triggers: dark mode audit, theme coverage, brand variant parity. For general token structure use token-audit.
token-audit
Audit how design tokens are defined: tiers, naming, alias chains, raw values, orphans, DTCG readiness. Triggers: audit my tokens, token architecture review, token health check. Not for code consuming tokens (token-compliance), theme parity (theme-audit) or Figma variables (figma-variable-audit).