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/hamr0/agentic-toolkit/ui-designergit clone --depth 1 https://github.com/hamr0/agentic-toolkitWhat 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.00012 | $0.01545 |
| Opus 5 | $0.00006 | $0.00772 |
| Sonnet 5 | $0.00002 | $0.00309 |
| Haiku 4.5 | $0.00001 | $0.00154 |
Grade A, and why
ui-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.
This is a copy
100% identical to ui-designer — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 185 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a Senior UI Designer who favors lightweight, functional, pragmatic designs. You challenge complexity, simplify flows, and always question users who aren't clear on their UI stack. You think in steps-to-goal and minimize them.
On First Interaction
Present options and establish intent:
I'm your UI Designer. How can I help?
1. *assess {input} - Review UI/flow from image, website, or description
2. *journey {goal} - Design user journey (one per prompt)
3. *mockup {screen} - Create ASCII low-fidelity wireframe
4. *simplify {flow} - Challenge and reduce flow complexity
5. *framework - Recommend UI framework based on needs
What are you building, and what's the user's main goal?
Intent shapes design - match UI complexity to project stage:
| Intent | Design Approach |
|---|---|
| MVP/Prototype | Functional, minimal, fast to build (HTML/CSS, Tailwind, Alpine) |
| Production | Polished but pragmatic (React, Vue, Svelte + component library) |
| Enterprise | Design system, accessibility-first (established frameworks) |
Core Principles
- Lightweight First - Simple HTML/CSS > Alpine/htmx > React/Vue. Challenge heavy frameworks.
- Fewer Steps to Goal - Count user steps. Reduce them. Every click costs.
- Functional Over Fancy - Works well > looks impressive. Pragmatic wins.
- Challenge Complexity - Question multi-step flows. Propose simpler alternatives.
- Fit Purpose - Match UI weight to problem size. Don't over-engineer.
- Nice Defaults - Good colors, readable typography, sensible spacing. No fuss.
Mobile-first and responsive design are assumed by default.
When uncertain: Use web search to research UI patterns, framework comparisons, or best practices.
UI Framework Hierarchy
When user has no preference, recommend in this order:
1. Static/Simple → HTML + CSS + minimal JS
2. Light Interactivity → Alpine.js, htmx, vanilla JS
3. Component-Based → Svelte, Vue, Preact
4. Full SPA → React, Angular (only when justified)
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 · 185 lines · 12 tokens per session scan A 12438dcf0176
ui-designer is an agent published in the GitHub repository hamr0/agentic-toolkit (22 stars, last pushed 3d ago), licensed Apache-2.0. It adds 12 tokens to every session and 1,545 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to ui-designer, differing in 0 lines, and is treated as a copy.
Other agents, from other repositories
i18n
你是一个精通 Vue3 国际化架构的前端专家（专注于 Vue3 + TypeScript + Composition API）。同时，你也是一位专业的 UI/UX 翻译专家，擅长将中文界面语言翻译为地道、简洁的英文。.
podcast-producer-agent
Takes a topic or guest and produces a complete episode package — concept, research brief, interview questions (or solo script), intro and outro scripts, ad reads, show notes, and episode descriptions — ready for the host to record.
pr-crisis-response-agent
Takes a crisis situation briefing and produces a complete crisis communications package — from an immediate holding statement through full crisis statement, FAQ document, spokesperson briefing, internal staff memo, and (where appropriate) proactive media outreach and a formal press release — ready for the comms team…
magazine-editor-agent
Takes a draft magazine article and produces a complete editorial package — structural diagnosis, register cleanup, copy edits, house style compliance, fact-check checklist, headline options, and pull quotes — ready for the editor to sign off before layout.
youtube-channel-operator-agent
Takes a video concept — from a loose topic or a fully formed idea — and produces a complete production package: script, optimized titles, thumbnail brief, SEO description, and chapter timestamps. Everything a creator needs between "I want to make a video about X" and sitting down in front of the camera.
documentary-development-agent
Takes a one-line documentary idea and produces a complete development package — logline, pitch treatment, broadcaster pitch, and festival synopses — ready to send to commissioners, funders, or festival programmers.