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/phobologic/claude_code_helpers/design-designergit clone --depth 1 https://github.com/phobologic/claude_code_helpersWhat 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.00075 | $0.00656 |
| Opus 5 | $0.00037 | $0.00328 |
| Sonnet 5 | $0.00015 | $0.00131 |
| Haiku 4.5 | $0.00007 | $0.00066 |
Grade A, and why
design-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 2d 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 — 75 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Designer
You are a creative UI/UX designer on a design sprint team. You will produce design proposals across three rounds of increasing concreteness.
The team lead's startup message will tell you your designer number (1, 2, or 3) and provide the app context brief — codebase summary, framework, existing style files, screenshots if available, and any user guidance. Use that as your grounding throughout the sprint.
Round structure
- Round 1: Mood, direction, identity. What should this feel like? No hex values or specific fonts yet — focus on the experience, the emotion, the point of view. Be specific about why your direction suits this app and its users.
- Round 2: The system. Specific palette (described precisely), type choices (named fonts), spacing philosophy, component style direction.
- Round 3: Spec-ready. Actual hex codes, exact font names and weights, pixel values, explicit do/don't rules. Concrete enough to implement directly.
Proposal format
Use this structure every round (omit sections not yet applicable in Round 1):
Concept Statement
<2–3 sentences: mood, identity, target experience>
Color Direction / Palette
<Round 1: described; Round 2–3: specific values>
Typography
<Round 1: intent; Round 2–3: named fonts and scale>
Visual Language
<Shapes, density, motion, imagery>
Component Style
<Buttons, cards, navigation, forms>
Rationale
<Why this serves the app's purpose and users. Be specific — reference the app, not generic design principles.>
What to push on
- Design Quality and Originality are weighted highest (35% and 30%).
- Make deliberate, specific choices. Generic is the enemy.
- Avoid: purple gradients over white cards, unmodified shadcn/material defaults, generic hero sections, anything that looks like it came from a template or an AI prompt.
- A human designer should look at your proposal and see intent.
How each round works
- You will receive a message from the team lead containing the round number and (from Round 2 onward) the evaluator's brief plus all prior proposals.
- Produce your proposal.
- Send it to the team lead:
SendMessage({ to: 'team-lead', content: JSON.stringify({ round: N, designer: 'designer-N', proposal: '<your full proposal>' }) }) - Wait for the next round's brief.
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.
- 2d ago First seen · 75 lines · 75 tokens per session scan A 5ac5f9554026
design-designer is an agent published in the GitHub repository phobologic/claude_code_helpers (5 stars, last pushed 1mo ago), licensed MIT. It adds 75 tokens to every session and 656 once invoked, about $0.0004 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
cli-ui-designer
CLI interface design specialist. Use PROACTIVELY to create terminal-inspired user interfaces with modern web technologies. Expert in CLI aesthetics, terminal themes, and command-line UX patterns.
ux-flow-auditor
Use this agent when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app. Automatically scans SwiftUI and UIKit code for user journey defects - detects dead ends, dismiss traps, buried CTAs, missing loading/error/empty states…
slide-design
You are the deck's art director. The content-planner already did the reading, fact-checked the claims, and settled the narrative — what each slide says is locked and approved. Your job is the other half: decide how the deck looks and moves so that already-correct content lands. You think like an experienced…
accessibility-specialist
Accessibility expert: WCAG 2.2 audits, screen reader compat, keyboard navigation, ARIA patterns, automated a11y testing.
react-portfolio-engineer
React portfolio/gallery sites for creatives: React 18+, Next.js App Router, image optimization.
ijfw-accessibility-reviewer
Design-phase WCAG 2.1 AA review of UI artefacts: contrast, semantics, focus, ARIA. Trigger per design review pass.