前言¶
做官网、落地页或后台界面时，常见困境不是缺组件库，而是信息架构、视觉层次和交付物形态难以在一次对话里对齐：需求描述偏散，输出有时是零散 CSS，有时是半套页面，和「可上线的 polished 站点」还有距离。若你已经在 Cursor、Claude Code 等环境里用 Skills 约束 Agent 行为，下面介绍 SkillHub 上的「网页设计工程师」——按官方简介，它面向创建或重新设计 polished 的网站、落地页、仪表盘等界面（页面上的英文简介在 SkillHub 展示处被截断，完整句式以 SkillHub 为准）。
这是什么¶
「网页设计工程师」是 SkillHub 坐标 @org-02qudk26/web-design-engineer 下的一条企业来源（enterprise）Skill，当前版本 1.0.0，分类为 design-media，由 智雨科技 发布。SkillHub 元数据标注 requires_api_key=false，即安装后不要求额外配置 API Key。
它解决的问题可以概括为：在 Agent 对话中，把「做站 / 改版」类任务收敛到一条可复用的技能说明（通用 SKILL.md 格式），让模型在触发条件匹配时按技能约定工作，而不是每次从零描述设计流程。
官方入口：
- SkillHub 页面：https://www.skillhub.cn/skills/org-02qudk26/web-design-engineer
- API 坐标（SkillHub 登记）：https://api.skillhub.cn/org-02qudk26/web-design-engineer
核心功能¶
公开页面与抓取资料中可核对的能力边界如下，不展开未在资料中出现的具体步骤或模板。
-
触发场景（官方简介）
适用于创建或重新设计 polished 的网站、落地页、仪表盘等界面。简介英文原文为：Use when creating or redesigning a polished website, landing page, dashboard, in（SkillHub 展示为截断句）。 -
分发与形态
通过 SkillHub 安装到当前 Agent 的 skills 目录后，以 SKILL.md 类技能包形式被 Agent 读取；无需 API Key（requires_api_key=false）。 -
平台侧数据（SkillHub，2026-10-22 抓取）
评分 100000；下载 1917；安装计数 0。这些数字仅反映 SkillHub 统计，不代表本地使用效果。
更细的排版规范、技术栈偏好、交付目录结构等，需以安装后的技能包正文为准；本文未获取到完整 SKILL.md 全文，故不逐条罗列。
安装与启用¶
SkillHub 官方建议两种方式：用 CLI 安装，或把安装提示词发给 AI，让其按安装文档操作。
1. 安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（含默认 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¶
安装技能时必须用 --dir 指向当前 Agent 实际使用的 skills 目录，否则默认会装到 ./skills/，Agent 可能无法识别。
skillhub install @org-02qudk26/web-design-engineer --dir <你的 skills 目录>
常用路径（来自 SkillHub 安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
示例（Cursor）：
skillhub install @org-02qudk26/web-design-engineer --dir ~/.cursor/skills/
安装后按你所用客户端要求重启或刷新技能列表（SkillHub 文档提示：目录不对或未重启会导致技能不可见）。
3. 通过对话让 AI 安装¶
SkillHub 页面提供的提示词为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@org-02qudk26/web-design-engineer`。
将上述内容发给支持 Skill 安装的 Agent 即可；Agent 应读取同一安装文档并执行 skillhub install，且 --dir 仍须对准当前环境的 skills 目录。
典型用法¶
公开资料未给出带代码的端到端教程，可复现的用法如下。
- 按上一节完成安装，确认
@org-02qudk26/web-design-engineer出现在对应 skills 目录。 - 在 Cursor / Claude Code 等客户端中开启或加载该 Skill（以客户端技能机制为准）。
- 用自然语言描述任务，并落在官方简介范围内，例如：新建产品落地页、改版营销官网、调整仪表盘信息布局等；说明目标用户、现有品牌约束、是否需要响应式等，便于 Agent 在技能上下文内生成方案与实现。
具体输出物（单页 HTML、组件库选型、设计 token 等）以技能包内 SKILL.md 的约定为准；若与预期不符，应直接打开已安装目录中的技能正文核对，而不是假设未公开的流程。
适用场景与注意¶
适合谁
- 已在用 Agent 做前端或全栈原型，希望把「站点 / 落地页 / 仪表盘」类任务固定到一条设计向 Skill 的开发者或小型团队。
- 愿意通过 SkillHub 管理技能版本、且接受企业来源（enterprise）技能分发方式的用户。
限制与注意
- 简介在 SkillHub 上为截断展示，完整触发条件与交付标准以安装后的 SKILL.md 为准。
requires_api_key=false只表示该 Skill 元数据未要求 Key；你项目里调用的第三方服务仍可能各自需要密钥。- 安装统计中的「安装 0」与「下载 1917」并存，只说明平台计数方式，不表示技能无效；本地是否生效以 skills 目录与客户端识别为准。
- 设计类输出仍需人工做可访问性、性能与品牌合规审查，Skill 不能替代设计评审与上线流程。
结尾¶
「网页设计工程师」把 polished 网站、落地页、仪表盘等界面类需求收拢到 SkillHub 企业技能 @org-02qudk26/web-design-engineer，无需 API Key 即可按文档安装到 Cursor、Claude Code、Codex 等环境的 skills 目录。若要查看版本与简介，请打开 SkillHub 页面：https://www.skillhub.cn/skills/org-02qudk26/web-design-engineer
