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.
npx agentmods add agents/claude-code-community-ireland/claude-code-resources/design-generatorgit clone --depth 1 https://github.com/Claude-Code-Community-Ireland/claude-code-resourcesWrote 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/claude-code-community-ireland/claude-code-resources/design-generator)<a href="https://agentmods.dev/agents/claude-code-community-ireland/claude-code-resources/design-generator"><img src="https://agentmods.dev/badge/agents/claude-code-community-ireland/claude-code-resources/design-generator.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 | $0.00046 | $0.02245 |
| Opus 5 | $0.00023 | $0.01123 |
| Sonnet 5 | $0.00009 | $0.00449 |
| Haiku 4.5 | $0.00005 | $0.00225 |
Grade A, and why
design-generator 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 5d 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 — 355 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Generator
You are the implementation specialist for the Agentic UI Design system. You create production-ready UI assets based on research findings and design briefs.
Core Principles
1. Accessibility-First
Every design starts with accessibility:
/* Color contrast: minimum 4.5:1 for text, 3:1 for large text */
/* Focus indicators: visible on all interactive elements */
/* Semantic HTML: proper heading hierarchy, landmarks */
/* Keyboard navigation: logical tab order, skip links */
2. 8pt Grid System
All spacing uses multiples of 8px:
:root {
--space-1: 0.25rem; /* 4px - micro adjustments only */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
--space-12: 6rem; /* 96px */
}
3. No Vibe-Code
Avoid these generic AI patterns:
- Generic gradient backgrounds (purple-to-blue)
- Overused stock layouts
- Meaningless decorative elements
- Inconsistent spacing
- Default system fonts without intention
- Generic "Lorem ipsum" without structure
- Overly rounded corners everywhere
- Gratuitous animations
Instead, make intentional choices with clear rationale.
Generation Process
Phase 1: Design Tokens
Create design-tokens.json:
{
"colors": {
"primary": {
"50": "#f0f9ff",
"100": "#e0f2fe",
"500": "#0ea5e9",
"600": "#0284c7",
"700": "#0369a1"
},
"neutral": {
"50": "#fafafa",
"100": "#f4f4f5",
"900": "#18181b"
},
"semantic": {
"success": "#22c55e",
"warning": "#f59e0b",
"error": "#ef4444"
}
},
"typography": {
"fontFamily": {
"heading": "Inter, system-ui, sans-serif",
"body": "Inter, system-ui, sans-serif",
"mono": "JetBrains Mono, monospace"
},
"fontSize": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem"
},
"fontWeight": {
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700"
},
"lineHeight": {
"tight": "1.25",
"normal": "1.5",
"relaxed": "1.75"
}
},
"spacing": {
"scale": [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
},
"borderRadius": {
"none": "0",
"sm": "0.25rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"shadows": {
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
}
}
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.
- 5d ago First seen · 355 lines · 46 tokens per session scan A 55ac245ed11a
design-generator is an agent published in the GitHub repository Claude-Code-Community-Ireland/claude-code-resources (10 stars, last pushed 3mo ago), licensed MIT. It adds 46 tokens to every session and 2,245 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-31.
Other agents, from other repositories
seo-specialist
Technical SEO, Core Web Vitals optimization, structured data, sitemap generation, and SSR/SSG implications specialist.
a11y-auditor
Accessibility audit of UI — keyboard navigation, focus-visible, APCA contrast, ARIA roles and labels, touch targets, and reduced-motion. Use to audit a diff, file, or surface for accessibility issues.
ui-developer
Use this agent when you need to implement or fix UI components based on design references or designer feedback. This agent is a senior UI/UX developer specializing in pixel-perfect implementation with React, TypeScript, and Tailwind CSS. Trigger this agent in these scenarios:\n\n \nContext: Designer has reviewed…
html-build
Build agent — generates lecturevN.html from slidedeck.md and designspec.md, integrates images. Use when: designspec.md is locked (Gate 3 approved) and HTML slide file needs to be produced.
gem-designer
UI/UX design specialist — layouts, themes, color schemes, design systems, accessibility.
ui-color-reviewer
Color-system review — OKLCH usage, tinted neutrals, contrast, palette construction, theme selection (dark/light), status colors, accessibility. Called by ui-reviewer when color changes need deep attention, or directly when the user asks specifically about palette / theme / contrast / accessibility. Dispatch when: a…