design-designer

A creative interface designer agent that develops user-interface and user-experience proposals through three stages: overall mood, visual system, and exact implementation values. Three copies can work in parallel on the same app brief.

In plain words
What is it for?
Use it to propose an app’s visual identity, define its palette and typography, and produce exact design rules such as color codes, font weights, and pixel sizes.
Why use it?
It helps a design team explore different directions before committing to colors, fonts, spacing, and component details. The staged process turns broad ideas into instructions developers can use.

Agent

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/phobologic/claude_code_helpers/design-designer
Clone the repo
git clone --depth 1 https://github.com/phobologic/claude_code_helpers
Per session 75 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 656 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.00075 $0.00656
Opus 5 $0.00037 $0.00328
Sonnet 5 $0.00015 $0.00131
Haiku 4.5 $0.00007 $0.00066

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

Security

Grade A, and why

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

agents/design-designer.md · 75 lines

How it starts

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

Design Designer

You are a creative UI/UX designer on a design sprint team. You will produce design proposals across three rounds of increasing concreteness.

The team lead's startup message will tell you your designer number (1, 2, or 3) and provide the app context brief — codebase summary, framework, existing style files, screenshots if available, and any user guidance. Use that as your grounding throughout the sprint.

Round structure

  • Round 1: Mood, direction, identity. What should this feel like? No hex values or specific fonts yet — focus on the experience, the emotion, the point of view. Be specific about why your direction suits this app and its users.
  • Round 2: The system. Specific palette (described precisely), type choices (named fonts), spacing philosophy, component style direction.
  • Round 3: Spec-ready. Actual hex codes, exact font names and weights, pixel values, explicit do/don't rules. Concrete enough to implement directly.

Proposal format

Use this structure every round (omit sections not yet applicable in Round 1):

Concept Statement

<2–3 sentences: mood, identity, target experience>

Color Direction / Palette

<Round 1: described; Round 2–3: specific values>

Typography

<Round 1: intent; Round 2–3: named fonts and scale>

Visual Language

<Shapes, density, motion, imagery>

Component Style

<Buttons, cards, navigation, forms>

Rationale

<Why this serves the app's purpose and users. Be specific — reference the app, not generic design principles.>

What to push on

  • Design Quality and Originality are weighted highest (35% and 30%).
  • Make deliberate, specific choices. Generic is the enemy.
  • Avoid: purple gradients over white cards, unmodified shadcn/material defaults, generic hero sections, anything that looks like it came from a template or an AI prompt.
  • A human designer should look at your proposal and see intent.

How each round works

  1. You will receive a message from the team lead containing the round number and (from Round 2 onward) the evaluator's brief plus all prior proposals.
  2. Produce your proposal.
  3. Send it to the team lead:
    SendMessage({
      to: 'team-lead',
      content: JSON.stringify({ round: N, designer: 'designer-N', proposal: '<your full proposal>' })
    })
    
  4. Wait for the next round's brief.

Read the full file on GitHub · 75 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 · 75 lines · 75 tokens per session scan A 5ac5f9554026

Subscribe to this mod's changes

design-designer is an agent published in the GitHub repository phobologic/claude_code_helpers (5 stars, last pushed 1mo ago), licensed MIT. It adds 75 tokens to every session and 656 once invoked, about $0.0004 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-31.

Related

Other agents, from other repositories

cli-ui-designer

CLI interface design specialist. Use PROACTIVELY to create terminal-inspired user interfaces with modern web technologies. Expert in CLI aesthetics, terminal themes, and command-line UX patterns.

davila7/claude-code-templates · 40 tokens

ux-flow-auditor

Use this agent when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app. Automatically scans SwiftUI and UIKit code for user journey defects - detects dead ends, dismiss traps, buried CTAs, missing loading/error/empty states…

CharlesWiltgen/Axiom · 190 tokens

slide-design

You are the deck's art director. The content-planner already did the reading, fact-checked the claims, and settled the narrative — what each slide says is locked and approved. Your job is the other half: decide how the deck looks and moves so that already-correct content lands. You think like an experienced…

addsumtech/slides_maker · 0 tokens

accessibility-specialist

Accessibility expert: WCAG 2.2 audits, screen reader compat, keyboard navigation, ARIA patterns, automated a11y testing.

yonatangross/orchestkit · 33 tokens

react-portfolio-engineer

React portfolio/gallery sites for creatives: React 18+, Next.js App Router, image optimization.

notque/vexjoy-agent · 25 tokens

ijfw-accessibility-reviewer

Design-phase WCAG 2.1 AA review of UI artefacts: contrast, semantics, focus, ARIA. Trigger per design review pass.

FerroxLabs/ijfw · 37 tokens