前言¶

前端或全棧開發裏，常見起點是一張產品稿、競品頁面或現網界面的截圖。你要做的往往是兩件事：把視覺信息整理成可交給 AI 或同事的實現說明，以及寫一份能評審、能拆任務的頁面功能設計。手工從像素裏摳佈局、狀態和交互，既慢又容易漏。下面介紹 SkillHub 上的社區 Skill「逆向工程提示詞」，它把截圖作爲輸入，按固定結構產出兩份文檔，減少從圖到文的重複勞動。

這是什麼¶

「逆向工程提示詞」是 SkillHub 座標 @user_af28adda/screenshot-reverse-engineer 下的 Agent Skill，版本 1.0.0，分類爲 dev-programming，來源爲 community，由發佈者 user_af28adda 維護。Skill 基於通用 SKILL.md 格式，標籤標明 requires_api_key=false，安裝後無需額外 API Key。

一句話定位：把網頁、App、小程序、儀表盤和組件的截圖，逆向整理爲 AI / 前端工程開發提示詞 與 結構化頁面功能設計文檔。

核心功能¶

根據 SkillHub 官方簡介，已覈實的能力如下。

1. 雙交付物
   - 開發向的提示詞：便於在 Cursor、Claude Code 等環境裏繼續生成或改寫前端代碼。
   - 頁面功能設計文檔：結構化描述頁面能力與交互，便於評審與排期。

2. 截圖形態
   - 單張截圖、多狀態截圖（如空態 / 加載 / 錯誤）、局部組件截圖均可作爲輸入。

3. 界面類型
   - PC 網頁、移動端 H5、App、小程序、管理系統（後臺 / 儀表盤）類 UI。

4. 觸發場景
   - 用戶上傳或引用 UI 截圖，並要求對可視化頁面進行分析、還原、復刻、編寫文檔，或生成實現提示詞時使用。

SkillHub 頁面當前顯示評分 100000，下載 2672 次（統計以頁面爲準，會隨時間變化）。

安裝與啓用¶

官方安裝說明指向 SkillHub 通用文檔與座標安裝，而不是單獨的二進制。建議按下面順序操作。

1、確認 SkillHub CLI¶

先檢查本機是否已有 skillhub：

command -v skillhub && skillhub --version

若未安裝，可按 SkillHub 安裝文檔執行完整安裝（CLI + 默認 Skill）：

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

完整步驟見：https://skillhub.cn/install/skillhub.md

2、安裝本 Skill¶

SkillHub 技能頁給出的安裝提示爲：根據上述安裝文檔，安裝 @user_af28adda/screenshot-reverse-engineer。

使用 CLI 時，須用 --dir 指向當前 Agent 的 skills 目錄，否則默認裝到 ./skills/ 可能不會被識別。常用路徑示例：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或項目下的 .agents/skills/

示例（Cursor）：

skillhub install user_af28adda/screenshot-reverse-engineer --dir ~/.cursor/skills/

也可將 SkillHub 頁面上的安裝提示詞直接發給當前 AI，讓其按 https://skillhub.cn/install/skillhub.md 完成安裝；具體命令以文檔與 CLI 行爲爲準。

安裝或更新技能後，按你所用客戶端的要求重啓或刷新 Agent，使新 Skill 生效。

典型用法¶

官方資料未附帶獨立示例倉庫；用法與簡介中的觸發條件一致，可按可復現步驟操作。

1. 在對話中上傳 UI 截圖，或粘貼、引用已有圖片路徑（單頁、多狀態或單個組件均可）。
2. 在需求裏寫清目標，例如：分析佈局與組件、還原爲某技術棧實現、復刻交互、輸出功能設計文檔、生成前端實現提示詞等。
3. 等待 Agent 在 Skill 指導下輸出兩份交付物：開發提示詞 + 結構化頁面功能設計文檔。
4. 將開發提示詞用於後續編碼會話；將功能設計文檔用於評審、測試用例或任務拆分。

示例請求（表述可按項目調整）：

請使用逆向工程提示詞 Skill：根據附件截圖，輸出一份 Vue3 + TypeScript 的前端實現提示詞，
以及一份包含頁面結構、主要功能點與交互說明的設計文檔。平臺是移動端 H5。

多狀態場景可一次上傳多張圖，並在消息中說明每張圖對應的狀態名稱。

適用場景與注意¶

適合誰

• 需要快速從視覺稿或競品截圖落到文檔與提示詞的前端、全棧或技術型產品同學。
• 希望在同一輪對話裏同時拿到「給 AI 寫代碼的說明」和「給人看的功能設計」的團隊。

注意

• 輸出質量依賴截圖清晰度、是否遮擋關鍵區域，以及你在對話裏是否說明技術棧、設計規範等約束；Skill 不會自動讀取你未提供的代碼倉庫。
• 社區來源（community）Skill，升級與維護節奏取決於發佈者；安裝前可在 SkillHub 查看版本 1.0.0 與頁面說明。
• 逆向分析不能替代法務與品牌層面的合規審查；復刻第三方界面前請自行確認版權與授權。
• 頁面統計中的「安裝」數可能與各客戶端本地安裝方式不一致，以 SkillHub 展示爲準。

結尾¶

「逆向工程提示詞」把 UI 截圖收斂爲開發提示詞與頁面功能設計兩份交付物，覆蓋從 PC 到小程序、從整頁到組件的常見輸入形態，且無需 API Key。若你手頭只有圖、卻要先寫清再實現，可在 SkillHub 安裝 @user_af28adda/screenshot-reverse-engineer 後直接在對話裏貼圖使用。

• SkillHub 技能頁：https://www.skillhub.cn/skills/user_af28adda/screenshot-reverse-engineer
• API / 元數據：https://api.skillhub.cn/user_af28adda/screenshot-reverse-engineer
• 安裝說明：https://skillhub.cn/install/skillhub.md