前言¶
前端和设计协作时，常见路径是：在蓝湖里看标注，再手写页面或组件。尺寸、间距、颜色要对齐设计稿，往往要反复量标注、对照切图，耗时长且容易漏细节。若希望由 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。
