前言¶
手工從設計稿或原型圖拆測試用例，往往要反覆對照截圖：有哪些控件、默認值和提示語是什麼、彈窗和跳轉怎麼測。設計迭代快時，用例還容易漏項或和界面脫節。下面介紹一個在 SkillHub 上發佈的社區 Skill，把「看圖寫用例」收斂成固定流程：你上傳 UI 圖，Agent 按 SKILL 裏的規則識別元素並生成用例，減少重複口述需求。
這是什麼¶
通過 UI 圖生成測試用例（座標 @user_c3b299c0/qkym，版本 1.0.0）是 SkillHub 社區來源（community）的 Agent Skill，分類爲 dev-programming，由發佈者 user_c3b299c0 維護。
Skill 內定位是：上傳 UI 設計圖、原型圖或頁面截圖後，自動解析頁面元素、佈局、交互、文案、彈窗、按鈕等，輸出結構化的思維腦圖式測試用例，無需你再逐條補充界面描述。SkillHub 頁面標註 requires_api_key=false，不依賴額外 API Key 配置。
核心功能¶
依據 Skill 包內 SKILL.md，Agent 在啓用該 Skill 後應遵守以下能力邊界（均爲 Skill 正文約定，非第三方案例）：
-
識圖與元素枚舉
根據你上傳的 UI 圖片，識別頁面名稱、頂部導航、輸入框、下拉框、單選/複選、按鈕、彈窗、圖標、文案、分頁、跳轉入口，以及狀態置灰、默認值、提示語等可見信息。 -
按模塊拆功能點
自動拆分功能點並按模塊歸類；例如「添加彈窗」內各可填字段可單獨成條，便於查閱。 -
覆蓋維度
用例需覆蓋：正常場景、邊界值、異常輸入、空值、特殊字符、按鈕狀態、彈窗關閉/確認、頁面跳轉、文案顯示、兼容性視覺等。 -
輸出形態
可先輸出思維腦圖形式的測試點，再生成更詳細、可執行的思維腦圖測試用例；用例標題簡潔，步驟按 1、2、3 編號；重要級別分爲高/中/低。 -
多頁與觸發方式
若一張圖或多張圖對應多頁面，分頁分別生成；Skill 約定觸發口令爲：上傳圖片後按上述整套規則執行，無需額外提問或補充需求（除非你在對話中另有說明）。
安裝與啓用¶
官方頁面給出的安裝指引是：先閱讀 SkillHub 安裝與優先源配置，再安裝座標 @user_c3b299c0/qkym。
1. 檢查或安裝 SkillHub CLI¶
command -v skillhub && skillhub --version
未安裝時，可按安裝文檔執行完整安裝（示例爲文檔中的推薦方式）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
僅安裝 CLI 時：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 安裝本 Skill 到當前 Agent 的 skills 目錄¶
安裝時必須使用 --dir 指向當前客戶端識別的 skills 目錄，否則默認落在 ./skills/ 可能不會被 Agent 加載。
skillhub install @user_c3b299c0/qkym --dir <你的 skills 目錄>
常見路徑（來自 SkillHub 安裝文檔）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
示例（Cursor）：
skillhub install @user_c3b299c0/qkym --dir ~/.cursor/skills/
安裝完成後，按你所用客戶端的要求重啓或刷新 Agent，使 Skill 生效。Codex CLI、Claude Code 與 Cursor 的差異主要體現在 skills 目錄位置；安裝命令本身一致，差異僅在 --dir 目標路徑。
典型用法¶
經過上面的步驟啓用 Skill 後，可按 Skill 內「觸發口令」使用：
- 在對話中上傳一張或多張 UI 設計圖、原型圖或頁面截圖（多頁面時 Skill 要求分頁分別生成）。
- 說明需要生成測試用例（或直接使用 Skill 約定的「上傳圖片即按規則執行」方式）。
- 查看 Agent 輸出：先出現的思維腦圖式測試點，以及後續的詳細、可執行用例；檢查模塊拆分與優先級（高/中/低）是否符合你的項目規範。
Skill 正文要求 Agent 不廢話、不閒聊，聚焦用例內容；你若對某模塊需要加強邊界或異常場景，可在同一會話中追加約束，但 Skill 默認目標是「看圖直接全套生成」。
適用場景與注意¶
適合誰
- 前端或全棧同學在需求/設計稿階段需要快速鋪測試點清單。
- QA 需要把界面截圖轉成可評審的結構化用例，減少從圖到表格的機械抄寫。
- 多頁面原型需要按頁拆分、避免漏測可見控件和彈窗交互。
限制與注意
- 輸出質量依賴 Agent 對圖片的識別能力及你是否提供了清晰、完整的界面圖；Skill 未承諾對接具體測試管理工具或固定 Excel/JSON 模板，落地到你們公司的用例庫仍需人工校對。
- 社區 Skill（
community），維護節奏以發佈者爲準；使用前可在 SkillHub 頁面查看版本與下載情況。截至資料抓取：評分100000，下載1367次（頁面統計，會隨時間變化）。 - 涉及合規或敏感界面時，注意圖片是否適合上傳至你所用的 AI 客戶端環境。
結尾¶
通過 UI 圖生成測試用例把「識圖 → 拆模塊 → 按維度寫用例 → 腦圖式輸出」寫進 Agent 的永久規則，適合想把 UI 驗收前測試設計前置到對話裏的團隊。官方 SkillHub 頁面：https://www.skillhub.cn/skills/user_c3b299c0/qkym；API 入口：https://api.skillhub.cn/user_c3b299c0/qkym。
