- Installs
- 42
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill ui-layout-analyzer-cn- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ui-layout-analyzer-cn automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
UI 布局分析器
Overview
根据用户提供的 UI 截图，分析并输出结构化的布局排版描述和功能描述。技能聚焦界面截图本身，说明页面结构、视觉区块、信息层级、控件和可能的用户流程，不负责设计新 UI 或审查实现代码。
何时使用
当用户提供一张 UI 图片并请求分析时使用此 skill。
不要使用
以下场景不应使用本技能：
- 非 UI 图片（照片、示意图、非界面截图的图表）
- 要求设计或创建 UI（请使用 ui-ux-pro-max）
- 对 UI 实现代码的代码审查（请使用 code-reviewer）
使用说明
严格按照以下格式输出：
## UI 布局排版描述
### 整体结构
描述整体结构特点（模态对话框/全屏页面/侧边栏等）、背景色、圆角、阴影等视觉特征。结尾用「---」分隔线。
---
### 区块 N：区块名称
- 具体描述项
- 使用无序列表列举关键元素
[继续描述每个区块...]
---
## 功能描述
| 功能模块 | 说明 |
|---|---|
| **模块名称** | 功能说明 |
分析步骤
1. 识别整体结构
- 页面类型：模态对话框 / 全屏页面 / 侧边栏 / 底部抽屉 等
- 背景：白色/灰色/渐变/图片背景
- 特殊元素：圆角、阴影、边框、分隔线
2. 划分区块
从上到下识别每个区块，每个区块包含：
- 区块类型：标题栏 / 标签栏 / 内容区 / 列表 / 表格 / 输入区 / 操作栏 等
- 关键元素：图标、文字、按钮、输入框等
- 排列方式：左对齐/居中/右对齐、横向/纵向
3. 识别交互元素
- 按钮：主要按钮（填充色）/ 次要按钮（文字型）/ 图标按钮
- 输入：单行输入/多行文本/下拉选择/日期选择
- 选择器：单选/多选/开关/Tab切换
- 列表：列表项、网格布局、卡片布局
4. 描述功能
基于视觉元素推断功能：
- 表单类：输入、验证、提交
- 导航类：跳转、切换 Tab、返回
- 展示类：列表、详情、轮播
- 反馈类：Toast、弹窗、加载状态
注意事项
- 图片中的文字需要完整识别并包含在描述中
- 状态（如禁用/选中/展开）需要标注
- 区块编号使用中文数字（一、二、三...）
- 保持描述简洁但信息完整
FAQ
What does the ui-layout-analyzer-cn skill do?
当用户需要根据 UI 截图输出布局结构和功能说明时使用。
How do I install ui-layout-analyzer-cn?
Run npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill ui-layout-analyzer-cn in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-layout-analyzer-cn/ (personal) or .claude/skills/ui-layout-analyzer-cn/ (project).
Which AI agents can use ui-layout-analyzer-cn?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ui-layout-analyzer-cn safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ui-layout-analyzer-cn?
It is published by yangsonhung in yangsonhung/awesome-agent-skills. It has 42 recorded installs.
More from yangsonhung/awesome-agent-skills
novel-writer-cn
yangsonhung/awesome-agent-skills
当用户需要创作、续写、修改小说，或设计角色和世界观时使用。
novel-writer
yangsonhung/awesome-agent-skills
Use when writing, continuing, revising, or planning novels, characters, and fictional worlds.
topic-bookmarks-reorganizer-cn
yangsonhung/awesome-agent-skills
当用户需要按主题整理浏览器书签导出、URL 去重并生成可导入 HTML 时使用。
mac-software-storage-cleanup
yangsonhung/awesome-agent-skills
Use when auditing macOS app storage, cleaning priority caches, or recommending reclaimable disk space.
conversation-json-to-md
yangsonhung/awesome-agent-skills
Use when converting chat export JSON into per-conversation Markdown files with preserved user-assistant Q/A and normalized headings.
topic-bookmarks-reorganizer
yangsonhung/awesome-agent-skills
Use when reorganizing a browser bookmarks export by topic, deduplicating URLs, and producing an importable HTML file.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
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.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.