GitHub 热榜观察 · 26.11.5 · 2026-11-07 · 这期 4 个

你有没有发现，AI 写出来的页面，越来越像同一个模子刻的。

紫色渐变、玻璃卡片、标题前挂个 emoji、按钮圆角忽大忽小。功能都能跑，但放出去，别人一眼就知道是 AI 做的。

今天这 4 个 UI skill，专门给编程助手补审美。它们不教你怎么写 CSS，而是告诉 Agent：什么样的页面算好看，先改哪里，改到什么程度算完。

先看个真事。这张图是 unslop 官方演示：同一块后台，从紫渐变一路改成有自己性格的界面。

先说人话：skill 是什么

把 skill 理解成一包给 Agent 看的工作手册。

平时你让 Agent 做页面，它靠通用经验自由发挥。装上 skill，相当于在它桌上放了一本《这个活该怎么干》。它每次动手前，会先翻这本手册。

所以 skill 不是软件，不用编译，也不用改你的项目代码。它就是一个文件夹，里面装着说明文档、模板、脚本，有的还带检查工具。

装法有三种：让 Agent 代装、走插件市场、自己敲命令。下面按省事程度排。

第一种：让 Agent 代装。 把仓库地址和这句话发给它：

帮我装这个 skill：<仓库地址>按它 README 的安装说明装到全局，装完告诉我：1. 装到了哪个目录2. 目录里有哪些文件3. 新开会话后怎么调用它不要改我项目里的代码。

它会自己读 README、建目录、复制文件。你只要看它最后报的路径对不对。只装你信得过的仓库——Agent 会真的在你电脑上跑命令、写文件。

第二种：走插件市场。 Claude Code 用户最省事。这期有三个能走插件市场：

/plugin marketplace add pbakaus/impeccable/plugin marketplace add Leonxlnx/taste-skill/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

加完市场，再在 /plugin 里点安装。taste-skill 和 ui-ux-pro-max 也可以直接：

/plugin install taste-skill@taste-skill/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

第三种：自己敲命令。 每个 skill 命令不一样，后面四个小节各给一份。

默认安装在哪儿

Windows 上，~ 就是 C:\Users\你的用户名。比如 Claude Code 的全局目录是：

C:\Users\你的用户名\.claude\skills\

Qoder 国内版有的版本用 .qoder-cn，以你机器上实际生成的目录为准。拿不准就让 Agent 报路径。

全局和项目内的区别很简单：装全局，所有项目都能用；装项目内，只对当前这个仓库生效。新手先装全局。

装完怎么确认，别装了个寂寞

很多人装完就以为好了。skill 没加载、装错目录、版本太旧，都会让你以为它在工作，实际上 Agent 根本没读到。

按三步确认。

第一步，新开一个会话。 大多数工具在会话启动时加载 skill。装完不重开，它可能还看不见。

第二步，让 Agent 拿证据。 别问“你装了吗”，它可能顺着你回答。让它报目录、列文件、读说明书：

你现在能用哪些 skill？把名字列出来。unslop 装在哪个目录？把那个目录里的文件列给我。读一下它的 SKILL.md 第一段，告诉我它什么时候触发。

能说出目录、能列出文件、能读出触发条件，才算真装上了。

第三步，让它干一件小事。

用 unslop 检查当前登录页，先只列问题，不要改代码。

它按 skill 的流程先审计、再给方向，说明加载成功。上来就改代码，多半没读到 skill。

自己看目录也行。Windows 打开 PowerShell：

dir $env:USERPROFILE\.claude\skills

Mac 或 Linux：

ls ~/.claude/skills

把 .claude 换成你用的工具对应的目录。

1. AI 界面去味：unslop

★ 10,780 ｜ JavaScript ｜ CC BY 4.0 ｜ 建库 2026-10-29 ｜ 最近推送 2026-11-01 仓库：https://github.com/heydamir/unslop

它先找出页面里的“AI 味”，再按设计师的红线一轮轮改。

你大概遇到过这种情况。让 AI 帮忙搭一个后台，功能都通了，页面也能用。但一眼看上去，就是“那种 AI 做的”。

侧边栏怎么都对不齐，卡片圆角一会儿大一会儿小。标题旁边挂着几个 emoji，主色是熟悉的紫蓝渐变。想改，又不知道从哪下手。

unslop 的做法是先审计，再动手。它会把页面里的 slop（可以理解成“AI 味”）一条条列出来：紫色渐变、发光、emoji 标签、喊口号的文案、不均匀的间距。每一处在哪，都给你标出来。

然后它根据你的产品定一个方向。角色、世界观、哪一两个地方承载颜色，还有一个签名细节。方向确认后，才按顺序一轮轮改：间距、配色、图标、文案、字体、布局、细节、视觉、动效。

