最近有一个总结各大网站审美的 skill 很火，但是想不起名字了，于是问了一下 AI，相同问题，豆包给出的是一个 70 多 stars 的项目，但是 Gemini 给出的是 64k  stars的项目。

豆包：

Gemini：

安装

UI 项目地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

本项目地址：https://github.com/zentrix566/test-ui-skills

安装方法详情页有很多，因为我用的 claude，所以安装选择  uipro init --ai claude ：

# 1. 全局安装 CLI
npm install -g uipro-cli

# 2. 进入你的项目目录
cd /path/to/your/project

# 3. 为你的 AI 助手安装（选择一个）
uipro init --ai claude      # Claude Code

安装完成后在项目目录会增加 skill：

目录主要内容：

• 完整的 SKILL.md 设计指南（14KB）- 包含 161 条推理规则，67 种 UI 样式，99 条 UX 指南
• data/ 目录 – 各种 CSV 数据库（样式、颜色、字体、图表等）
• scripts/ 目录 – Python 搜索脚本用于设计系统生成

使用

现在想做一个 比如我是一个个人导游，生成网站，吸引外国人来找我旅游 的网站，AI 给出以下 Prompt：

请帮我设计一个个人导游网站的 UI。风格参考 Linear.app 的极简美学。 使用 Next.js + Tailwind CSS + Lucide Icons。 配色方案： 深蓝色背景，白色文字，金色作为点缀。 要求： 首页需要一个高对比度的 Hero 区域，三个清晰的服务项卡片（带微弱发光边框），以及一个看起来非常专业的定价表格。

再把提示词告诉 claude，最终生成这样的网站：

于是很自然有这样的问题，假如不引入 skill ，使用 AI 原始的能力，理论上是生成不了这样的网站的，因为有很多细节没有做调优，skill 在质量和专业度做到比 ai 自带技能强很多：

刚才设计中 skill 实际发挥的作用，要求：

“风格参考 Linear.app 的极简美学。配色：深蓝色背景，白色文字，金色作为点缀。”

skill 做到了：

1. 确认了极简美学应该是什么样的（干净边框、少即是多、足够留白、高对比度）
2. 推荐了正确的间距比例和排版层次
3. 提醒了可访问性检查（深蓝色背景 + 白色文字对比度正好符合 4.5:1）
4. 确保了卡片的发光边框效果正确实现
5. 指导了定价表格的专业呈现方式

所以最终效果会比没有 skill 要更专业、更符合 Linear 风格、细节更到位。

现在 skill 安装的目录是在项目里，以后只要在这个项目目录，随便说一句跟页面设计有关的，就会自动调用 skill 的设计规范。例如：帮我设计一个精美的登录页面，claude 会自动调用 ui skill 进行设计。当skill 安装到 全局目录 .claude\skills\ui-ux-pro-max\ 时，以后所有的项目设计有关的可以自动自动调用这个技巧完成设计。