前言¶
前端和設計協作時，常見路徑是：在藍湖裏看標註，再手寫頁面或組件。尺寸、間距、顏色要對齊設計稿，往往要反覆量標註、對照切圖，耗時長且容易漏細節。若希望由 AI 按設計稿直接產出可對齊像素的組件代碼，需要一套明確對接藍湖、並約束輸出粒度的 Skill 指引。
下面介紹 SkillHub 社區技能「藍湖skill」：它面向「藍湖設計稿 → 目標框架組件代碼」這一條鏈路，把還原目標寫成可執行的 Agent 能力。
這是什麼¶
藍湖skill（座標 @user_59e19289/design-lanhu-skill，版本 1.0.0）是 SkillHub 上分類爲 dev-programming 的社區來源（community）技能，由發佈者 user_59e19289 提供；SkillHub 頁面展示作者爲 vtian。
一句話定位：將藍湖（Lanhu）設計稿還原爲目標框架的像素級組件代碼。
它解決的是：在已有藍湖設計資源的前提下，減少純手工對照標註寫 UI 的成本，讓 Agent 按技能說明去讀取設計信息並生成更貼近設計稿的組件實現（具體框架與步驟以安裝後的 SKILL.md 爲準）。
核心功能¶
依據 SkillHub 公開說明，目前可覈實的能力邊界如下：
- 設計稿還原爲代碼：以藍湖上的設計稿爲輸入，輸出面向「目標框架」的組件代碼，並強調像素級對齊意圖。
- 通用 Skill 形態：遵循 SkillHub 常見的
SKILL.md技能包格式，安裝後由 Cursor、Claude Code 等支持 Skills 的 Agent 加載執行。 - 依賴 API 密鑰：技能標籤爲
requires_api_key=true，表示使用前通常需要配置與藍湖或相關服務訪問有關的 API Key；具體環境變量名、配置位置以技能包內文檔爲準，安裝後請先閱讀SKILL.md。
SkillHub 頁面未單獨列出更多子命令或腳本清單；未在官方摘要中出現的功能（例如指定某一 UI 庫、自動上傳倉庫等）本文不展開。
安裝與啓用¶
SkillHub 官方建議：讓 AI 按安裝說明文檔操作，或直接調用 skillhub CLI。安裝時務必用 --dir 指向當前 Agent 的 skills 目錄，否則可能裝到默認 ./skills/ 而不會被識別。
1、安裝 SkillHub CLI（若尚未安裝）¶
先檢查是否已安裝：
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
2、安裝藍湖skill¶
在 Cursor 中，skills 目錄一般爲 ~/.cursor/skills/。示例命令：
skillhub install user_59e19289/design-lanhu-skill --dir ~/.cursor/skills/
也可將下面提示詞發給已聯網的 AI，由其按官方安裝文檔完成安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_59e19289/design-lanhu-skill`。
其他客戶端的常見 skills 路徑（來自 SkillHub 安裝文檔，供對照 --dir）：
- Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
安裝完成後，按 Agent 要求重啓或刷新技能列表，並打開技能目錄中的 SKILL.md 查看 API Key 與調用方式。
典型用法¶
公開資料未提供單獨的端到端演示倉庫，可復現的入口主要是「安裝技能 + 在對話中說明設計稿與目標框架」。
- 按上一節完成
skillhub install或 AI 輔助安裝。 - 根據
requires_api_key=true在SKILL.md中完成 API Key 配置。 - 在 Agent 對話中提供藍湖設計稿鏈接或頁面標識，並寫明目標框架（頁面摘要中的「目標框架」以你項目實際技術棧爲準），請求生成像素級組件代碼。
- 對生成結果在本地運行、對照藍湖標註做視覺與尺寸抽檢，再併入工程。
以上第 3、4 步的具體話術與字段名以技能包內 SKILL.md 爲準；本文不臆造配置項名稱。
適用場景與注意¶
適合誰
- 已在團隊流程中使用藍湖交付設計，且希望用 Agent 輔助從設計稿落到組件代碼的前端或全棧開發者。
- 使用 Cursor、Claude Code、Codex 等支持 SkillHub 技能目錄的客戶端。
限制與注意
- 技能聲明需要 API Key，未配置時通常無法訪問藍湖側資源；密鑰請放在環境變量或項目約定的安全位置，勿提交到版本庫。
- 「像素級」依賴設計稿質量、標註完整度以及 Agent 對
SKILL.md的遵循程度，生成代碼仍需人工驗收。 - SkillHub 統計（以抓取資料爲準）：評分 100000，下載 2555，安裝 54；數據會隨平臺更新變化，以 SkillHub 頁面爲準。
結尾¶
藍湖skill 把「藍湖設計稿 → 目標框架組件代碼」收斂爲一條可安裝的 Agent 技能路徑，適合在已有藍湖協作習慣的團隊裏做 UI 還原輔助。安裝與優先源說明見 SkillHub 安裝文檔；技能主頁見 SkillHub：藍湖skill，API 入口爲 https://api.skillhub.cn/user_59e19289/design-lanhu-skill。