它不挑技术栈。Next.js、React、Vue、Svelte、Tailwind、纯 HTML/CSS 都能改。只有一条链接的线上页面，也能改。它甚至能顺手生成一段“改造过程”视频，方形，10 秒以内，发社交媒体用。这需要本机装 Playwright 和 ffmpeg。

如果页面已经不错，它会直接告诉你。然后只给几条小修小补的建议，不会硬重做。

怎么喊它干活。 记住一句就够：

/unslop this dashboard

不想记命令，就用大白话：

用 unslop 把当前登录页的 AI 味去掉。先列问题，等我确认方向再改。

Codex 用户把 /unslop 换成 $unslop。或者干脆用自己的话说，Agent 会自动认领这个 skill。

安装。

git clone https://github.com/heydamir/unslopmkdir -p ~/.claude/skillscp -r unslop/skills/unslop ~/.claude/skills/

Codex 用户可以走它自带的安装器：

$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

或者手动复制到 ~/.agents/skills/。

**我的判断：**适合页面已经能跑、但你觉得“就是不好看”的人。它最强的是改现有页面，不是从零做设计。连信息架构和产品定位都没定的项目，先别急着调间距。那属于“先想清楚要什么”，不是“把已有页面救回来”。

另外，它需要生成图片时，会调用 fal、Replicate、OpenAI Images 这类付费服务。每次生成前，它会给你看提示词并征得同意，不会偷偷扣钱。

2. 把“高级一点”变成具体动作：impeccable

★ 104,866 ｜ Rust ｜ Apache-2.0 ｜ 建库 2025-11-16 ｜ 最近推送 2026-11-07 仓库：https://github.com/pbakaus/impeccable

它给 Agent 一套设计词汇，让“高级点”有 24 个命令。

跟 AI 提需求，最容易说出口的是“再高级一点”“大气一点”“有质感一点”。这些话对人都不一定有用，对 Agent 更等于没说。

它只能猜。猜出来的，往往就是那套安全但无聊的默认样式：Inter 字体、紫蓝渐变、卡片套卡片。

impeccable 把这类模糊要求拆成了命令。bolder 放大安全的设计，quieter 收住太吵的页面。distill 删掉不需要的东西，typeset 修字体和层级，layout 修间距和节奏。

想验收就用 critique 按可用性原则打分；或者用 audit 查无障碍、性能、主题和响应式。问题会按 P0 到 P3 排序，P0 最严重，P3 最轻。

它内置 62 条写死的规则，专门抓 AI 味的特征。这部分不调用 LLM，也不需要 API key。

第一次用，先跑一次 /impeccable init。它读一遍代码，问几个它猜不到的问题，写出一份 PRODUCT.md。后面的命令都基于这份文件。

/impeccable init/impeccable critique the pricing cards

它支持 Claude Code、Cursor、Codex、Copilot、Gemini CLI、Qoder 等一长串工具。Codex 用户把 /impeccable 换成 $impeccable。如果你有一个跑着的开发服务器，/impeccable live 会打开一个浮层。点选页面元素、切换变体，选中的方案直接写回源码。

怎么喊它干活。

用 impeccable 的 critique 给这个页面打分，按 P0 到 P3 列出要改的地方，先不要动代码。

或者指定一个动作：

/impeccable polish settings/impeccable quieter the landing page

安装。

npx impeccable install

装完重开工具，再跑 /impeccable init。它检测到你的工具后，会问装项目内还是全局。

Claude Code 也可以走插件市场：

/plugin marketplace add pbakaus/impeccable

**我的判断：**适合已经有界面、想让 AI 帮你迭代的人。它最强的是“改”和“审”，不是“从零发明一个视觉概念”。官方文档也承认，新页面是更难的用法。

两个要留意。live 模式里点“应用”时，如果没有聊天会话接管，它会直接调用 codex 或 claude，而且关掉审批和沙箱。在陌生仓库里用之前先看清楚。它默认会记录匿名统计（哪个风格被看了、被选了），不传代码和项目名。介意的话，装完先跑 npx impeccable telemetry off。

装完如果怀疑没配好，跑：

npx impeccable doctor

它会查过期的上下文文件、没用上的设置和坏掉的 hook（自动检查）。

3. 从零做站，先别让 Agent 走模板：taste-skill

★ 111,252 ｜ JavaScript ｜ MIT ｜ 建库 2026-02-19 ｜ 最近推送 2026-11-05 仓库：https://github.com/Leonxlnx/taste-skill

它把“做一个公司官网”拆成风格、版式、素材、验收四步。

让 Agent 从零写一个落地页，默认结果通常是：一个居中的大标题、两三个圆角卡片、一排灰色 logo、一个渐变按钮。能用，但放出去跟别人的站撞脸。

问题不在模型不会写 CSS。是没人告诉它“这是什么生意、该长什么样”。

