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 GktuOktay/ai-skills --skill high-end-visual-designgit clone --depth 1 https://github.com/GktuOktay/ai-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/gktuoktay/ai-skills/high-end-visual-design)<a href="https://agentmods.dev/skills/gktuoktay/ai-skills/high-end-visual-design"><img src="https://agentmods.dev/badge/skills/gktuoktay/ai-skills/high-end-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/gktuoktay/ai-skills/high-end-visual-design"><img src="https://agentmods.dev/badge/skills/gktuoktay/ai-skills/high-end-visual-design.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00059 | $0.01255 |
| Opus 5 | $0.00030 | $0.00628 |
| Sonnet 5 | $0.00012 | $0.00251 |
| Haiku 4.5 | $0.00006 | $0.00126 |
Grade A, and why
High-End Visual Design Standards 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 12d 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 — 94 lines — stays where its author put it; the contents beside it link to each section on GitHub.
High-End Visual Design Standards
Overview
This skill focuses on the execution of premium, luxury, and highly polished visual design in user interfaces. High-end design is characterized by meticulous attention to detail, sophisticated typography, subtle animations, and a cohesive aesthetic that feels both modern and timeless.
Core Pillars of High-End Design
1. Attention to Detail & Precision
- Optical Alignment: Elements should be aligned based on their visual weight, not just their mathematical bounding boxes (e.g., hanging punctuation, optically centering play buttons).
- Sub-Pixel Rendering awareness: Ensure borders and dividers are crisp (1px solid lines) and avoid blurry edges on icons.
- Spacing (Whitespace): Generous, deliberate use of negative space. Use mathematical scaling (e.g., 4pt or 8pt grid systems) but break the grid purposefully for emphasis.
2. Premium UI Patterns
Glassmorphism & Translucency
High-end interfaces often use blurred, translucent layers to create depth.
- Use backdrop filters (
backdrop-filter: blur(20px)) combined with semi-transparent background colors (e.g.,rgba(255, 255, 255, 0.05)). - Add subtle, glowing 1px inner borders to glass elements to define their edges against complex backgrounds.
Mesh Gradients & Organic Shapes
Moving away from flat, linear gradients towards fluid, multi-point mesh gradients.
- Keep colors analogous or harmonious.
- Animate gradients extremely slowly to create a "breathing" effect.
3D Elements & Depth
- Soft, multi-layered drop shadows (e.g., combining a large, diffuse shadow with a tight, dark shadow for realism).
- Subtle inner shadows to create engraved or pressed states.
3. Sophisticated Color Palettes
- Dark Themes: Deep, rich blacks (
#0A0A0A,#121212) combined with monochromatic grays. - Accents: Desaturated, elegant accent colors (e.g., champagne gold, muted neon, deep indigo) rather than harsh primary colors.
- Contrast: Ensuring high legibility while maintaining a sleek look. Avoid pure white (
#FFFFFF) on pure black (#000000); use#F5F5F7on#111111.
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.
- 12d ago First seen · 94 lines · 59 tokens per session scan A 22e77e65385a
High-End Visual Design Standards is a skill published in the GitHub repository GktuOktay/ai-skills (2 stars, last pushed 9d ago), licensed MIT. It adds 59 tokens to every session and 1,255 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-08-31.
Other skills, from other repositories
prototype
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
design-everyday-things
Apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", "mental model", "mapping", "seven stages of action", "users keep making…
figma-implement-design
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a…
distinctive-frontend-design
Context-driven aesthetic exploration with anti-cliche validation.
tool-design-sprint-decide-and-storyboard
Day 3 (Wednesday) move of a Design Sprint that runs the art museum layout, heat map, speed critique, straw poll, Decider supervote, rumble-vs-all-in-one decision, and the storyboard that drives Thursday's prototype build. The most decision-heavy day of the sprint. Use Wednesday morning and afternoon after Tuesday's…