前言¶
用 AI 搭页面时，功能往往先能跑，视觉却容易掉进同一套套路：紫渐变、圆角卡片、千篇一律的排版。自己改样式又耗时间，设计规范也难在对话里稳定复现。若你希望 Agent 在写组件、整页或海报时，默认往「可上线、有设计感、少 AI 味」靠拢，可以把 SkillHub 上的社区 Skill「前端美化」装进当前 Agent，在相关任务里按 SKILL.md 的指引生成与润色界面代码。
这是什么¶
「前端美化」是 SkillHub 坐标 @user_c6f1a0f0/114514 下的 Agent Skill，版本 1.0.0，来源为 community，分类 dev-programming，由发布者 user_c6f1a0f0 维护。它基于通用 SKILL.md 格式，在对话中作为技能说明被 Agent 读取，不单独提供运行时服务。
官方简介概括为：创建有辨识度、达到生产级质量的前端界面；在用户要求构建 Web 组件、页面、制品、海报或应用（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 做样式与美化）时使用；生成有创意、打磨过的代码与 UI 设计，并避免泛化的 AI 审美。标签 requires_api_key=false，表示按 SkillHub 标注无需 API Key。
SkillHub 页面：https://www.skillhub.cn/skills/user_c6f1a0f0/114514
API 条目：https://api.skillhub.cn/user_c6f1a0f0/114514
（SkillHub 抓取数据：评分 100000，下载 23341 次。）
核心功能¶
以下能力均来自官方简介与 SkillHub 条目，不展开未在资料中出现的实现细节。
- 生产级界面输出：面向可交付的前端界面，而非仅演示级片段。
- 多形态覆盖：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，以及海报类视觉制品。
- 美化与样式任务：在用户明确要求 styling / beautifying Web UI 时启用相关指引。
- 审美取向：强调 distinctive、polished，并明确 avoids generic AI aesthetics（避免通用 AI 审美）。
- 无 API Key 依赖：
requires_api_key=false。
安装与启用¶
SkillHub 官方建议：让 AI 根据安装文档执行安装，目标坐标为 @user_c6f1a0f0/114514。下面步骤与 https://skillhub.cn/install/skillhub.md 一致。
1、检查或安装 SkillHub CLI¶
先确认本机是否已有 skillhub：
command -v skillhub && skillhub --version
若未安装，可使用官方推荐的一键安装（含 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、安装到当前 Agent 的 skills 目录¶
安装时必须用 --dir 指向当前 Agent 识别的 skills 目录；装到默认 ./skills/ 可能不会被 Agent 加载。常见路径如下（以你实际使用的客户端为准）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
示例（Cursor）：
skillhub install user_c6f1a0f0/114514 --dir ~/.cursor/skills/
也可在对话中直接说明：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_c6f1a0f0/114514。
安装后按你所用 Agent 的说明刷新或重启，使新 Skill 被加载。
典型用法¶
资料中未提供独立 demo 仓库；用法即：在 Agent 已加载该 Skill 的前提下，用自然语言描述界面目标。下列表述与官方简介中的示例场景一致，便于复现「何时应触发该 Skill」：
- 整页或站点：「做一个产品落地页，需要清晰的信息层级和完整 HTML/CSS（或 React）结构。」
- 仪表盘：「做一个数据仪表盘页面，布局要适合生产环境，不要模板化 AI 风格。」
- 组件：「写一个 React 卡片列表组件，间距、字体和配色要统一、可上线。」
- 美化现有 UI：「在不改业务逻辑的前提下，美化这段页面的样式，避免紫渐变和千篇一律的组件库观感。」
- 海报类制品：「生成一张活动海报的 Web 版面（HTML/CSS 或组件），用于静态展示。」
Agent 会结合 SKILL.md 中的指引生成或改写代码；具体技术栈以你的项目约束为准，在提示里写清框架与约束即可。
适用场景与注意¶
适合谁
- 需要快速产出可演示、可继续迭代的界面代码，且对视觉质量有要求的开发者。
- 经常用 AI 写前端，但希望默认避开「一眼 AI」审美的情况。
- 已在 Cursor、Claude Code、Codex 等支持 Skills 的环境中工作，并愿意用 SkillHub 管理技能包。
注意
- 来源为 community，质量与更新节奏取决于发布者；安装前可在 SkillHub 页面查看版本与说明。
- 评分、下载量会变动，以 SkillHub 页面或 API 条目为准。
- Skill 提供的是生成与美化方面的指引，不替代你们团队的设计系统、无障碍规范与性能预算；上线前仍需按项目做审查与测试。
- 若 CLI 搜索安装失败，可按官方文档回退到其他技能源，并确认
--dir路径正确。
结尾¶
「前端美化」把「有辨识度、生产级、少泛化 AI 审美」写进 Skill 定位，适合在搭页面、写组件和改样式时作为 Agent 的固定能力包。安装坐标：@user_c6f1a0f0/114514，官方入口：https://www.skillhub.cn/skills/user_c6f1a0f0/114514 ，API：https://api.skillhub.cn/user_c6f1a0f0/114514 。
