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 YangsonHung/awesome-agent-skills --skill ui-layout-analyzer-cngit clone --depth 1 https://github.com/YangsonHung/awesome-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/yangsonhung/awesome-agent-skills/ui-layout-analyzer-cn)<a href="https://agentmods.dev/skills/yangsonhung/awesome-agent-skills/ui-layout-analyzer-cn"><img src="https://agentmods.dev/badge/skills/yangsonhung/awesome-agent-skills/ui-layout-analyzer-cn/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/yangsonhung/awesome-agent-skills/ui-layout-analyzer-cn"><img src="https://agentmods.dev/badge/skills/yangsonhung/awesome-agent-skills/ui-layout-analyzer-cn.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.00023 | $0.00711 |
| Opus 5 | $0.00012 | $0.00356 |
| Sonnet 5 | $0.00005 | $0.00142 |
| Haiku 4.5 | $0.00002 | $0.00071 |
Grade A, and why
ui-layout-analyzer-cn 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.
What it actually says
UI 布局分析器
Overview
根据用户提供的 UI 截图，分析并输出结构化的布局排版描述和功能描述。技能聚焦界面截图本身，说明页面结构、视觉区块、信息层级、控件和可能的用户流程，不负责设计新 UI 或审查实现代码。
何时使用
当用户提供一张 UI 图片并请求分析时使用此 skill。
不要使用
以下场景不应使用本技能：
- 非 UI 图片（照片、示意图、非界面截图的图表）
- 要求设计或创建 UI（请使用 ui-ux-pro-max）
- 对 UI 实现代码的代码审查（请使用 code-reviewer）
使用说明
严格按照以下格式输出：
## UI 布局排版描述
### 整体结构
描述整体结构特点（模态对话框/全屏页面/侧边栏等）、背景色、圆角、阴影等视觉特征。结尾用「---」分隔线。
---
### 区块 N：区块名称
- 具体描述项
- 使用无序列表列举关键元素
[继续描述每个区块...]
---
## 功能描述
| 功能模块 | 说明 |
|---|---|
| **模块名称** | 功能说明 |
分析步骤
1. 识别整体结构
- 页面类型：模态对话框 / 全屏页面 / 侧边栏 / 底部抽屉 等
- 背景：白色/灰色/渐变/图片背景
- 特殊元素：圆角、阴影、边框、分隔线
2. 划分区块
从上到下识别每个区块，每个区块包含：
- 区块类型：标题栏 / 标签栏 / 内容区 / 列表 / 表格 / 输入区 / 操作栏 等
- 关键元素：图标、文字、按钮、输入框等
- 排列方式：左对齐/居中/右对齐、横向/纵向
3. 识别交互元素
- 按钮：主要按钮（填充色）/ 次要按钮（文字型）/ 图标按钮
- 输入：单行输入/多行文本/下拉选择/日期选择
- 选择器：单选/多选/开关/Tab切换
- 列表：列表项、网格布局、卡片布局
4. 描述功能
基于视觉元素推断功能：
- 表单类：输入、验证、提交
- 导航类：跳转、切换 Tab、返回
- 展示类：列表、详情、轮播
- 反馈类：Toast、弹窗、加载状态
注意事项
- 图片中的文字需要完整识别并包含在描述中
- 状态（如禁用/选中/展开）需要标注
- 区块编号使用中文数字（一、二、三...）
- 保持描述简洁但信息完整
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 · 82 lines · 23 tokens per session scan A 42d38b5b0e6b
ui-layout-analyzer-cn is a skill published in the GitHub repository YangsonHung/awesome-agent-skills (18 stars, last pushed 1mo ago), licensed MIT. It adds 23 tokens to every session and 711 once invoked, about $0.0001 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-30.
Other skills, from other repositories
impeccable-design-ui
A guide to Impeccable’s user-interface design tools, with options for frontend design, critique, audits, colors, animation, and polish.
awesome-design-setup
A setup guide for applying one of 58 selected brand styles to a project. It helps choose a brand and downloads its DESIGN.md file to the project root for an AI coding agent to use when building the interface.
unify-theme
Use when the user asks to set up, install, or migrate to the Unify Theme for reablocks — a production-ready theme pack built on a three-level design-token system (primitives → semantic → Tailwind utilities) synced with the Unify Figma library. Covers the single-file themeUnify.ts TypeScript download, the Reablocks…
graph-canvas
Main entry point for reagraph. Wraps the Three.js canvas, scene, camera controls, and lasso selection into a single component. Pass nodes and edges data along with layout, theme, and interaction configuration.
chip
Compact element for tags, filters, labels, or selections. Supports colors, variants, sizes, adornments, and interactive states (clickable, selectable). Uses forwardRef and keyboard accessibility (Enter/Space).
command-palette
Searchable command menu with keyboard navigation, sections, hotkey support, and animated items. Typically used inside a Dialog for modal access.