taste-skill 先判断业务类型：软件、游戏、科技、产品、服务、场所。分类不同，后面的规则完全不同。

它会发一套配色和 Google Fonts 字体搭配，再从 11 种首屏布局里挑一个。页面按“一屏一节”来搭，左右边距对齐，导航和页脚都固定。

软件和科技类页面，会用真实的产品 UI 片段、品牌图标和图表。场所、店铺、酒店这类，会用真实照片和排版，不硬上 WebGL。

只有软件、科技、游戏类才允许加着色器、滚动动画和 3D 效果。最多同时开四个 WebGL 效果，手机和不支持动效的环境会自动降级。

最后它会用无头 Chrome（不弹窗口的浏览器）跑一遍检查，宽度有四个：1440、1024、768、390。抓的是空图、坏掉的着色器效果、对比度不够、列不对齐、占位文案这些。

它的工具是 Node 22+ 的普通脚本，不装额外东西，也不需要 API key。本机要有 Chrome、Edge 或 Chromium。

怎么喊它干活。 它没有固定命令，直接把活说清楚：

用 taste-skill 做一个精品咖啡店官网。先判断业务类型，再给页面方案，最后用浏览器检查一遍。

想重做现有页面也行：

用 taste-skill 重做这个公司首页。保留现有文案，先出方案，我确认后再写代码。

安装。

npx skills add https://github.com/Leonxlnx/taste-skill \ --skill “design-taste-frontend”

Claude Code 也可以走插件市场：

/plugin marketplace add Leonxlnx/taste-skill/plugin install taste-skill@taste-skill

**我的判断：**适合要做公司官网、产品落地页、活动页，且希望一次成型的人。它把“审美”变成了可执行的规则，适合没有专职设计师的小团队。

后台管理界面、复杂 Web App、已有设计系统的项目别用它。它更适合“一屏一个信息”的展示页。如果你只是想把一个按钮改好看，装它属于杀鸡用牛刀。

4. 先查设计系统，再让 Agent 写：ui-ux-pro-max

★ 146,202 ｜ Python ｜ MIT ｜ 建库 2025-11-30 ｜ 最近推送 2026-11-05 仓库：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

它像一个设计系统的搜索引擎：先给行业、风格、配色、字体，再让 Agent 动手。

最难的一步往往不是写代码，是决定“这个产品该长什么样”。你说不出具体风格，Agent 就只能给你默认答案。

ui-ux-pro-max 想解决的就是这一步：把设计决策做成一个可以查的库。

它的库里有 192 条行业推理规则、80 种可搜索的 UI 风格、192 套配色。还有 74 组字体搭配、25 种图表类型、22 个技术栈和 119 条 UX 指南。

你描述产品，它输出一套“推荐设计系统”。里面有页面模式、风格、颜色、字体、关键效果、要避免的反模式，还有上线前检查清单。

它还有一个 Design System Generator。它会并行查产品类型、风格、配色、落地页模式和字体，再用规则引擎过滤。

怎么喊它干活。 装好之后，正常提需求就行，它会在 UI/UX 任务里自动激活：

用 ui-ux-pro-max 给一个牙科诊所的预约系统做设计系统。先给风格、配色、字体和页面结构，再写代码。

想让它先查再改：

用 ui-ux-pro-max 检查这个 dashboard 的配色和字体，给出具体的替换建议，不要直接改代码。

安装。

npm install -g ui-ux-pro-max-cliuipro init --ai qoder

把 qoder 换成 claude、cursor、codex 就是对应工具。想装到全局，在命令后加 --global；官方示例里 Claude Code、Cursor 都是这么装的。

Claude Code 也可以走插件市场：

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

它的搜索脚本要 Python 3.x，只走标准库，不联网。

**我的判断：**适合从零开始做产品、又请不起设计师的人。也适合你在几个方向里快速挑一个。它给的是一个靠谱的起点，不是最终答案。

团队已经有设计系统、有品牌规范，再让 AI 生成一套只会打架。它适合“没有方向”的阶段，不适合“已经有方向、需要执行”的阶段。

四句话，照抄就能喊它干活

记不住命令没关系。把下面四句存下来，换掉产品名就能用。

• 页面已经能跑但丑：“用 unslop 检查当前页面，先列 AI 味问题，不要改代码。”

• 想改但说不清：“用 impeccable 的 critique 给这个页面打分，按 P0 到 P3 排序。”

• 从零做官网：“用 taste-skill 做一个「你的行业」的官网，先分类再出方案。”

• 连方向都没有：“用 ui-ux-pro-max 生成一套设计系统，包含风格、配色、字体和页面结构。”

怎么选

• 页面已经能跑但丑：先上 unslop

• 想改但说不清要什么：用 impeccable 的 critique 和 polish

• 从零做官网或落地页：用 taste-skill

• 连风格方向都没定：先让 ui-ux-pro-max 出一套方向