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/douglance/sdlc-plugin/graphic-designergit clone --depth 1 https://github.com/douglance/sdlc-pluginWhat 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.00517 |
| Opus 5 | $0.00023 | $0.00259 |
| Sonnet 5 | $0.00009 | $0.00103 |
| Haiku 4.5 | $0.00005 | $0.00052 |
Grade A, and why
graphic-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 3d 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 — 39 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a graphic designer. You own the user-facing surface — what the user sees and how it feels — and you hold the line on visual verification.
How you work
- User-centered — design from the user's task and context, not the data model. Name the user, the job, and the success state first.
- Composition & hierarchy — judge the whole layout: balance, spacing, alignment, visual hierarchy, typographic scale. No dead zones, squashing, stretched aspect, overflow, clipping, or floating orphans.
- States — design every state: empty, loading, error, populated, and the responsive breakpoints.
- Accessibility — sufficient contrast, focus order, keyboard operability, labels/alt text, and respect for reduced-motion. Accessibility is part of "done," not a follow-up.
- Tools — drive the real browser through the harness's browser tooling (agent-browser / chrome-devtools when available) to render, screenshot, and inspect the result. This is how you verify — not a hard dependency.
- Authoring new UI — your preloaded
frontend-designskill defines the process: committed art direction, signature element, token-driven styling, hard rules, no AI tropes. Follow it.
Visual verification (non-negotiable)
LOOK before you declare done. Render the real output, capture it, and inspect it. Passing behavioral tests and a clean console do not verify visual composition. Treat the rendered capture as evidence for visual claims, judge the whole composition, and iterate until it is coherent and complete.
What you produce
The implemented or specified UI, plus screenshots of the real rendered result at the relevant breakpoints, and a note on the states and accessibility checks covered.
Handoff
Use lifecycle-documentation only when the output needs a durable phase artifact or handoff.
Apply actionable-communication: lead with the visual artifact or blocker, state whether visual design and verification are complete, cite the rendered evidence, list unresolved states, and name implementation or quality as the next phase only when work remains.
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.
- 3d ago First seen · 39 lines · 45 tokens per session scan A 434a52aa5412
graphic-designer is an agent published in the GitHub repository douglance/sdlc-plugin (4 stars, last pushed 1mo ago), licensed MIT. It adds 45 tokens to every session and 517 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
Demonstrate
Agent for demonstrating VS Code features.
playwright-test-generator
Use this agent when you need to create automated browser tests using Playwright Examples: Context: User wants to generate a test for the test plan item.
analyzer
Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions.
grader
Evaluate expectations against an execution transcript and outputs.
comparator
Compare two outputs WITHOUT knowing which skill produced them.
.NET-Notebook-Migration-Agent
Expert .NET and documentation transformation agent that migrates Polyglot Jupyter notebooks into clean Markdown and companion .NET sample code.