design-system

design-system is a skill for Claude Code, Codex from antropos17/Aegis. It costs 27 tokens per session (446 once invoked), scanned A, original, MIT.

A guide for implementing the approved visual design of the AEGIS Observatory interface, or for creating a separate visual concept when a redesign is requested.

In plain words
What is it for?
Use it to build interface changes from the current design files, inspect the active entry point and styles, or create separate logo, icon, layout, or prototype concepts.
Why use it?
It prevents work from relying on outdated mockups or the wrong checkout and clarifies which design references and later decisions apply.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to build interface changes from the current design files, inspect the active entry point and styles, or create separate logo, icon, layout, or prototype concepts.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/antropos17/aegis/design-system
Install

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.

Any agent
npx skills add antropos17/Aegis --skill design-system
Clone the repo
git clone --depth 1 https://github.com/antropos17/Aegis

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for design-system

README.md
[![agentmods](https://agentmods.dev/badge/skills/antropos17/aegis/design-system/github.svg)](https://agentmods.dev/skills/antropos17/aegis/design-system)
Your own site
<a href="https://agentmods.dev/skills/antropos17/aegis/design-system"><img src="https://agentmods.dev/badge/skills/antropos17/aegis/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.

agentmods 80×15 button for design-system

Your own site · 80×15
<a href="https://agentmods.dev/skills/antropos17/aegis/design-system"><img src="https://agentmods.dev/badge/skills/antropos17/aegis/design-system.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 27 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 446 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00027 $0.00446
Opus 5.5 $0.00011 $0.00178
Sonnet 5.5 $0.00005 $0.00089
Haiku 4.5 $0.00003 $0.00045

Measured today against content hash bba0253a26d0, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

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 today.

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.

tools/agent-skills/design-system/SKILL.md · 25 lines

How it starts

The opening of the file, as written. The whole thing — 25 lines — stays where its author put it; the contents beside it link to each section on GitHub.

AEGIS interface design

Select the reference for this task

For implementation, locate frontend/observatory/DESIGN.md, reference/README.md and the preserved reference/ artwork in the selected checkout. Read the current entrypoint and stylesheet imports. If these files are absent, inspect git worktree list and the project handoff before choosing a source; do not silently switch to a historical temporary checkout.

DESIGN.md indexes the current contract and relevant dated amendments in DESIGN-HISTORY.md. Apply later decisions to the same property; the compact-density amendment supersedes the earlier panel inset. The approved Observatory reference is the integration baseline. Old Shield/Fancy mockups and historical plans do not override it. A running implementation is not proof of visual approval.

For an explicit redesign, logo/icon exploration or prototype request, follow the new brief and use the existing design as context. Alternative shapes, colors and layouts are allowed within that brief. Keep concept assets separate from application integration until the user requests that integration. Static concept work does not require running Electron or the full repository test suite.

Implement and verify

When integrating real data, preserve the approved composition, stylesheet order, typography, spacing, artwork and controls except where the requested change calls for a revision. Use the selected implementation's semantic tokens; do not assume an older tokens.css or font list defines Observatory.

Preserve meaningful absence and stale states, stamped process identities, and pending/failure feedback. A disabled action explains the actual capability limit. Use original local artwork for existing third-party agent identities.

Visually check affected states against the applicable reference at matching viewport, theme and scale. For interface changes, cover the relevant light/dark, focus, selection and empty/error states; check reduced motion when motion changes. Select viewport and scale cases from the current design contract and affected workflow; distinguish the fixed application layout from supported OS/accessibility zoom.

Read the full file on GitHub · 25 lines

Changes

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.

  1. today First seen · 25 lines · 27 tokens per session scan A bba0253a26d0

Subscribe to this mod's changes

design-system is a skill published in the GitHub repository antropos17/Aegis (157 stars, last pushed today), licensed MIT. It adds 27 tokens to every session and 446 once invoked, about $0.0001 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-17.

Related

Other skills, from other repositories

create-canvas

Create a project Copilot extension canvas for the current workspace.

microsoft/vscode · 16 tokens

winui-design

Read before writing or changing WinUI 3 XAML: choosing controls, pages and navigation, layout, Fluent Design, theming, accessibility, x:Bind, real samples, and checking that APIs exist with winapp find-api. Not for WPF or WinForms UI, even if the app uses the Windows App SDK.

microsoft/winappCli · 70 tokens

openscreen-design

Use this skill to generate well-branded interfaces and assets for OpenScreen (an AI-native screen-recording studio & video editor), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

getopenscreen/openscreen · 62 tokens

before-after

Produce a before/after visual comparison of an evlog surface (landing, docs, telemetry, playgrounds) and share it as public Blob URLs. Load when a change is visual, when someone asks for screenshots or a visual diff, or when a shipped PR touches apps/docs or apps/telemetry and deserves visual evidence.

HugoRCD/evlog · 68 tokens

eac-desktop-tips

A quick reference for using and troubleshooting features in the Deepseek Harness EAC desktop client. It covers window behavior, conversation rollback, plugins, desktop pets, Skills, MCP services, updates, and logs.

zouyuxuan122/DSH-Desktop-EAC · 80 tokens

cyrene-diagram

A design guide for making static SVG learning cards: small diagrams or reference cards rendered as images. It explains when to use a card instead of Mermaid, a text-based diagram format, and sets layout, color, size, and safety rules.

Playa-0v0/Cyrene-Agent · 50 tokens