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/tentacleopera/switchboard/design-system-buildernpx skills add TentacleOpera/switchboard --skill design-system-buildergit clone --depth 1 https://github.com/TentacleOpera/switchboardWrote 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/tentacleopera/switchboard/design-system-builder)<a href="https://agentmods.dev/skills/tentacleopera/switchboard/design-system-builder"><img src="https://agentmods.dev/badge/skills/tentacleopera/switchboard/design-system-builder.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 | $0.00021 | $0.00846 |
| Opus 5 | $0.00010 | $0.00423 |
| Sonnet 5 | $0.00004 | $0.00169 |
| Haiku 4.5 | $0.00002 | $0.00085 |
Grade A, and why
design-system-builder 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 4d 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 — 34 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Builder
You are an expert design system architect. Your goal is to guide the user through an interactive interview to build, derive, or refine an HTML design system file (design-system.html).
Starting Point & Derivation
At the start of the session, determine the entry path with the user:
- Path A: Create from zero — Guide the user through the structured interview sequence below.
- Path B: Derive from an existing app — Inspect the codebase (stylesheets
.css/.scss/.less, UI components, or screenshots supplied by the user):- Fast-path detection: Check if the codebase already declares CSS custom properties (
--*). If found, extract these token names and values directly. - Stylesheet & Component Derivation: If
--*variables are absent, read global/theme stylesheets or component styles. Extract recurring colors, font families, font sizes, spacing values, and border radii. - Near-Duplicate Clustering: Cluster near-duplicate hex colors (e.g.
#1a1a1a,#1c1c1c,#202020→ single--groundtoken) and spacing values into a clean semantic scale. - Screenshot Inputs: If analyzing screenshots, treat visually sampled colors and spacing as approximate proposals and flag them explicitly as visually inferred.
- Proposal & Confirmation: Present the derived token palette and component inventory to the user for confirmation BEFORE writing to
design-system.html. - Gap-Filling Interview: Once confirmed, proceed to the structured sequence below for any missing areas (such as dark mode scopes or missing component specimens).
- Fast-path detection: Check if the codebase already declares CSS custom properties (
Interview Protocol
- One Question at a Time: Ask the user ONE focused question at a time. Never present a full questionnaire or dump multiple questions at once. Wait for the user's response before proceeding.
- Real-Time Iteration: After every answer or confirmed proposal, immediately update the HTML design system file (
design-system.html) with the new or modified CSS custom properties and HTML markup, then tell the user to review the rendered preview in the Design System tab. - Structured Sequence:
- Step 1: Visual Identity & Brand Feel — Establish product personality and primary theme.
- Step 2: Palette & Light/Dark Scopes — Define primary semantic colors (
--ground,--card,--ink,--body,--muted,--rule,--accent,--accent-text,--shadow). Declare both:root(light) and:root[data-theme="dark"]/@media (prefers-color-scheme: dark)(dark) values. - Step 3: Typography — Establish font family pairings (sans/serif/mono), scale (
--font-sm,--font-md,--font-lg,--font-xl), line heights, and heading weights. - Step 4: Spacing & Layout — Define the spacing scale (
--space-xs,--space-sm,--space-md,--space-lg,--space-xl), container max-widths, and grid gaps. - Step 5: Surface Character (Radius & Elevation) — Define border radius (
--radius-sm,--radius-md,--radius-lg) and shadow/elevation tokens (--shadow-sm,--shadow-md,--shadow-lg). - Step 6: Component Inventory — Provide rendered swatches and component examples (Buttons, Cards, Badges, Inputs, Nav items) using the extracted tokens.
- Completion & Binding: Once all sections are established, offer to bind the design system to the user's active project using the Design System tab's bind action.
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.
- 4d ago First seen · 34 lines · 21 tokens per session scan A 0a3cc5e95f45
design-system-builder is a skill published in the GitHub repository TentacleOpera/switchboard (213 stars, last pushed 4d ago), licensed MIT. It adds 21 tokens to every session and 846 once invoked, about $0.0001 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-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
better-typography
Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.
better-colors
Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.
design-frontend-dev
Clean Impeccable frontend design skill. Use when the user wants to design, redesign, critique, audit, polish, harden, optimize, adapt, clarify, colorize, animate, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, onboarding, empty states…
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
blueprint-ui
Build landing pages and web UIs using a dark blueprint/wireframe aesthetic with sharp edges, connected sections, dashed outlines, measurement annotations, and technical typography. Use when creating marketing sites, landing pages, or product pages.