前言¶
用 AI 写页面时，常见结果是布局能跑、样式却像模板：配色雷同、间距随意、组件堆砌。自己反复改 prompt 往往只换来换字体换色，很难系统性逼近「可上线」的视觉与结构。
下面介绍 SkillHub 上的社区 Skill「宇文测试12」（坐标 @user_173d434e/yw-test-1）。它面向 Web 组件、整页与小型应用的前端产出，强调有辨识度、可投产的设计质量，并明确避免千篇一律的 AI 审美。先做定位与能力核对，再说明安装与在 Agent 里怎么触发。
这是什么¶
宇文测试12 是 SkillHub 分类 dev-programming 下的社区来源（community）Skill，当前版本 1.0.1，由发布者 user_173d434e 维护。
官方简介将其定位为：在用户需要构建 Web 组件、页面、制品、海报或应用时启用——例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 做样式与美化；目标是生成有创意、打磨过的代码与界面设计，并避开泛化的 AI 风格。
SkillHub 页面显示：评分 100000，下载 764 次，安装 1 次；标签 requires_api_key=false，即按页面信息无需额外 API Key。
- SkillHub 展示页：https://www.skillhub.cn/skills/user_173d434e/yw-test-1
- API 资源地址：https://api.skillhub.cn/user_173d434e/yw-test-1
核心功能¶
依据官方简介，可核实的能力边界如下：
- 前端界面与代码生成：覆盖组件、单页、多页应用及 HTML/CSS 布局等常见交付形态。
- 设计质量导向：强调 production-grade、high design quality，而非仅「能渲染」。
- 场景触发明确：在用户提出建站、落地页、仪表盘、React 组件、海报类制品或 UI 美化时，由 Agent 按 Skill 指引组织实现。
- 审美约束：输出侧明确要求避免 generic AI aesthetics，减少紫渐变、千篇一律卡片等常见 AI 界面套路。
该 Skill 遵循通用 SKILL.md 格式；具体实现细节以安装包内 SKILL.md 为准，本文不展开未在官方页面披露的脚本或配置项。
安装与启用¶
方式一：让 AI 按 SkillHub 文档安装¶
SkillHub 页面提供的安装提示为：先阅读官方安装说明，再安装指定坐标。
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_173d434e/yw-test-1`。
将上述内容发给当前 Agent，由其在联网环境下按文档完成 CLI 检查与安装。
方式二：SkillHub CLI¶
若本机已有 skillhub，安装时需用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。
1、检查 CLI：
command -v skillhub && skillhub --version
2、未安装时，可按 SkillHub 安装文档执行完整安装（文档中的推荐命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
3、安装本 Skill 到 Cursor 的 skills 目录（路径来自 SkillHub 安装文档中的常用说明）：
skillhub install user_173d434e/yw-test-1 --dir ~/.cursor/skills/
其他客户端目录以 https://skillhub.cn/install/skillhub.md 为准，例如 Claude Code 为 ~/.claude/skills/，Codex 为 ~/.codex/skills/ 或项目下的 .agents/skills/。安装后若 Agent 未立即加载新 Skill，可按所用客户端说明重启或刷新技能列表。
典型用法¶
官方未在展示页提供独立代码仓库示例；用法以简介中的触发条件为准。在已启用该 Skill 的对话中，用自然语言说明交付物与审美要求即可，例如：
- 「用 React 做一个产品分析仪表盘，信息层级清晰，不要常见 AI 渐变模板风。」
- 「写一组可复用的表单与按钮组件，HTML/CSS 即可，间距与字体要有明确的设计系统。」
- 「做一版活动落地页布局，需要海报级视觉，同时代码结构便于后续接真实数据。」
Agent 会在匹配「组件 / 页面 / 应用 / 美化 UI」等意图时引用 Skill 中的设计与实现约束。具体生成栈（纯 HTML、React 等）由你在需求里写明；Skill 简介所列示例类型均可作为范围参考。
适用场景与注意¶
适合谁
- 需要快速产出可演示、视觉完成度较高的前端界面，又不想每次手写长篇 design prompt 的开发者。
- 做落地页、仪表盘、营销页、组件库雏形，且希望减少「AI 默认审美」的团队或个人。
限制与注意
- 来源为 community，质量与更新节奏依赖发布者；使用前可在 SkillHub 查看版本 1.0.1 与下载量等信息。
- 页面标注 requires_api_key=false，不表示运行生成代码时无需任何外部服务——若你的项目依赖第三方 API，仍需自行配置密钥与环境。
- 设计取向由 Skill 文案定义，若品牌有严格设计规范，应在对话中补充色板、字体与组件规范，与 Skill 输出对齐。
- 评分、下载、安装次数来自 SkillHub 页面统计，会随时间变化，引用时以官网为准。
结尾¶
宇文测试12 把「高设计质量、避免泛化 AI 界面」写进 Skill 职责，适合作为前端界面类任务的默认增强包。需要安装或查阅详情时，以 SkillHub 展示页与安装文档为准：
https://www.skillhub.cn/skills/user_173d434e/yw-test-1
