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 SnowBeatRain/skills --skill design-ui-gallerygit clone --depth 1 https://github.com/SnowBeatRain/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/snowbeatrain/skills/design-ui-gallery)<a href="https://agentmods.dev/skills/snowbeatrain/skills/design-ui-gallery"><img src="https://agentmods.dev/badge/skills/snowbeatrain/skills/design-ui-gallery/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/snowbeatrain/skills/design-ui-gallery"><img src="https://agentmods.dev/badge/skills/snowbeatrain/skills/design-ui-gallery.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.00132 | $0.00851 |
| Opus 5.5 | $0.00053 | $0.00340 |
| Sonnet 5.5 | $0.00026 | $0.00170 |
| Haiku 4.5 | $0.00013 | $0.00085 |
Grade A, and why
design-ui-gallery 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 13d 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.
What it actually says
Design UI Gallery Skill
意图
帮助 Agent 快速定位视觉风格方向。当用户说"参考 XX 风格"或"给我几个风格方向"时，提供风格特征描述、适用场景和关键实现要素。
本 skill 负责视觉风格选型。设计系统基础（配色、字体、间距）用 design-system；具体组件实现用目标框架 skill。
触发场景
- 用户要求某种视觉风格（毛玻璃、粗野主义、极简等）。
- 需要探索多个风格方向做选择。
- 需要了解某种风格的关键实现要素。
- 落地页、后台、移动端 App 的整体视觉方向选择。
工作流
1. 确认需求
从现有项目和用户参考推断；信息足够时直接给方向，不把风格选型变成固定问卷。保留已认可的品牌、黑白灰偏好、密度与可访问性要求。
- 项目类型：落地页 / 后台 / 移动端 / 展示站。
- 品牌调性：专业 / 友好 / 科技 / 文艺 / 大胆。
- 目标用户群体。
- 参考风格关键词。
2. 风格探索
读取 references/style-catalog.md，找到匹配的风格方向。
每种风格包含：
- 特征描述
- 关键要素（色彩、形状、动效）
- 适用场景
- 代表案例
- Tailwind / CSS 关键属性
3. 应用场景参考
按项目类型读取对应参考：
| 场景 | 读取 |
|---|---|
| 落地页 | references/landing-page.md |
| 后台 / Dashboard | references/dashboard.md |
| 移动端 | references/mobile-app.md |
4. 实现方向
风格确定后，给出关键 CSS/Tailwind 属性方向。具体组件实现交给目标框架 skill。
探索请求通常给 2–3 个有明显差异的方向，说明与任务的适配、取舍及推荐理由；用户已指定风格时直接深化，不要求重新选择。目录中的品牌案例是灵感，CSS 数值是起点，不是官方规范或已验收配方。
只有选型需求时交付方向即可；用户同时要求实现时继续完成对应实现，不以“交给框架 skill”作为停止理由。外部 skill 不可用时采用当前项目惯例。
行为检验：对“给黑白灰数据后台做毛玻璃风格”，应保留灰阶与数据可读性，优先局部导航/工具层，提供实底降级；不自动增加彩色渐变、不把所有表格行玻璃化。
References
| 场景 | 读取 |
|---|---|
| 风格目录（全部风格） | references/style-catalog.md |
| 落地页风格 | references/landing-page.md |
| Dashboard 风格 | references/dashboard.md |
| 移动端风格 | references/mobile-app.md |
What ships with it
4 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.
- 13d ago Changed · +8 lines 23b236a67dfa
- 1mo ago First seen · 63 lines · 132 tokens per session scan A 2652648952d7
design-ui-gallery is a skill published in the GitHub repository SnowBeatRain/skills (3 stars, last pushed 14d ago), licensed MIT. It adds 132 tokens to every session and 851 once invoked, about $0.0005 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.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
glance-canonical-layouts
Use this skill to create home screen widgets using Jetpack Glance Canonical Layouts from the Android Platform Samples project, or when asked to implement standard widget layout patterns (including Check List, Image Grid, Snap Scrolling, and Standard Toolbar).
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.