前言¶
用 AI 写前端时，组件能跑、布局能凑，但成品常缺统一气质：间距随意、配色像模板站、落地页和后台面板风格对不上。自己每次在对话里重复「要现代、要留白、别用烂渐变」，既费 token，也难沉淀成团队习惯。
下面介绍 SkillHub 上的社区 Skill「前端设计」（坐标 @user_e07fe912/frontend-design-v2）。它把前端界面设计相关的指引写进通用 SKILL.md 格式，在 Agent 构建 landing page、仪表盘或任意 UI 时自动参与决策，减少反复口述设计偏好。
这是什么¶
「前端设计」是 SkillHub 分类 design-media 下的社区 Skill，当前版本 2.0.0，发布者为 user_e07fe912，来源标注为 community。
官方简介（英文原文）：Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
一句话定位：为 Agent 提供专家级前端设计指引，面向需要「好看、现代」界面的实现任务，而不是替代设计稿工具或组件库文档。页面元数据标明 requires_api_key=false，安装后无需额外 API Key。
SkillHub 页面统计（以抓取资料为准）：评分 100000，下载 6723 次，安装 82 次。
核心功能¶
已公开资料未展开 SKILL.md 全文，能核实的能力边界如下：
- 设计导向的 Agent 指引：Skill 被描述为 expert frontend design guidelines，作用是在生成或改写界面相关代码时，让模型遵循一套与现代 UI 相关的原则，而不是只满足功能需求。
- 场景覆盖：官方说明明确适用于 landing pages、dashboards，以及 any user interface，即营销页、数据后台、通用 Web UI 均可触发使用。
- 无密钥依赖：标签
requires_api_key=false，不绑定第三方设计或素材服务的密钥。
具体条目（排版、色彩、动效、可访问性等）以安装后本地的 SKILL.md 为准；本文不臆造未在官方页面出现的细则。
安装与启用¶
SkillHub 推荐两种方式：按安装文档用 CLI 安装，或把安装提示词发给 AI 由其按文档执行。
1、安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（文档地址：https://skillhub.cn/install/skillhub.md）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需要 CLI、不装默认 Skill 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安装本 Skill 到当前 Agent 的 skills 目录¶
安装技能时必须用 --dir 指向当前 Agent 实际读取的 skills 目录；默认装到 ./skills/ 时，部分客户端不会加载，且文档说明安装后可能仍需重启客户端。
skillhub install user_e07fe912/frontend-design-v2 --dir <你的 skills 目录>
常用路径（来自 SkillHub 安装文档）：
| 客户端 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或项目下 .windsurf/skills/ |
在 Cursor 中示例：
skillhub install user_e07fe912/frontend-design-v2 --dir ~/.cursor/skills/
3、通过对话让 AI 安装（官方页面同款提示）¶
SkillHub 技能页给出的提示词为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_e07fe912/frontend-design-v2`。
将上述内容发给支持 Skill 的 Agent，由其按 skillhub.md 完成 CLI 检查与 skillhub install，并确认 --dir 指向正确目录。
经过上面的步骤，重启或重新加载 Agent 后，「前端设计」会作为可用 Skill 出现在技能列表中；具体启用方式取决于各客户端对 Skill 的自动匹配规则（通常在任务与 UI/前端相关时由 Agent 选用）。
典型用法¶
公开页面未提供独立代码示例；可复现的用法与官方简介一致：
- 在已安装 Skill 的 Agent 中发起与界面相关的任务，例如新建落地页、改版仪表盘、实现某块 Web UI。
- 在需求中写清页面类型与约束（品牌色、参考站点、是否需要响应式等）；Skill 内的设计指引会在生成 HTML/CSS、React/Vue 等实现时作为额外上下文参与。
- 若效果仍偏离预期，可对照本地
~/.cursor/skills/（或你使用的目录）下该 Skill 的SKILL.md调整提示，而不是在对话里零散重复设计口号。
示例任务表述（示意，非官方模板）：
用 React 做一个 SaaS 产品落地页：Hero、功能三列、定价表。已安装 frontend-design-v2，请按 Skill 里的现代 UI 指引排版与配色。
适用场景与注意¶
适合谁
- 经常用 Cursor、Claude Code、Codex 等从自然语言生成前端，又希望输出在视觉上更统一、更「像产品」的开发者。
- 需要快速出 landing page 或 dashboard 原型，但暂时没有完整设计系统的个人或小团队。
限制与注意
- 社区来源（
community），维护节奏与细则以发布者更新为准；重大版本变更留意 SkillHub 上的版本号（当前 2.0.0）。 - Skill 约束的是生成时的设计倾向，不能替代真实用户测试、品牌规范文档或设计稿走查。
- 安装路径错误是最常见坑：务必
--dir到当前 Agent 的 skills 目录，并按文档提示在必要时重启客户端。 - 本文数据与简介以 SkillHub 抓取资料及技能页为准；若与站内实时统计有出入，以 SkillHub 技能页 为准。
结尾¶
「前端设计」把现代 UI 的设计指引封装成 Agent Skill，在落地页、仪表盘和通用界面任务中减少重复叮嘱、拉高视觉下限。无需 API Key，通过 SkillHub CLI 或官方安装提示即可装入各主流客户端的 skills 目录。
官方入口：
- SkillHub 页面：https://www.skillhub.cn/skills/user_e07fe912/frontend-design-v2
- API 坐标页：https://api.skillhub.cn/user_e07fe912/frontend-design-v2
- 安装文档：https://skillhub.cn/install/skillhub.md
