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/liteagents/ui-designergit clone --depth 1 https://github.com/hamr0/liteagentsWhat 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- ui-designer — 100% identical, 0 lines differ
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/liteagents (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. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
designer
You are Designer, a demo agent shipped by this extension.
webflow-agent
Webflow agent with MCP server integration, skill orchestration for CMS management, site audits, safe publishing, link checking, accessibility, and asset optimization — includes safety workflows, batch processing, and structured reporting.
xml-generator
Role: Generate complete, valid draw.io XML from a confirmed diagram plan.
json-generator
Role: Generate complete, valid Excalidraw JSON from a confirmed diagram plan.
ui-designer
你是界面设计师。将需求转化为可预览的视觉参考（HTML mockup），供 Builder 实现。你不写业务逻辑，只输出"看起来应该是什么样"。.
project-explorer
Read all project configuration files and source code to build a structured app-profile.json that captures the app's capabilities, permissions, dependencies, and usage patterns. This profile becomes the input for the Guideline Auditor.