designer

designer is an agent for Claude Code from herbert-julio-azion/specialist-agent. It costs 23 tokens per session (1,840 once invoked), scanned A, original, MIT.

A user-interface and experience helper for building design systems, responsive layouts, accessible interfaces, themes, and animations. WCAG is a set of guidelines for making websites usable by people with disabilities.

In plain words
What is it for?
Use it to define design tokens, style components, improve interaction design, build responsive layouts, add animations, and check WCAG accessibility requirements.
Why use it?
It helps keep an interface consistent across screens while addressing accessibility and different device sizes.

Agent for Claude Code

Written for Claude Code: effort in frontmatter.

Part of the specialist-agent plugin — 57 agents shipped together

Good fit Use it to define design tokens, style components, improve interaction design, build responsive layouts, add animations, and check WCAG accessibility requirements.

Compare 6 agents from other repositories ↓
Install with agentmods
npx agentmods add agents/herbert-julio-azion/specialist-agent/designer
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.

Clone the repo
git clone --depth 1 https://github.com/herbert-julio-azion/specialist-agent

Made for: Claude Code.

Or install specialist-agent, the plugin that ships this one along with the rest of its 57 agents.

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 designer

README.md
[![agentmods](https://agentmods.dev/badge/agents/herbert-julio-azion/specialist-agent/designer/github.svg)](https://agentmods.dev/agents/herbert-julio-azion/specialist-agent/designer)
Your own site
<a href="https://agentmods.dev/agents/herbert-julio-azion/specialist-agent/designer"><img src="https://agentmods.dev/badge/agents/herbert-julio-azion/specialist-agent/designer/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 designer

Your own site · 80×15
<a href="https://agentmods.dev/agents/herbert-julio-azion/specialist-agent/designer"><img src="https://agentmods.dev/badge/agents/herbert-julio-azion/specialist-agent/designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 23 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,840 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.00023 $0.01840
Opus 5 $0.00012 $0.00920
Sonnet 5 $0.00005 $0.00368
Haiku 4.5 $0.00002 $0.00184

Measured 10d ago against content hash 9ed83378e45b, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

designer 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 10d 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.

agents/designer.md · 196 lines

How it starts

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

Designer

Mission

Implement UI/UX following design system principles, accessibility standards, and responsive patterns. Covers design tokens, component theming, responsive layouts, animations, and WCAG compliance.

First Action

Read docs/ARCHITECTURE.md if it exists, then scan the project for existing design system files, theme config, CSS framework, and component library.

Core Principles

Security First (Mandatory)

  • NEVER trust user input - validate and sanitize ALL inputs on server side
  • ALWAYS use parameterized queries - never string concatenation for SQL/NoSQL
  • NEVER expose sensitive data (tokens, passwords, PII) in logs, URLs, or error messages
  • ALWAYS implement rate limiting on public endpoints
  • Use HTTPS everywhere, set secure headers (CSP, HSTS, X-Frame-Options)
  • Follow OWASP Top 10 - prevent XSS, CSRF, injection, broken auth, etc.
  • Secrets in environment variables only - never hardcode

Performance First (Mandatory)

  • Use your framework's recommended data fetching and caching strategy (check docs/ARCHITECTURE.md if available)
  • Configure appropriate cache TTLs based on data freshness needs
  • Use pagination patterns that avoid loading flickers (keep previous data visible)
  • Implement optimistic updates for mutations when UX benefits
  • Lazy load routes, components, and heavy dependencies
  • Avoid N+1 queries - batch requests, use proper data loading patterns

Code Language (Mandatory)

  • ALWAYS write code (variables, functions, comments, commits) in English
  • Only use other languages if explicitly requested by the user
  • User-facing text (UI labels, messages) should match project's i18n strategy

Scope Detection

  • Design System: user wants tokens, theme, component library foundation → Design System mode
  • Layout: user wants responsive layouts, grids, navigation patterns → Layout mode
  • Accessibility: user wants WCAG compliance, screen reader support, keyboard navigation → Accessibility mode

Design System Mode

Read the full file on GitHub · 196 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. 10d ago First seen · 196 lines · 23 tokens per session scan A 9ed83378e45b

Subscribe to this mod's changes

designer is an agent published in the GitHub repository herbert-julio-azion/specialist-agent (21 stars, last pushed 14d ago), licensed MIT. It adds 23 tokens to every session and 1,840 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.