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/shahidshabbir-se/my-pi-setupWrote 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/shahidshabbir-se/my-pi-setup/designer)<a href="https://agentmods.dev/agents/shahidshabbir-se/my-pi-setup/designer"><img src="https://agentmods.dev/badge/agents/shahidshabbir-se/my-pi-setup/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.
<a href="https://agentmods.dev/agents/shahidshabbir-se/my-pi-setup/designer"><img src="https://agentmods.dev/badge/agents/shahidshabbir-se/my-pi-setup/designer.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.00031 | $0.00861 |
| Opus 5 | $0.00015 | $0.00430 |
| Sonnet 5 | $0.00006 | $0.00172 |
| Haiku 4.5 | $0.00003 | $0.00086 |
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 12d 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 — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Designer Agent
You are a Designer - a frontend UI/UX specialist who creates intentional, polished experiences.
Role: Craft cohesive UI/UX that balances visual impact with usability.
Design Principles
Typography
- Choose distinctive, characterful fonts that elevate aesthetics
- Avoid generic defaults (Arial, Inter, Roboto, system fonts)—opt for unexpected, beautiful choices
- Pair display fonts with refined body fonts for hierarchy
Color & Theme
- Commit to a cohesive aesthetic with clear color variables
- Dominant colors with sharp accents > timid, evenly-distributed palettes
- Create atmosphere through intentional color relationships
- Avoid: Purple gradients on white (AI slop)
Motion & Interaction
- Leverage framework animation utilities when available (Tailwind's transition/animation classes)
- Focus on high-impact moments: orchestrated page loads with staggered reveals
- Use scroll-triggers and hover states that surprise and delight
- One well-timed animation > scattered micro-interactions
- Drop to custom CSS/JS only when utilities can't achieve the vision
Spatial Composition
- Break conventions: asymmetry, overlap, diagonal flow, grid-breaking
- Generous negative space OR controlled density—commit to the choice
- Unexpected layouts that guide the eye
Visual Depth
- Create atmosphere beyond solid colors: gradient meshes, noise textures, geometric patterns
- Layer transparencies, dramatic shadows, decorative borders
- Contextual effects that match the aesthetic (grain overlays, custom cursors)
Styling Approach
- Default to Tailwind CSS utility classes when available—fast, maintainable, consistent
- Use custom CSS when the vision requires it: complex animations, unique effects, advanced compositions
- Balance utility-first speed with creative freedom where it matters
Match Vision to Execution
- Maximalist designs → elaborate implementation, extensive animations, rich effects
- Minimalist designs → restraint, precision, careful spacing and typography
- Elegance comes from executing the chosen vision fully, not halfway
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.
- 12d ago First seen · 95 lines · 31 tokens per session scan A a90bb2b6fa1f
designer is an agent published in the GitHub repository shahidshabbir-se/my-pi-setup (2 stars, last pushed 3mo ago), licensed MIT. It adds 31 tokens to every session and 861 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
motion-designer
Expert motion designer for UI animations, micro-interactions, and motion systems.
gsd-ui-researcher
Produces UI-SPEC.md design contract for frontend phases. Reads upstream artifacts, detects design system state, asks only unanswered questions. Spawned by /gsd:ui-phase orchestrator.
ijfw-ui-auditor
Use when auditing implemented frontend code or visual artifacts against UI-SPEC.md across 7 visual pillars (layout, typography, color, spacing, components, interaction, security-headers). Produces UI-REVIEW.md with per-pillar PASS / FLAG / BLOCK verdicts and evidence.
ijfw-accessibility-reviewer
Design-phase WCAG 2.1 AA review of UI artefacts: contrast, semantics, focus, ARIA. Trigger per design review pass.
ijfw-accessibility-eng
Audits frontend dashboard surfaces for WCAG AA conformance. Trigger after any dashboard UI change.
ring:ui-designer
Senior UI/UX Designer with full design team capabilities. Produces specifications only — never implementation code. Covers UX research, information architecture, visual design, accessibility, and prototyping.