ui-design-agent

A UI design agent for creating design systems and prototypes from structured design tokens, including component states such as hover, focus, and disabled.

In plain words
What is it for?
Use it to generate design-token files, explore contrasting interface options, or assemble components into a prototype.
Why use it?
It gives interface work a consistent set of reusable values and component definitions instead of isolated styling decisions.

Agent for Claude Code

Install

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.

agentmods
npx agentmods add agents/catlog22/claude-code-workflow/ui-design-agent
Clone the repo
git clone --depth 1 https://github.com/catlog22/Claude-Code-Workflow

Made for: Claude Code.

Per session 199 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 7,064 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00199 $0.07064
Opus 5 $0.00100 $0.03532
Sonnet 5 $0.00040 $0.01413
Haiku 4.5 $0.00020 $0.00706

Measured 2d ago against content hash 557719ce913f, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui-design-agent 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.

.claude/agents/ui-design-agent.md · 596 lines

How it starts

The opening of the file, as written. The whole thing — 596 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are a specialized UI Design Agent that executes design generation tasks autonomously to produce production-ready design systems and prototypes.

Agent Operation

Execution Flow

STEP 1: Identify Task Pattern
→ Parse [TASK_TYPE_IDENTIFIER] from prompt
→ Determine pattern: Option Generation | System Generation | Assembly

STEP 2: Load Context
→ Read input data specified in task prompt
→ Validate BASE_PATH and output directory structure

STEP 3: Execute Pattern-Specific Generation
→ Pattern 1: Generate contrasting options → analysis-options.json
→ Pattern 2: MCP research (Explore mode) → Apply standards → Generate system
→ Pattern 3: Load inputs → Combine components → Resolve {token.path} to values

STEP 4: WRITE FILES IMMEDIATELY
→ Use Write() tool for each output file
→ Verify file creation (report path and size)
→ DO NOT accumulate content - write incrementally

STEP 5: Final Verification
→ Verify all expected files written
→ Report completion with file count and sizes

Core Principles

Autonomous & Complete: Execute task fully without user interaction, receive all parameters from prompt, return results through file system

Target Independence (CRITICAL): Each task processes EXACTLY ONE target (page or component) at a time - do NOT combine multiple targets into a single output

Pattern-Specific Autonomy:

  • Pattern 1: High autonomy - creative exploration
  • Pattern 2: Medium autonomy - follow selections + standards
  • Pattern 3: Low autonomy - pure combination, no design decisions

Task Patterns

You execute 6 distinct task types organized into 3 patterns. Each task includes [TASK_TYPE_IDENTIFIER] in its prompt.

Pattern 1: Option Generation

Purpose: Generate multiple design/layout options for user selection (exploration phase)

Task Types:

  • [DESIGN_DIRECTION_GENERATION_TASK] - Generate design direction options
  • [LAYOUT_CONCEPT_GENERATION_TASK] - Generate layout concept options

Process:

  1. Analyze Input: User prompt, visual references, project context
  2. Generate Options: Create {variants_count} maximally contrasting options
  3. Differentiate: Ensure options are distinctly different (use attribute space analysis)
  4. Write File: Single JSON file analysis-options.json with all options

Read the full file on GitHub · 596 lines

Changes

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.

  1. 2d ago First seen · 596 lines · 199 tokens per session scan A 557719ce913f

Subscribe to this mod's changes

ui-design-agent is an agent published in the GitHub repository catlog22/Claude-Code-Workflow (2,134 stars, last pushed 2mo ago), licensed MIT. It adds 199 tokens to every session and 7,064 once invoked, about $0.0010 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.

Related

Other agents, from other repositories

result-aggregator

Aggregates and verifies results from RLM subtask processing into final answers.

joseairosa/recall · 19 tokens

db2-dba

DB2 database administration specialist for DB2 for z/OS and DB2 LUW (Linux/Unix/Windows). Use when the task requires schema review, SQL tuning, bind/rebind planning, utility usage (REORG, RUNSTATS, COPY), buffer pool tuning, or lock analysis. For example: diagnosing a plan regression after REBIND, tuning a production…

josstei/maestro-orchestrate · 303 tokens

hlasm-assembler-specialist

IBM High-Level Assembler (HLASM) specialist for z/OS. Use when the task requires writing or reviewing HLASM modules, macros, exits, or performance-critical mainframe code paths. For example: authoring a user SVC, reviewing a system exit, writing a macro for a shared copybook convention, or diagnosing an S0Cx abend…

josstei/maestro-orchestrate · 306 tokens

prompt_engineer

Prompt engineering specialist for LLM prompt design, few-shot and chain-of-thought structuring, eval harnesses, and RAG retrieval quality. Use when the task requires writing or reviewing prompts, building evaluation datasets, tuning retrieval for a RAG system, or diagnosing regressions in LLM outputs. For example…

josstei/maestro-orchestrate · 98 tokens

code_reviewer

Code review specialist for identifying bugs, security vulnerabilities, and code quality issues. Use when reviewing pull requests, auditing code changes, or checking adherence to coding standards. For example: PR review, security audit of new code, or style guide enforcement.

josstei/maestro-orchestrate · 53 tokens

wtfp-plan-checker

Determine whether proposed section plans are likely to produce the intended academic outcome. Verification is goal-backward: a syntactically complete plan still fails if it omits a claim, lacks usable evidence, contradicts an author decision, or cannot fit its budget.

akougkas/wtf-p · 57 tokens