anti-ui-slop — 專治 AI 生成千篇一律 UI 的 Skill

• URL: https://mp.weixin.qq.com/s/2FZltCAN1Chzf62rr7B3YQ
• Date Saved: 2026-09-01
• Source: WeChat (小岛AI)
• Tags: ai-tools, design-tools
• Repo: https://uizze.com/ (官方，Skills.sh 60.2 萬次安裝)

Summary

小岛AI 分析 anti-ui-slop — 一個免費 UI Skill，解決 AI coding agent (Claude Code / Codex / Cursor) 生成頁面千篇一律的問題。Skills.sh 上 601.6K 次安裝。

核心問題

• 讓 AI agent 做 UI，容易交出深色背景、紫色漸變、四張數據卡片的「模板臉」
• 功能不一定錯，但每個產品都長同一張臉
• 堆風格詞 (極簡、玻璃擬態、Bento Grid) 反而加劇同質化

anti-ui-slop 的做法 — 三道門

1. 先讀產品: Agent 先讀產品 brief、現有頁面、組件、設計 Token，再動手寫頁面。產品語境優先，Skill 只補空位
2. 只選一套 Playbook: 新頁面/產品後台/精修/簡化/審查/iOS 分開，一次最多選一個，避免規則互相打架
3. 看真渲染: 在 390px 和 1440px 渲染一次，只修可觀察的問題

安裝

npx skills add https://uizze.com/ --skill anti-ui-slop

免費 vs 付費

• 免費: 產品優先 + 單一 playbook + 完整狀態 + 渲染檢查流程
• 付費 ($9/月或 $99 一次性): 80 萬+ Web/iOS 參考屏幕、3.5 萬 UI 元素、1.4 萬設計系統，MCP 搜索

作者觀點

• 60 萬安裝證明大家被模板臉折磨得不輕，但不代表裝上就變好看
• GitHub 鏡像只有 15 Star 卻 431 次提交，官方域名包才是權威版本
• 最值得學的不是參考圖庫，而是「先讀產品→只選一套→看真渲染」的工作流
• 不適合: 只改邊距/文案、團隊已有完整設計規範、期待憑空產出品牌策略