Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/L-LesterYu/OpenClaw-hot-skills-zhnpx agentmods add skills/l-lesteryu/openclaw-hot-skills-zh/ui-ux-pro-maxWrote 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/l-lesteryu/openclaw-hot-skills-zh/ui-ux-pro-max)<a href="https://agentmods.dev/skills/l-lesteryu/openclaw-hot-skills-zh/ui-ux-pro-max"><img src="https://agentmods.dev/badge/skills/l-lesteryu/openclaw-hot-skills-zh/ui-ux-pro-max/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/l-lesteryu/openclaw-hot-skills-zh/ui-ux-pro-max"><img src="https://agentmods.dev/badge/skills/l-lesteryu/openclaw-hot-skills-zh/ui-ux-pro-max.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.00297 | $0.12648 |
| Opus 5 | $0.00148 | $0.06324 |
| Sonnet 5 | $0.00059 | $0.02530 |
| Haiku 4.5 | $0.00030 | $0.01265 |
Grade B, and why
ui-ux-pro-max scanned grade B with 1 finding 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.
Asks for rootmediumPrivilege escalation
A mod that escalates privileges can change anything on the machine, not only the project.
sudo apt update && sudo apt install python3 How it starts
The opening of the file, as written. The whole thing — 660 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Pro Max - 设计智能指南
全面的设计指南，适用于 Web 和移动应用。包含 50+ 种风格、161 种配色方案、57 种字体搭配、161 种带推理规则的产品类型、99 条 UX 准则和 25 种图表类型，覆盖 10 大技术栈。支持搜索的数据库，提供基于优先级的推荐。
何时使用
当任务涉及 UI 结构、视觉设计决策、交互模式或用户体验质量控制 时，应使用此技能。
必须使用
在以下情况下必须调用此技能：
- 设计新页面（落地页、仪表盘、管理后台、SaaS、移动应用）
- 创建或重构 UI 组件（按钮、模态框、表单、表格、图表等）
- 选择配色方案、字体系统、间距标准或布局系统
- 审查 UI 代码的用户体验、无障碍性或视觉一致性
- 实现导航结构、动画或响应式行为
- 做出产品级别的设计决策（风格、信息层级、品牌表达）
- 改善界面的感知质量、清晰度或可用性
推荐使用
在以下情况下推荐使用此技能：
- UI 看起来"不够专业"但原因不明确
- 收到关于可用性或体验的反馈
- 发布前的 UI 质量优化
- 跨平台设计对齐（Web / iOS / Android）
- 构建设计系统或可复用组件库
无需使用
在以下情况下不需要此技能：
- 纯后端逻辑开发
- 仅涉及 API 或数据库设计
- 与界面无关的性能优化
- 基础设施或 DevOps 工作
- 非可视化脚本或自动化任务
决策标准：如果任务会改变功能的 外观、感觉、动效或交互方式，则应使用此技能。
按优先级排列的规则类别
供人类/AI 参考：按优先级 1→10 决定首先关注哪个规则类别；需要时使用 --domain <Domain> 查询详情。脚本不读取此表。
| 优先级 | 类别 | 影响 | 领域 | 关键检查（必须有） | 反模式（避免） |
|---|---|---|---|---|---|
| 1 | 无障碍性 | 关键 | ux |
对比度 4.5:1、替代文本、键盘导航、Aria 标签 | 移除焦点环、无标签的纯图标按钮 |
| 2 | 触控与交互 | 关键 | ux |
最小尺寸 44×44px、8px+ 间距、加载反馈 | 仅依赖悬停、瞬时状态变化（0ms） |
| 3 | 性能 | 高 | ux |
WebP/AVIF、懒加载、预留空间（CLS < 0.1） | 布局抖动、累积布局偏移 |
| 4 | 风格选择 | 高 | style, product |
匹配产品类型、一致性、SVG 图标（不用 emoji） | 随机混合扁平与拟物化、用 emoji 作为图标 |
| 5 | 布局与响应式 | 高 | ux |
移动优先断点、Viewport meta、无横向滚动 | 横向滚动、固定 px 容器宽度、禁用缩放 |
| 6 | 排版与颜色 | 中 | typography, color |
基础 16px、行高 1.5、语义化颜色令牌 | 正文文本 < 12px、灰底灰字、组件中使用原始 hex |
| 7 | 动画 | 中 | ux |
持续时间 150–300ms、动效传达意义、空间连续性 | 纯装饰性动画、动画 width/height、无 reduced-motion |
| 8 | 表单与反馈 | 中 | ux |
可见标签、错误靠近字段、帮助文本、渐进式披露 | 仅用占位符作标签、错误仅在顶部、一开始就堆砌信息 |
| 9 | 导航模式 | 高 | ux |
可预测的返回、底部导航 ≤5 项、深度链接 | 导航过载、返回行为异常、无深度链接 |
| 10 | 图表与数据 | 低 | chart |
图例、工具提示、无障碍颜色 | 仅依靠颜色传达意义 |
快速参考
1. 无障碍性（关键）
color-contrast- 普通文本最小对比度 4.5:1（大文本 3:1）；Material Designfocus-states- 交互元素上可见的焦点环（2–4px；Apple HIG, MD）alt-text- 有意义的图片需要描述性替代文本aria-labels- 纯图标按钮使用 aria-label；原生端使用 accessibilityLabel（Apple HIG）keyboard-nav- Tab 顺序与视觉顺序一致；完整键盘支持（Apple HIG）form-labels- 使用 label 配合 for 属性skip-links- 为键盘用户提供跳转到主内容的链接heading-hierarchy- 顺序使用 h1→h6，不跳级color-not-only- 不要仅靠颜色传达信息（添加图标/文本）dynamic-type- 支持系统文字缩放；避免文字增长时被截断（Apple Dynamic Type, MD）reduced-motion- 尊重 prefers-reduced-motion；请求时减少/禁用动画（Apple Reduced Motion API, MD）voiceover-sr- 有意义的 accessibilityLabel/accessibilityHint；VoiceOver/屏幕阅读器的逻辑阅读顺序（Apple HIG, MD）escape-routes- 在模态框和多步骤流程中提供取消/返回选项（Apple HIG）keyboard-shortcuts- 保留系统和无障碍快捷键；为拖放提供键盘替代方案（Apple HIG）
What ships with it
2 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 · 660 lines · 297 tokens per session scan B 9fef643b39b3
ui-ux-pro-max is a skill published in the GitHub repository L-LesterYu/OpenClaw-hot-skills-zh (54 stars, last pushed 5mo ago), licensed MIT. It adds 297 tokens to every session and 12,648 once invoked, about $0.0015 per session on Opus 5. A static security scan graded it B with 1 finding (asks for root). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
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.
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.