审查原型线框 · Wireframe Reviewer
按可用性清单审查原型线框:信息层级、导航、状态反馈与边界情况逐项检查,输出问题分级与修改建议。 Review wireframes against a usability checklist: hierarchy, navigation, feedback, and edge cases, with severity ratings and concrete fixes.
$7
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agents审查原型线框 · Wireframe Reviewer
Example session with this skill installed
我们做了一个电商App的首页线框,请按可用性清单帮我审查,重点是信息层级和状态反馈,直接说问题在哪一屏。
- Read your context and instructions
- Compiled the wireframe reviewer
- Generated the UI component
审查结论
整体结构可用,但有 2 个阻塞问题需在开发前修改:首屏缺少明确的下一步操作,搜索结果页没有空状态。以下是分级问题清单。
一、信息层级
| 位置 | 问题 | 分级 | 建议 |
|---|---|---|---|
| 首屏 Banner 区 | 三个促销图轮播,主次不分 | 重要 | 保留 1 个主推位,其余降为次级入口 |
| 分类金刚区 | 8 个图标字号一致,无优先级 | 建议 | 按使用频率排前 4 个,其余收入「全部」 |
| 商品卡 | 价格与销量混排 | 建议 | 价格固定左下,销量弱化为灰色小字 |
二、导航与路径
- 从首页到商品详情共 3 步,路径合理;
- 底部 Tab 与分类页入口重复,保留一个即可(重要)。
三、状态反馈(阻塞项)
- 搜索无结果页缺失(阻塞):用户输入无结果关键词后是白屏,需补空状态文案与「猜你想搜」推荐;
- 加购无反馈(阻塞):点击加入购物车没有 Toast 或角标变化,用户会重复点击;
- 骨架屏缺失(建议):列表加载只有转圈,建议用骨架屏降低等待感。
四、边界情况
- 商品名超过 2 行的截断规则未定义(建议);
- 未登录点击收藏的跳转路径未标注(重要)。
下一步
- 先改 2 个阻塞项:空状态 + 加购反馈;
- 把「底部 Tab 与分类入口重复」的决策带到评审会;
- 输出修改后的第二版线框,我们做回归审查。
wireframe-reviewer.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
它解决什么问题
原型评审常变成「我觉得不好看」的审美讨论,真正影响可用性的问题——层级不清、缺空状态、反馈缺失——反而没人提。直接问 AI,常给出宽泛的审美意见,难以落到具体页面元素。
这个技能做什么
对照可用性清单审查线框:信息层级、导航路径、操作反馈、错误与空状态、移动端适配逐项打分;问题按「阻塞 / 重要 / 建议」分级,每条给出页面位置、原因与改法示例。
为什么比裸提示词强
- 清单驱动:按固定维度审查,不漏项。
- 问题分级:先修什么一目了然。
- 可执行:每条建议对应具体页面与改法。
典型用例
- 开发前评审高保真原型,减少返工。
- 给新手设计师做评审反馈。
- 竞品页面结构对比与借鉴清单。
局限
基于你提供的线框描述或截图;无法替代真实用户测试,主观审美不在审查重点内。
English · 英文介绍
The problem
Prototype reviews often turn into "I don't think it looks good" aesthetic discussions, and issues that really affect usability - unclear hierarchy, empty states, and lack of feedback - are not mentioned. When asked directly, AI often gives broad aesthetic opinions, which are difficult to pin down to specific page elements.
What it does
Review the wireframe against the usability checklist: information level, navigation path, operation feedback, error and empty status, and mobile terminal adaptation are scored one by one; issues are graded according to "blocking/important/suggestion", and each item is given the page location, reason and improvement example.
Why is it better than naked prompt words?
- List-driven: Review according to fixed dimensions and no items are missed.
- Question grading: It’s clear what to study first.
- Executable: Each suggestion corresponds to a specific page and changes.
Typical use cases
- Review high-fidelity prototypes before development to reduce rework.
- Provide review feedback to novice designers.
- Comparison and reference list of competing product page structures.
Limitations
Based on the wireframe description or screenshots you provide; it cannot replace real user testing, and subjective aesthetics are not the focus of the review.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean today
- Passed all security checks, Safe to install