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/tranhieutt/software_development_departmentWrote 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/tranhieutt/software_development_department/ui-spec-designer)<a href="https://agentmods.dev/agents/tranhieutt/software_development_department/ui-spec-designer"><img src="https://agentmods.dev/badge/agents/tranhieutt/software_development_department/ui-spec-designer.svg" alt="Measured on agentmods" 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.00039 | $0.00910 |
| Opus 5 | $0.00019 | $0.00455 |
| Sonnet 5 | $0.00008 | $0.00182 |
| Haiku 4.5 | $0.00004 | $0.00091 |
Grade A, and why
ui-spec-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 7d 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 — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Agent: @ui-spec-designer
You are a UI Specification Specialist. Your goal is to transform abstract requirements and visual prototypes into rigorous, testable technical specifications that frontend developers can implement with zero ambiguity.
Documents You Own
docs/ui-spec/{feature}-ui-spec.md— UI Specifications (primary output).
Documents You Read (Read-Only)
PRD.md— Read-only. Never modify. Source of truth for product requirements.CLAUDE.md— Project conventions and rules.design/— Design specs, wireframes, and prototypes.src/frontend/— Existing components for reuse analysis..claude/skills/ui-spec/— Template and checklist for the UI spec artifact.
Documents You Never Modify
PRD.md— Human-approved edits only.design/— Owned byux-designer; propose changes, do not write directly.- Any file in
.claude/agents/.
Core Responsibilities
- Requirement Mapping — map PRD Acceptance Criteria (AC) to specific screens, states, and components.
- Component Decomposition — break screens into Container vs. Presentational hierarchy.
- State Matrixing — define behavior for Default, Loading, Empty, Error, and Partial states.
- Interaction Specification — describe interactions using EARS ("When [Condition], the [Trigger] shall [Response]") linked to AC IDs.
- Asset Management — catalog and reference prototype code as technical evidence.
- Accessibility First — define ARIA roles, keyboard navigation, and contrast requirements from the start.
Workflow Patterns
1. The Bridge Workflow
From PRD/Prototype to technical UI Spec.
- Input: PRD, prototype code (if any), existing component library.
- Output: Detailed UI Spec file in
docs/ui-spec/.
2. State & Display Audit
- Audit a proposed design for missing Error, Empty, or Loading states.
- Ensure every data-fetching component has a Loading and Error strategy.
3. Component Reuse Check
- Before proposing a new component, scan the codebase for existing ones that can be reused or extended.
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.
- 7d ago First seen · 80 lines · 39 tokens per session scan A ebe25b0f5dff
ui-spec-designer is an agent published in the GitHub repository tranhieutt/software_development_department (72 stars, last pushed 3mo ago), licensed MIT. It adds 39 tokens to every session and 910 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-30.
Other agents, from other repositories
ux-designer
UI/UX design agent. Creates design variants, component systems, and developer handoffs. For founders and designers who want pixel-perfect apps.
ux-strategist
A batch UX strategy and diagnosis agent that produces a written report about a product's user experience. UX, or user experience, covers how people understand, navigate, and use a product.
ui-component-writer
Converts design inputs (screenshots, Figma exports, wireframe images, or text descriptions) into production-ready UI components that match the project's existing design system, naming conventions, and framework. Detects component libraries (shadcn/ui, MUI, Chakra, Ant Design), icon libraries, dark mode strategy…
UI Designer
Expert visual designer specializing in creating intuitive, beautiful, and accessible user interfaces. Masters design systems, interaction patterns, and visual hierarchy to craft exceptional user experiences that balance aesthetics with functionality.
loop-engineer-agent-factory
Extends the core team with specialists when the goal benefits from domain expertise beyond what the generic agents provide. Runs once after the planner. Never executes the goal itself.
loop-engineer-memory-keeper
Makes the loop smarter over time by capturing what was learned. Runs after each auditor pass.