Uizze

UIZZE · 为编码 Agent 打造更出色的 UI

构建符合你产品风格的界面。 为 Codex、Claude Code、Cursor 和 GitHub Copilot 提供专注的 UI 工作流，还可选用来自 800,000 多个真实网页和 iOS 屏幕的参考素材。

探索 UIZZE → · 试用工作流 · 连接 MCP · 添加 PR 检查

看看 UIZZE 前后的效果

20 秒移动端 UI 对比：左侧为未使用 UIZZE，右侧为使用 UIZZE。

https://github.com/user-attachments/assets/d7ee2275-8e7f-474c-a2e4-b45759b86996

用 UIZZE 构建你的下一个屏幕 →

在 Claude Code、Cursor 或 Copilot 中尝试构建账单页面：安装、复制需求说明、连接可选的参考搜索，然后检查结果。

从下一个屏幕开始

安装免费的 UI 设计技能：

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

然后给你的 Agent 一个实际任务：

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 连接即可使用。从现有项目开始：让你的需求说明、组件和设计系统指导工作。

你的任务	免费技能	可以提出的要求
使用 Uizze 构建和改进 UI/UX	uizze-ui	Uizze UI Pack：结合你的项目开展工作，并在适用时使用 Uizze 的完整工具包
构建或重新设计界面	ui-design	清晰的层级、可用的交互，以及用户需要的各种状态
修复千篇一律的初稿	anti-ui-slop	符合产品特色的内容、精心设计的布局和最终检查
研究 UI 决策	ui-radar	专注的参考工作流；连接付费 MCP 以实时检索
重现图片或截图	image-to-ui	1:1 实现，并在相同视口下对照参考进行检查

如需专注的审查，请改为安装 anti-ui-slop：

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

UI Taste 和 iOS Design 仅通过 https://uizze.sh 发布，不会镜像到此仓库。现有的 uizze.com 安装源仍可用于 anti-ui-slop、ui-design 和 ui-radar；Image to UI 则原生支持 GitHub。

Uizze UI Pack

官方 Uizze 技能，帮助 Agent 构建和改进 UI/UX。

npx skills add uizze/uizze --skill uizze-ui

结合你项目的代码和资源开展工作，并借助 Uizze 使用设计系统、 真实应用示例、授权字体、图标、动态效果和交互细节。 本地 UI/UX 工作无需 Uizze 账号或 MCP 连接。

重现图片

有想要实现的截图或模型图吗？安装 Image to UI：

npx skills add uizze/uizze --skill image-to-ui

然后附上图片并提出要求：

Use image-to-ui to implement this screenshot in our existing app.
Match it 1:1 rather than redesigning it. Render at the same viewport,
compare the result with the reference, and correct visible differences.

这是一个简短、独立的技能，不是另一个设计框架。它无需账号或 MCP 连接即可使用，并附带 MIT 许可证。

使用 UI Taste 或原生 iOS 指导

适用于需要明确方向和最终润色的网页或 iOS 界面：

npx skills add https://uizze.sh --skill ui-taste

适用于原生 iPhone 屏幕、导航、表单和无障碍功能：

npx skills add https://uizze.sh --skill ios-design

这两项技能都包含其引用的操作手册、许可证和声明。现有横幅和说明保持不变；使用本地工作流无需账号或 MCP 连接。

将真实产品参考带入对话

当 Agent 需要了解真实产品如何处理特定设计问题时，可使用 UIZZE：例如信息密集的设置页面、权限流程、发票表格或 iOS 引导页面。

可选的付费 MCP可将 Agent 连接到专门的参考资料和素材搜索：

工具	Agent 可获取的内容
find_ui_references	每项结果最多提供三个全屏参考，来自 UIZZE 的 Web 和 iOS 资料库
find_ui_materials	最多提供三种托管字体、图标、动态图标或明确请求的素材包

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.

在 UIZZE 中创建 Agent 令牌，然后按照 MCP 设置指南操作。参考资料为设计提供依据；Agent 会采用你自己产品的风格构建界面。如果搜索未找到有用的信息，请继续基于项目开展工作。

在你现有的开发环境中使用

环境	从这里开始
Codex、Claude Code、Cursor	安装并尝试你的第一个任务
GitHub Copilot	Awesome Copilot 中的 UIZZE 插件
Cline	在 Cline 中连接 Uizze
Gemini CLI	安装 Uizze 扩展
Antigravity	安装 Uizze 自定义插件
VS Code、Windsurf / Cascade、Zed	原生 MCP 连接说明
MCP 客户端	GitHub MCP Registry · 连接指南
GitHub 拉取请求	UI Slop Gate Action · 查看实际示例输出

在拉取请求中发现尚未完成的 UI

免费的 UI Slop Gate 会检查有改动的前端源代码，找出无响应的控件、缺失的状态标记、硬编码颜色，以及通用仪表盘元素的组合。检查结果会显示在代码旁和工作流摘要中。

permissions:
  contents: read

steps:
  - uses: actions/checkout@v7
    with:
      fetch-depth: 2
      persist-credentials: false
  - uses: uizze/uizze@v1
    with:
      fail-on: error

无需账户、API 密钥或上传源代码。观看已发布的 Action 检查前后对比示例，然后复制完整工作流。这是保守的源代码检查；请同时使用渲染检查以及常规的无障碍性和可用性检查。

通过完整示例构建屏幕

• 免费 UI 任务简报生成器：描述任务、用户和目标；复制或下载具体的 Agent 提示词。无需账户。
• SaaS 仪表盘演练：比较信息层级，并尝试加载、空白、错误和分配状态。
• DESIGN.md 模板：下载设计约定，并将其应用于设置和账单页面。
• 空状态示例：区分首次使用、无匹配结果、服务故障和无法访问。
• iOS 引导与恢复：试用小型浏览器原型，并探索原生 SwiftUI 入门项目。

这些是 UIZZE 原创的教学示例，使用虚构数据。浏览全部指南，了解针对 Agent 的设置、比较和评审工作流。

探索此代码库

• 实用 Agent 工作流：账单设置、数据表、权限界面和原生 iOS。
• 复现拉取请求检查：源代码、检查结果和本地命令。
• Next.js 起始模板：适用于特定产品界面的现有起点。
• Storybook 集成：与组件一起检查 UI 状态。
• 公开分发：维护中的安装和目录路径。

生产环境元数据：技能索引 · MCP 清单 · 服务卡片 · 文档。

许可证

Uizze 编写的代码库代码和文本采用 MIT 许可证，除非适用更具体的声明。捆绑的技能手册保留其 Apache-2.0 许可证及第三方声明。重新分发技能包前，请查看许可证映射。