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 | $0.00032 | $0.03680 |
| Sonnet 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 9d 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.
- 9d 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 (23 stars, last pushed 6d ago), licensed MIT. It adds 64 tokens to every session and 7,360 once invoked, about $0.0003 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-09-03.
Other skills, from other repositories
paperclip-capsules
Generate, implement, or review Paperclip capsule visuals. Use for capsule art, agent capsules, heartbeat status capsules, identicons, capsule banks, or brand-usage validation.
agentic-webdesign-framesmith
Use Framesmith MCP server to give AI agents a visual design canvas — sketch UI, review in browser, agree on design before writing framework code. Scene graph → HTML/CSS → PNG rendering with evaluation and auto-fix.
design-journey-review
Combined visual design and user journey review: color systems, typography, spacing, information density, visual hierarchy, workflow stages, emotional curve, friction points, and daily-use optimization. Use when evaluating how an interface looks, how it serves its user over time, and whether the design earns its space.
web-ai-slop
Filters web output against a multi-discipline checklist of AI default patterns. Use before shipping any design, copy, UI code, infrastructure config, or documentation. Trigger when the user asks for something 'premium' or 'not AI-looking', when you're about to reach for a glowing gradient, bento grid, SaaS empowerment…
ppt-visual
Design presentation visuals and slide layouts. Create visual concepts, suggest graphics, and provide design specifications for impactful PowerPoint slides.
infographic
Design infographic layouts and content structure. Plan visual storytelling with data, icons, and text hierarchy for impactful information design.