UIZZE · 让编码智能体产出更好的界面
给 Codex、Claude Code、Cursor、Copilot 一套 UI 设计技能与 PR 检查,可选用 80 万+ 真实界面参考。
- 源仓库
- uizze/uizze
- Star 数
- ★ 26
- 最近更新
- 今天
- License
- MIT
- 主语言
- JavaScript
- FA 评分
- 47/100 · 缺口较多
30 秒速览
- 运行形态
- 可在哪里用
- 兼容但需适配Codex · Claude CodeChatGPT(部分支持)
- 费用
- 有免费版,另有付费云服务
- 上手难度
- 低 · 几分钟可跑通
- 开始前需要
- 典型场景
- 在已有 SaaS 项目里重做计费设置页,希望当前套餐、支付方式和发票能一眼扫清的用户,用 ui-design 让智能体补齐空态、错误态和权限态。
- 不适合
- 希望完全离线、不联网拉取参考素材的团队
- 预算为零但需要实时 UI 参考检索的团队
- 只做后端、不涉及前端界面的项目
- 源码审查
- 47/100 · 缺口较多
这个 Agent 能做什么,适合哪些场景?
UIZZE 是一套面向编码智能体的 UI 设计工作流仓库,核心是三份免费技能:ui-design 负责从零构建或重做界面,anti-ui-slop 负责修掉千篇一律的初稿,ui-radar 负责围绕某个 UI 决策做参考调研。技能以 npx skills add 安装,也提供 uizze/uizze 的 GitHub 镜像路径,无需账号即可使用。可选的付费 MCP 服务提供 find_ui_references 与 find_ui_materials 两个工具,从 UIZZE 的 Web 与 iOS 界面库中检索全屏参考和字体、图标等素材。仓库还包含免费的 UI Slop Gate GitHub Action,在 PR 中检查改动的前端源码是否出现无效控件、缺失状态标记、硬编码颜色以及通用仪表盘套路组合。整体上它不替你写界面代码,而是把设计约束、参考素材和评审门禁交给智能体,界面仍按你项目自己的组件与设计令牌落地。
仓库提供三份技能包(skills/ui-design、skills/anti-ui-slop、skills/ui-radar),通过 npx skills add https://uizze.com --skill <名称> 安装到 Codex、Claude Code、Cursor 等环境,或用 npx skills add uizze/uizze --skill ui-design 从 GitHub 安装。安装后你把真实任务作为提示词交给智能体,技能会引导它梳理信息层级、复用既有组件与设计令牌、补齐 loading/empty/error/permission 状态,并在桌面与移动尺寸下自查修正。若连接付费 MCP,智能体可调用 find_ui_references 获取每次最多三条全屏参考,调用 find_ui_materials 获取最多三条字体、图标、动态图标或指定素材包;检索不到有用证据时则以现有工程继续。仓库另外提供 UI Slop Gate Action(uses: uizze/uizze@v1),在 pull request 中读取变更的前端源码,输出无效控件、缺失状态、硬编码颜色等发现,可按 fail-on: error 让检查失败,结果同时出现在代码旁与工作流摘要中。仓库还附带 Next.js 起始模板、Storybook 集成、Gemini CLI 与 Antigravity 插件等分发路径。
- 在已有 SaaS 项目里重做计费设置页,希望当前套餐、支付方式和发票能一眼扫清的用户,用 ui-design 让智能体补齐空态、错误态和权限态。
- 智能体刚生成的落地页一眼就是通用模板,需要产品专属文案与有意为之的排版时,安装 anti-ui-slop 做一轮收尾审查。
- 要设计带继承角色和受限操作的团队权限页,却不确定业界怎么处理,先连 MCP 检索真实产品参考再动手实现。
- 把 UI Slop Gate 加进前端仓库的 pull request 流程,在没有账号和密钥的前提下拦下无效按钮、硬编码颜色等问题。
- 在 Claude Code、Cursor 或 GitHub Copilot 里按示例做第一块界面,用 examples/first-screen.md 的计费页流程验证技能是否生效。
- 做 iOS 引导与账号恢复流程时,参考仓库给出的原生 SwiftUI 起始示例与浏览器原型。
如何安装或部署这个 Agent?
安装免费 UI 设计技能(无需账号,技能内部不含 MCP 连接也能工作):
npx skills add https://uizze.com --skill ui-design只想做一次针对性的收尾审查时,改装 anti-ui-slop:
npx skills add https://uizze.com --skill anti-ui-slop如果更习惯从 GitHub 安装,可用镜像路径:
npx skills add uizze/uizze --skill ui-design要把 UI Slop Gate 加到 pull request 流程,在仓库工作流中加入:
permissions:
contents: read
steps:
- uses: actions/checkout@v7
with:
fetch-depth: 2
persist-credentials: false
- uses: uizze/uizze@v1
with:
fail-on: error可选付费 MCP 需要先在 UIZZE 官网创建 agent token,再按 integrations/mcp 的指引接入。
如何使用这个 Agent?
装好 ui-design 后,直接把真实任务交给智能体,让它复用你项目的组件和设计令牌:
Use ui-design to improve our billing settings page. Make the current plan,
payment method, and invoices easy to scan. Reuse our components and design
tokens. Include loading, empty, error, and permission states. Inspect the
result at desktop and mobile sizes and fix what breaks.需要真实产品参考时,在连接 MCP 后让智能体先检索再实现:
Find references for a team permissions screen with inherited roles and
restricted actions. Explain which decisions would help our workflow,
then implement them using our existing components and visual language.要在本地复现 PR 检查,可参考 examples/pull-request-check.md 中的本地命令与发现示例。
这个 Agent 有哪些优点和局限?
- 免费技能不需要账号或 MCP 连接就能使用,接入成本只有一条 npx 安装命令。
- 同时覆盖生成(ui-design)、修稿(anti-ui-slop)和调研(ui-radar)三段流程,而不是单一提示词。
- UI Slop Gate 以 GitHub Action 形式运行,无需账号、API key 或上传源码即可在 PR 中给出发现。
- 跨工具支持范围明确:Codex、Claude Code、Cursor、GitHub Copilot,以及 Cline、Gemini CLI、Antigravity、VS Code、Windsurf、Zed 等 MCP 客户端。
- 实时参考与素材检索依赖可选的付费 MCP,免费路径拿不到 80 万+ 界面库的实时检索能力。
- 技能本身不产出成品界面,效果取决于你的项目是否已有组件与设计令牌,以及所用模型的能力。
- UI Slop Gate 是保守的源码静态检查,README 明确建议配合渲染检查与常规无障碍、可用性测试,不能当作完整质检。
- 技能包保留 Apache-2.0 许可与第三方声明,与仓库本体 MIT 许可不同,再分发前需要先看 LICENSING.md。
这个 Agent 与同类方案有什么区别?
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| UIZZE · 让编码智能体产出更好的界面 当前 | 47 · 缺口较多 | Agent 插件 / 技能免费版 + 付费版 | ★ 26 | 今天 | JavaScript | Codex · Claude Code |
| Open Design | 45 · 缺口较多 | 桌面应用免费 + 模型费 | ★ 98k | 3 天前 | TypeScript | Codex · Claude Code · OpenAI API · Claude API |
| Superdesign 设计技能 | 43 · 缺口较多 | Agent 插件 / 技能免费版 + 付费版 | ★ 602 | 1 个月前 | JavaScript | Codex · Claude Code |
| 设计师技能包 | 38 · 缺口较多 | Agent 插件 / 技能免费 | ★ 2.8k | 21 天前 | Markdown | Claude Code |
FollowAgents 如何评估这个 Agent?
查看各维度的扣分理由
信任维度:GitHub Action 工作流显式声明 permissions: contents: read,checkout 使用 persist-credentials: false,且测试覆盖了路径穿越与符号链接逃逸(withinWorkspace、manifestInsideWorkspace),说明最小权限与边界防护有实际代码支撑,故 least_privilege 给 2。但 README 主推的 npx skills add https://uizze.com 与付费 MCP 需要创建 agent token,仓库内没有说明该 token 的权限范围、存储位置或撤销方式,用户确认与数据流透明度只能给 1。敏感数据处理方面,README 声称 Action 无账号、无 API key、无源码上传,但 MCP 侧会向 uizze.com 发送设计查询,仓库未提供数据保留或传输说明,故 1。依赖安全方面,CI 固定了 actions 的 commit SHA 与 Node 版本,但 npx [email protected] 与 npm 依赖未见锁文件或审计证据,故 1。外部影响与回滚:Action 只读检查、fail-on 可配置,但仓库未描述误报时的回滚或豁免流程,故 1。来源归属:LICENSE 与 LICENSING.md 明确 MIT 与 Apache-2.0 的划分,README 也标注了第三方许可,故 2。
可靠性维度:CI 中通过 sha256sum 校验与 diff --recursive 保证 skills/anti-ui-slop 与各插件目录副本一致,并校验 SKILL.md 的 name 字段,自洽性有实际机制支撑,给 2。依赖可用性方面,工作流依赖外部域名 uizze.com 的 skills 安装端点与 GitHub MCP Registry,仓库内没有离线或镜像回退方案,故 1。失败信息方面,CI 脚本有明确的错误输出(如 stale claim 提示),但产品侧(skill 与 MCP 工具)的失败提示在给定文件中没有体现,故 1。
适配性维度:README 明确列出 Codex、Claude Code、Cursor、Copilot、Cline、Gemini CLI、Antigravity、VS Code、Windsurf、Zed 等环境及各自入口,受众与场景覆盖充分,给 2。能力边界方面,README 明确区分免费 skill(无需账号)与付费 MCP(需 token),并说明 Action 是保守的源码检查、需配合渲染检查与无障碍检查,边界表述清晰,给 2。触发精度方面,skill 的触发条件、MCP 工具的调用时机在给定文件中没有具体规则描述,故 1。环境适配方面,提供了 Next.js starter、Storybook 集成与多客户端 MCP 指南,给 2。
约定维度:README 结构清晰,分安装、MCP、环境、PR 检查、示例等章节,信息架构给 2。安装说明具体到命令与 npx 用法,给 2。命名稳定性方面,CI 强制校验 skill 名称与目录一致性,且 skills 目录为规范来源、插件目录为镜像,给 2。示例与 FAQ 方面有 agent-workflows、first-screen、pull-request-check 等示例,给 2。已知局限仅一句“保守的源码检查”,未系统列出限制,故 1。许可证明确(MIT + Apache-2.0 映射),给 2。版本与变更日志在给定文件中没有 CHANGELOG,故 1。维护责任方面,SECURITY.md 提供联系邮箱,但发布者身份未经验证、无维护承诺或更新路径说明,故 1。
有效性维度:输出可用性方面,skill 产出设计改进、Action 产出 PR 内联发现与工作流摘要,形式具体可用,给 2。边际价值方面,UI 设计 skill 与 PR 检查在通用编码代理之外确有增量,但“800,000+ 屏幕”等价值主张依赖付费 MCP,免费部分与通用提示词差异有限,故 1。成本收益方面,免费 skill 无账号成本低,但付费 MCP 的价格、配额与替代方案在仓库中未说明,无法评估收益比,故 1。
可验证性维度:claim_traceability 方面,README 的多数主张(800,000+ 屏幕、CI 徽章、MCP 注册表)指向外部站点或徽章,仓库内缺少可核对的原始数据或基准,故 1。cross_source_corroboration 方面,CI 校验了 skill 副本一致性与 JSON 有效性,属于仓库内自证,但对外部主张没有独立来源交叉印证,故 1。fact_inference_separation 方面,README 将营销性表述(“anti-ui-slop”“better UI”)与事实性说明混排,未明确区分实测结果与宣传,故 1。
- 付费 MCP 需要创建 agent token,但仓库未说明该 token 的权限范围、存储位置、撤销方式与数据保留策略,接入前应自行确认。
- README 中“800,000+ 真实网页与 iOS 屏幕”等主张指向外部站点,仓库内无可核对的原始数据或基准,不应据此推断质量。
- 发布者身份未经验证,维护责任与更新路径不明确;SECURITY.md 仅提供一个邮箱,无响应时限承诺。
- CI 依赖外部域名 uizze.com 的 skills 安装端点与 GitHub MCP Registry,缺少离线或镜像回退方案。
- 仓库内未见 CHANGELOG 或版本历史,版本兼容性需自行核实。
- GitHub Action 被描述为保守的源码检查,不应替代渲染检查、无障碍与可用性测试。