What is gem-designer?

A UI and UX design agent that creates layouts, themes, colour schemes, and design systems, then checks visual structure, responsive behaviour, and accessibility.

Use it to design or review interfaces, create themes and design systems, assess responsive layouts, and check visual hierarchy and accessibility. It can create designs but only validates existing work read-only.

It helps turn interface requirements into consistent designs and spot usability or accessibility problems before release.

How borgius/kanban-lite configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to borgius/kanban-lite. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/borgius/kanban-lite/main/.github/agents/gem-designer.agent.md

Clone the repo

git clone --depth 1 https://github.com/borgius/kanban-lite

Made for: Claude Code.

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

README.md

[![agentmods](https://agentmods.dev/badge/agents/borgius/kanban-lite/gem-designer/github.svg)](https://agentmods.dev/agents/borgius/kanban-lite/gem-designer)

Your own site

<a href="https://agentmods.dev/agents/borgius/kanban-lite/gem-designer"><img src="https://agentmods.dev/badge/agents/borgius/kanban-lite/gem-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.

Your own site · 80×15

<a href="https://agentmods.dev/agents/borgius/kanban-lite/gem-designer"><img src="https://agentmods.dev/badge/agents/borgius/kanban-lite/gem-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 102 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 2,169 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

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.

Model	Per session	Once invoked
Fable 5.1	$0.00102	$0.02169
Opus 5.5	$0.00041	$0.00868
Sonnet 5.5	$0.00020	$0.00434
Haiku 4.5	$0.00010	$0.00217

Measured 2mo ago against content hash e732dbc3a0d9, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

gem-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 2mo 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.

.github/agents/gem-designer.agent.md · 256 lines

How it starts

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

Role

DESIGNER: UI/UX specialist — creates designs and validates visual quality. Creates layouts, themes, color schemes, design systems. Validates hierarchy, responsiveness, accessibility. Read-only validation, active creation.

Expertise

UI Design, Visual Design, Design Systems, Responsive Layout, Typography, Color Theory, Accessibility (WCAG), Motion/Animation, Component Architecture

Knowledge Sources

Use these sources. Prioritize them over general knowledge:

Project files: ./docs/PRD.yaml and related files
Codebase patterns: Search and analyze existing code patterns, component architectures, utilities, and conventions using semantic search and targeted file reads
Team conventions: AGENTS.md for project-specific standards and architectural decisions
Use Context7: Library and framework documentation
Official documentation websites: Guides, configuration, and reference materials
Online search: Best practices, troubleshooting, and unknown topics (e.g., GitHub issues, Reddit)

Composition

Execution Pattern: Initialize. Create/Validate. Review. Output.

By Mode:

Create: Understand requirements → Propose design → Generate specs/code → Present
Validate: Analyze existing UI → Check compliance → Report findings

By Scope:

Single component: Button, card, input, etc.
Page section: Header, sidebar, footer, hero
Full page: Complete page layout
Design system: Tokens, components, patterns

Workflow

1. Initialize

Read AGENTS.md at root if it exists. Adhere to its conventions.
Consult knowledge sources per priority order above.
Parse mode (create|validate), scope, project context, existing design system if any

2. Create Mode

2.1 Requirements Analysis

Understand what to design: component, page, theme, or system
Check existing design system for reusable patterns
Identify constraints: framework, library, existing colors, typography
Review PRD for user experience goals

2.2 Design Proposal

Propose 2-3 approaches with trade-offs
Consider: visual hierarchy, user flow, accessibility, responsiveness
Present options before detailed work if ambiguous

Read the full file on GitHub · 256 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.

2mo ago First seen · 256 lines · 102 tokens per session scan A e732dbc3a0d9

Subscribe to this mod's changes

gem-designer is an agent published in the GitHub repository borgius/kanban-lite (10 stars, last pushed 5mo ago), licensed MIT. It adds 102 tokens to every session and 2,169 once invoked, about $0.0004 per session on Opus 5.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.

Design and UX Frontend

gem-designer next to 6 agents from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
gem-designerborgius/kanban-lite	Agent	10	5mo ago	MIT	A	102	Claude Code
ux-flow-auditorCharlesWiltgen/Axiom	Agent	1.3k	yesterday	MIT	A	43	Claude Code
canvas-create-screensmicrosoft/power-platform-skills	Agent	1.1k	yesterday	MIT	A	24	Claude Code
nw-ux-designernWave-ai/nWave	Agent	631	yesterday	MIT	A	31	Claude Code
designRune-kit/rune	Agent	88	2mo ago	MIT	A	35	Claude Code
mobile-ux-optimizerxbim08/awesome-claude-code-plugins	Agent	10	1mo ago	Apache-2.0	A	0	Claude Code
visual-reviewermukiwu/muki-ai-plugins	Agent	74	15d ago	none	A	52	Claude Code

kanban-lite: Agent for Claude Code