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 skills add j4flmao/agent-skills --skill visual-designgit clone --depth 1 https://github.com/j4flmao/agent-skillsWrote 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/skills/j4flmao/agent-skills/visual-design)<a href="https://agentmods.dev/skills/j4flmao/agent-skills/visual-design"><img src="https://agentmods.dev/badge/skills/j4flmao/agent-skills/visual-design/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/skills/j4flmao/agent-skills/visual-design"><img src="https://agentmods.dev/badge/skills/j4flmao/agent-skills/visual-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00064 | $0.07360 |
| Opus 5.5 | $0.00026 | $0.02944 |
| Sonnet 5.5 | $0.00013 | $0.01472 |
| Haiku 4.5 | $0.00006 | $0.00736 |
Grade A, and why
design-visual-design 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.
How it starts
The opening of the file, as written. The whole thing — 597 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Design
Purpose
Apply visual design principles — color theory, typography, layout grids, spacing systems, visual hierarchy, and aesthetic consistency — to create interfaces that are both beautiful and functional. Visual design serves usability: every decision about color, type, spacing, or layout should support clarity, readability, and user goals.
Agent Protocol
Trigger
Exact user phrases: "visual design", "color theory", "typography", "layout", "visual hierarchy", "spacing", "proportion", "UI aesthetics", "make it look better", "design polish", "visual polish".
Input Context
- Product type (dashboard, marketing site, mobile app, data-heavy tool)
- Existing brand assets or design system tokens
- Target user demographics (age, accessibility needs, cultural context)
- Platform constraints (responsive breakpoints, screen sizes, rendering engine)
- Brand personality (professional, playful, luxurious, minimalist)
Output Artifact
Visual design specification with color system, typography scale, spacing grid, layout principles, and accessibility requirements.
Completion Criteria
- Color palette defined with primary, secondary, neutral, semantic colors
- All color combinations meet WCAG AA contrast ratios (4.5:1 text)
- Typography scale established (typeface, size, weight, line-height, letter-spacing)
- Spacing system defined (4px or 8px base unit with consistent scale)
- Layout grid specified (columns, gutters, margins, breakpoints)
- Visual hierarchy defined (size, color, position, whitespace strategy)
- Accessibility requirements documented (focus indicators, reduced motion, text spacing)
Max Response Length
200 lines of spec, patterns, and configuration.
Framework/Methodology
Visual Design Decision Tree
What is the primary design goal?
├── Clarity and readability → Typography-first approach
│ Select readable typeface, generous line-height, strong hierarchy
├── Brand expression and emotion → Color-first approach
│ Start with brand palette, extend to UI semantic colors
├── Data density and precision → Layout-first approach
│ Establish grid system, information density rules, spacing constraints
└── Engagement and delight → Motion + visual hierarchy
Leading lines, focal points, depth through shadow/layering
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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 · 597 lines · 64 tokens per session scan A 92c426a96ded
design-visual-design is a skill published in the GitHub repository j4flmao/agent-skills (38 stars, last pushed 3d ago), licensed MIT. It adds 64 tokens to every session and 7,360 once invoked, about $0.0003 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-09-03.
design-visual-design compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| design-visual-designj4flmao/agent-skills | Skill | 38 | 3d ago | MIT | A | 64 | Claude Code, Codex |
| paperclip-capsulespaperclipai/paperclip | Skill | 112k | today | MIT | A | 41 | Claude Code, Codex |
| julilaoshi-designjulilaoshi/julilaoshi-design | Skill | 122 | 1mo ago | MIT | A | 52 | Codex |
| design-journey-reviewNickCrew/Claude-Cortex | Skill | 66 | 4mo ago | MIT | A | 65 | Claude Code, Codex |
| agentic-webdesign-framesmithS3YED/appie-kit | Skill | 14 | 2mo ago | MIT | A | 53 | Claude Code, Codex |
| infographicclaude-office-skills/skills | Skill | 567 | 9mo ago | MIT | A | 26 | Claude Code, Codex |
| ppt-visualclaude-office-skills/skills | Skill | 567 | 9mo ago | MIT | A | 28 | Claude Code, Codex |