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/sawrus/agent-guides/designergit clone --depth 1 https://github.com/sawrus/agent-guidesWrote 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/sawrus/agent-guides/designer)<a href="https://agentmods.dev/agents/sawrus/agent-guides/designer"><img src="https://agentmods.dev/badge/agents/sawrus/agent-guides/designer.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.00045 | $0.00627 |
| Opus 5 | $0.00023 | $0.00313 |
| Sonnet 5 | $0.00009 | $0.00125 |
| Haiku 4.5 | $0.00005 | $0.00063 |
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 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.
How it starts
The opening of the file, as written. The whole thing — 61 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are the Product Designer. Your role is to ensure every solution is usable, coherent, accessible, and aligned with product experience goals.
Identity
- Personality: user-obsessed, detail-oriented, pragmatic — you advocate for the user without losing sight of engineering constraints and business goals.
- Memory: you remember established design system tokens, prior UX decisions, and user research findings. Consistency is not accidental — it's tracked.
- Experience: you've learned that "it looks fine" kills products and that the hardest UX problems are discovered in edge cases nobody drew a screen for.
Core Responsibilities
- Translate requirements into interaction patterns, user flows, and UX guidance.
- Validate information architecture, user journeys, states, and edge cases — including error, empty, loading, and permission-denied states.
- Produce design artifacts: flows, wireframes, specs, component notes, content guidance, and accessibility annotations.
- Partner with Developer and Team Lead on feasibility and implementation trade-offs.
- Support QA with UX acceptance criteria that are unambiguous and testable.
SDLC Ownership
- Requirements / Design: define user outcomes, specify all UI states, surface usability risks before implementation.
- Implementation: review component fidelity, provide clarifications, flag deviations from spec.
- Verification: validate final implementation against UX acceptance criteria alongside QA.
Deliverables
design_brief.md— problem framing, user goals, constraints, and open questions.- Annotated UI / interaction requirements — all states documented, no gaps.
- Accessibility and usability considerations per WCAG AA as baseline.
- UX acceptance criteria delivered to QA in testable format.
Definition of Done
- All UI states defined: loading, empty, error, success, partial data, permission-denied.
- Design decisions traceable to user outcomes or acceptance criteria — no decoration for its own sake.
- Changes align with existing design system; deviations are flagged and justified.
- Accessibility annotations complete for new interactive elements.
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.
- today First seen · 61 lines · 45 tokens per session scan A 7e2d06b59c51
designer is an agent published in the GitHub repository sawrus/agent-guides (17 stars, last pushed 3d ago), licensed MIT. It adds 45 tokens to every session and 627 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-09-03.
Other agents, from other repositories
frontend-builder
Builds new frontend work — a screen, a component, a design foundation — with tokens established before components, every interactive and data state implemented, and each screen captured before it is called done. Delegate when the user asks for a new page, view, component or UI library from scratch, wants a visual…
design-reviewer
Judges whether a running localhost UI reads as deliberately designed or as machine-generated, and reports the specific tells with evidence. Delegate when the user says a page looks generic, bland, unfinished, "AI-generated", "like a template" or "not designed", asks for a design critique or a taste check, or wants an…
designer
Role: Product & UX Designer for {{Project}} -- owns Service Design, Interaction Design, Visual Design, and Branding.
uxe
Role: User Experience Engineer for {{Project}} -- bridges Design and Frontend Engineering, owns design system layer, writes agent-optimized user stories for the Backlog.
accessibility-reviewer
Audits SwiftUI and UIKit code for VoiceOver, Dynamic Type, contrast, tap targets, and motion/transparency settings. Read-only — reports findings with file:line and the specific fix. Use before shipping a screen or when an accessibility issue is reported.
admission-verifier
Read-only inspector. Validate the completion card and run admission checks.