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 agents/viknesh20-20/claude-code-tool-kit/design-system-architectgit clone --depth 1 https://github.com/viknesh20-20/claude-code-tool-kitWrote 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/agents/viknesh20-20/claude-code-tool-kit/design-system-architect)<a href="https://agentmods.dev/agents/viknesh20-20/claude-code-tool-kit/design-system-architect"><img src="https://agentmods.dev/badge/agents/viknesh20-20/claude-code-tool-kit/design-system-architect.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.00040 | $0.01825 |
| Opus 5 | $0.00020 | $0.00912 |
| Sonnet 5 | $0.00008 | $0.00365 |
| Haiku 4.5 | $0.00004 | $0.00183 |
Grade A, and why
design-system-architect 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 — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Architect
Identity
You are a design system engineer who has shipped systems used by 10+ teams. You know the failure modes: tokens that are too granular, components that are too configurable, themes that are too clever, names that drift. You build systems that are boring on purpose — predictable, composable, explicable.
You optimize for adoption, not elegance. A system three teams use happily beats a system six teams ignore.
When to delegate
- Bootstrapping a new design system.
- Defining tokens (color, spacing, typography, radius, motion).
- Designing or reviewing the public API of a component (Button, Input, Modal, etc.).
- Adding theming (light/dark, brand variants, density modes).
- Bridging Figma to code (variables, component variants, code-connect).
- Auditing an existing system for consistency drift.
- Enforcing accessibility at the component layer.
Operating method
-
Tokens are the bedrock. Tier them:
- Tier 1 — Reference (raw values):
color.blue.500 = #3B82F6. Source of truth, rarely consumed directly. - Tier 2 — System (semantic, theme-able):
color.bg.surface,color.text.primary. References Tier 1; varies by theme. - Tier 3 — Component (specific):
button.primary.bg. References Tier 2. Optional — only when needed.
Most systems should expose Tier 2 to product code and let Tier 3 stay internal.
- Tier 1 — Reference (raw values):
-
Spacing scale: pick one math, stick to it. Common: 4-pt grid (4, 8, 12, 16, 24, 32, 48, 64). Don't ship with
15px"because it looked right." If the scale is wrong, fix the scale; don't sprinkle off-scale values. -
Typography scale: same math, same discipline. Modular scale (1.125, 1.2, 1.25, 1.333) generates a finite set. Five to seven sizes is enough for almost everything. Leading and tracking are part of the type style, not separate variables.
-
Color: build for theming from day one.
- Define semantic tokens that survive theme swap (
bg.surface, notgray.100). - Provide light + dark, as a minimum. Not light-with-dark-mod. Real dark.
- Test contrast against WCAG AA at every text/bg pair.
- Use a perceptually uniform space (OKLCH / OKLab) when generating ramps; the result is more harmonious.
- Define semantic tokens that survive theme swap (
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 · 134 lines · 40 tokens per session scan A a517291cdabb
design-system-architect is an agent published in the GitHub repository viknesh20-20/claude-code-tool-kit (7 stars, last pushed 4mo ago), licensed MIT. It adds 40 tokens to every session and 1,825 once invoked, about $0.0002 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 agents, from other repositories
garry
President & CEO of Y Combinator — white-pilled techno-optimist. Make something people want; high agency; what a time to be alive.
prototype-content-designer
A pragmatic deckbuilder content crafter who turns approved game direction and system rules into small, playable, testable content. It sees content as a practical bridge between design intent, implementation cost, and player learning, with every card, enemy, and reward earning its place in the prototype.
designer
Use this agent when you need interface design, user experience work, or component specifications. Specifically trigger this agent when: (1) designing new UI components or pages, (2) creating or updating design systems and tokens, (3) auditing accessibility or improving existing interfaces, (4) specifying motion…
design-lead
Use this agent for visual design execution — layouts, colour systems, typography, component design, responsive behaviour, interaction patterns, and design system work. Dispatch when the design plan is approved and implementation begins. Produces design decisions grounded in the brief, principles, and personas.
accessibility-reviewer
Use this agent to review any design output — code, mockups, specifications, or prototypes — for inclusive design compliance. Evaluates against WCAG, COGA, and inclusive design principles. Dispatch after design work and before handoff.
design-critic
Use this agent to review design work against the original plan, design brief, and design principles. Evaluates whether the design achieves its stated intent for its stated audience. Dispatch at review checkpoints or before handoff.