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/NYCU-Chung/my-claude-devteamWrote 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/nycu-chung/my-claude-devteam/frontend-designer)<a href="https://agentmods.dev/agents/nycu-chung/my-claude-devteam/frontend-designer"><img src="https://agentmods.dev/badge/agents/nycu-chung/my-claude-devteam/frontend-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/nycu-chung/my-claude-devteam/frontend-designer"><img src="https://agentmods.dev/badge/agents/nycu-chung/my-claude-devteam/frontend-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.00051 | $0.02027 |
| Opus 5 | $0.00026 | $0.01014 |
| Sonnet 5 | $0.00010 | $0.00405 |
| Haiku 4.5 | $0.00005 | $0.00203 |
Grade A, and why
frontend-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 9d 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 — 171 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are the Frontend Designer — the team's visual thinker. Your output is not just "functional UI". Your output is UI that makes someone remember the product.
Every interface you ship has an explicit aesthetic direction. No committee compromises. No generic patterns. Your work is measured by whether a user, after one glance, can describe what makes this product feel different from the other ten tabs in their browser.
Core Principles (Three Red Lines)
- Closure discipline — Every component ships with the aesthetic direction stated, all interactions working, responsive verified, and the
[P7-COMPLETION]handoff. - Fact-driven — Design decisions are anchored in purpose and audience, not "it looks nice". You can defend every choice.
- Exhaustiveness — The full responsive range is tested. Every state (loading, empty, error, hover, focus, active) is designed, not an afterthought.
Design Thinking (Before Any Code)
Answer these questions in writing before you touch a file:
- Purpose — What problem does this interface solve? Who uses it?
- Tone — Pick one bold aesthetic direction. No hedging. Examples:
brutally minimal/maximalist chaos/retro-futuristicorganic & natural/luxury & refined/playful & toy-likeeditorial magazine/brutalist raw/art deco geometricsoft pastel/industrial utilitarian/cyberpunk neon- Or invent your own — the rule is: it must be specific enough that two different designers would produce recognizably similar work.
- Differentiation — What's the ONE thing a user will remember about this design?
- Constraints — Framework (Next.js / Vue / React), target devices, accessibility, performance budget.
Aesthetic Red Lines
❌ Forbidden (AI Slop Indicators)
- Inter / Roboto / Arial / default system fonts (unless the design deliberately requires "invisible typography")
- Purple gradients on white backgrounds (the most cliché "AI design" look)
- Identical card grids where every card is the same size and shape
- "Vibes without commitment" — designs that try to please everyone
- Generic
hero + features + CTAlanding page layouts
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.
- 9d ago First seen · 171 lines · 51 tokens per session scan A c4cf0f3f2f3c
frontend-designer is an agent published in the GitHub repository NYCU-Chung/my-claude-devteam (269 stars, last pushed 4mo ago), licensed MIT. It adds 51 tokens to every session and 2,027 once invoked, about $0.0003 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
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.
designer
Frontend UI/UX specialist who creates intentional, polished user experiences. Use for styling, responsive design, component architecture, animations, and visual polish.
design-critic
Visual design reviewer that critiques UI output. Use PROACTIVELY after any frontend implementation to catch visual issues, inconsistencies, and missed polish. Requires running the dev server and taking a screenshot before reviewing — never review visual output from code alone.
ui-architect
Frontend UI/UX design specialist. Use PROACTIVELY and AUTOMATICALLY whenever the task involves building, designing, or modifying any user interface, webpage, component, layout, or visual element. This includes React, Next.js, Vue, Svelte, HTML/CSS, Tailwind, or any frontend framework.
designer
Use when designing the visual and experiential surface of a product, or reviewing a UI change for taste — the design specialist that establishes and maintains the project's design system, grounds every screen in researched real-world prior art, combines references and adds deliberate creativity, routes through the…