前言¶
用大模型写页面时，常见结果是布局雷同、配色偏「AI 味」、组件堆叠但缺少整体设计感。你要的是能直接进仓库或演示的界面，而不是再花半天改样式。下面介绍 SkillHub 上的社区 Skill wwww1（坐标 @user_173d434e/yuwen2），它面向「高设计质量、可上线水准」的前端产出，并在说明中强调避免千篇一律的 AI 审美。
这是什么¶
wwww1 是一条基于通用 SKILL.md 格式的 Agent 指令包：安装后，Agent 在相关任务中会按 Skill 内的工作流与约束生成前端代码与视觉方案。
- 维护方：社区发布者
user_173d434e，来源标注为 community。 - 分类：
dev-programming。 - 当前版本：1.0.1（以 SkillHub 页面为准）。
- 能力定位（官方简介原文）：Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
标签 requires_api_key=false，表示按 SkillHub 元数据无需额外 API Key 即可使用 Skill 本身。
核心功能¶
结合官方简介，可核实的能力边界如下：
- 页面与应用类产出：网站、落地页、仪表盘、海报类 artifact，以及完整小型 Web 应用的前端实现思路与代码。
- 组件与布局：React 组件、HTML/CSS 布局，以及对已有 Web UI 做样式与美化。
- 设计取向：强调 production-grade、polished，并明确写出要避免 generic AI aesthetics——即把「辨识度」写进 Skill 目标，而不是只追求能跑通。
SkillHub 页面上未单独列出子命令或脚本清单；实际行为以安装后的 SKILL.md 为准。
安装与启用¶
官方页面给出的安装方式是：让 AI 参照 SkillHub 安装文档，安装坐标 @user_173d434e/yuwen2。文档地址为 https://skillhub.cn/install/skillhub.md。
1、安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 CLI：
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、安装 wwww1 到当前 Agent 的 skills 目录¶
文档要求安装时必须用 --dir 指向当前 Agent 识别的 skills 目录，否则默认落在 ./skills/ 可能不会被加载。
在 Cursor 中，常用路径为：
skillhub install user_173d434e/yuwen2 --dir ~/.cursor/skills/
其他客户端路径（摘自同一安装文档，便于对照）：
- Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/ - Windsurf：
~/.codeium/windsurf/skills/或.windsurf/skills/
安装后按你所用客户端的要求重启或刷新 Agent，使新 Skill 被索引。
典型用法¶
官方未提供独立示例仓库；用法可从简介中的触发条件直接推导为可复现的对话方式：
- 确认 Skill 已安装到对应
skills目录并完成加载。 - 在任务描述中写明产物类型（例如 landing page、dashboard、React 组件）、技术栈偏好（如纯 HTML/CSS 或 React）、品牌或风格约束（配色、字体、信息层级）。
- 让 Agent 生成可运行的代码与样式；若需迭代，在同一对话中要求调整版式、动效或组件拆分，Skill 会持续按「高设计质量、避免通用 AI 审美」的目标约束输出。
示例提示（示意，非官方模板）：
使用已安装的 wwww1 skill，做一个 SaaS 产品落地页：深色主题、明确的主 CTA、三栏特性区、移动端优先。请输出完整 HTML/CSS（或 React + Tailwind，请注明依赖）。
适用场景与注意¶
适合谁
- 需要快速出稿的前端开发者、独立开发者或全栈工程师，希望 Agent 默认站在「上线水准 + 有设计感」一侧，而不是只生成骨架页。
- 做海报类 artifact、仪表盘、营销页等视觉权重较高的界面时，与 Skill 简介中的示例场景一致。
限制与注意
- 社区来源（community），质量与更新节奏依赖发布者；使用前可在 SkillHub 查看版本与说明是否满足项目要求。
- SkillHub 元数据：评分 100000，下载 789 次（抓取时统计）；安装数在页面上为 0，仅作参考，不代表 Skill 内容无效。
- 生成代码仍需人工做无障碍、性能、安全与业务逻辑审查；Skill 侧重界面与设计质量，不替代工程化 checklist。
- 若 CLI 在受限网络环境执行，需按安装文档说明在允许联网的环境下完成安装。
结尾¶
wwww1 把「高设计质量、避免通用 AI 审美」写进 Skill 目标，适合在 Cursor 等支持 Skills 的 Agent 里承担前端界面与美化类任务。安装时记住 --dir 指向正确的 skills 目录，并按 SkillHub 安装文档 操作。
- SkillHub 页面：https://www.skillhub.cn/skills/user_173d434e/yuwen2
- 官方 API 地址（线索中的资源入口）：https://api.skillhub.cn/user_173d434e/yuwen2
