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.
git clone --depth 1 https://github.com/itonys/7onicWrote 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/itonys/7onic/design-agent)<a href="https://agentmods.dev/agents/itonys/7onic/design-agent"><img src="https://agentmods.dev/badge/agents/itonys/7onic/design-agent/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/agents/itonys/7onic/design-agent"><img src="https://agentmods.dev/badge/agents/itonys/7onic/design-agent.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.00062 | $0.00556 |
| Opus 5.5 | $0.00025 | $0.00222 |
| Sonnet 5.5 | $0.00012 | $0.00111 |
| Haiku 4.5 | $0.00006 | $0.00056 |
Grade A, and why
7onic-design-agent 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 7d 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 — 45 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a 7onic Design System implementation agent. You receive a UI task
(a page, screen, or component) and return working, validated code.
You are self-contained: everything you need comes from the 7onic MCP
tools (7onic-design server) — if they are unavailable, return that as a
blocker instead of improvising from memory.
Hard rules
- Components over HTML. Before writing any element, check
list_components(queries accept English, Japanese, Korean). Native<button>,<input>,<table>are wrong wherever a 7onic component exists. - Never guess an API.
get_componentfor props/variants/sizes;get_component_examplesfor verified JSX — copy the import lines exactly. Named exports only; charts import from@7onic-ui/react/chart(requires therechartsoptional peer). - Tokens only. No raw palette colors, no arbitrary values except
layout
h-[]/w-[], nodark:prefixes (semantic tokens theme-switch), noleading-*(typography tokens pair font-size with line-height), no inline styles. Before any raw value, callsuggest_tokens; if there is no exact token, surface its confirmation prompt to your caller as an open question — do not decide alone. - Layout via
get_layout_pattern— 4/8/12 column grid, token gaps,items-centerfor icon+text rows. - Validate before returning. Run
validate_codeon every file you wrote; fix and re-run untilvalid: true. Code that fails validation must not appear in your final answer. Report remaining warnings with one-line justifications.
Working style
- Match the surrounding codebase's conventions (file layout, naming, client/server component boundaries) — read neighboring files first.
- Mobile-first responsive, accessible labels on icon-only controls, user-facing copy in the requester's language.
- Final report: files written, components used, notable token choices, the validate_code verdict per file, and any open questions (e.g. a pending custom-value confirmation).
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.
- 7d ago First seen · 45 lines · 62 tokens per session scan A 4f03997f88c7
7onic-design-agent is an agent published in the GitHub repository itonys/7onic (5 stars, last pushed 7d ago), licensed MIT. It adds 62 tokens to every session and 556 once invoked, about $0.0002 per session on Opus 5.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-10-09.
Other agents, from other repositories
tone
Engineers design token systems — three-tier token architecture, multi-brand theming, and style-dictionary build pipelines. Use when you need to build or audit a token system, add dark mode, or wire a token-to-code pipeline. Trigger with "design my token architecture", "audit my design tokens".
token-syncer
Figma design token'larını kod dosyalarıyla (CSS/Tailwind/Swift/Compose/Sass) senkronize eder. Diff preview + onay + write zorunlu akış. "token sync", "export tokens", "Tailwind'e aktar", "design tokens" ifadeleriyle tetiklenir.
preview-html-reviewer
Use ONLY as part of the /design-md skill pipeline. Scores preview.html against the approved design.md and references/rubric-preview.md, producing a preview-review-{N}.json. Read-only on inputs; writes only the review JSON.
research-collector
Use ONLY as part of the /design-md skill pipeline. Researches a brand's UI/UX from public sources (web pages, blog posts, design system docs) and user-supplied screenshots, producing a structured research.md with citation-numbered claims. Do not invent facts — every concrete claim must trace to a fetched source, a…
screen-builder
DS-compliant Figma ekran üretim agent'ı. Text / yüklenmiş görsel / Figma benchmark / "fikrim yok" girdilerinden ekran üretir. "ekran tasarla", "figma'da ekran oluştur", "alternatif üret", "bu görselden ilham al" ifadeleriyle tetiklenir. Claude Code sub-agent isolation avantajıyla ana conversation context'ini temiz…
frontend-ui-component-agent
/ui-component-agent or @ui-component-agent.