uizze
为AI编码工具注入产品级UI设计约束,告别千篇一律的界面
安装使用
复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:
帮我安装这个 AI Skill:uizze。 它的用途是:为AI编码工具注入产品级UI设计约束,告别千篇一律的界面 完整的 Skill 内容见:https://321skill.com/skills/uizze/raw/index.md 请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘为这个用户仪表板设计一个概览页面,使用anti-ui-slop技能来确保界面不流于俗套,基于真实SaaS产品的证据进行设计,并且必须通过完成门禁。’ 它会首先分析任务,然后从UIZZE的真实界面目录中寻找设计依据,生成一份具体的设计契约,接着编写代码,并在最终提交前自动运行检查,确保没有通用布局、填充性指标或缺失的交互状态。
介绍
UIZZE的anti-ui-slop技能旨在解决AI助手生成的用户界面(UI)普遍存在的“AI感”过强、缺乏产品特色的问题。当开发者使用Codex、Claude Code、Cursor或GitHub Copilot等工具生成前端代码时,该技能会介入,依据超过80万个真实网页和iOS屏幕的公开目录作为设计证据,为AI生成一个明确的产品级设计契约,并设立严格的完成门槛,强制AI产出符合特定产品视觉语言、具备完整交互状态的界面,而非通用的“UI废料”。
使用方式多样且灵活。开发者可以通过简单的命令行(如npx skills add https://uizze.com --skill anti-ui-slop)将其添加到主流AI编码工具中。它提供了一个名为check_ui_slop的确定性工具,用于检查渲染的HTML和CSS,给出具体的阻塞问题和修复建议,整个过程无需上传源代码或调用额外模型。此外,还提供了GitHub Action用于在代码合并前自动检查拉取请求中的前端文件,拦截通用布局、缺失状态等问题。
该技能特别适合前端开发、全栈开发和UI设计师。当这些角色需要利用AI高效生成代码,但又对产出的界面质量、独特性和专业性有较高要求时,UIZZE能成为他们的“设计守门员”。它尤其适用于从零开始构建新产品界面、快速迭代现有UI组件,或是在团队中推行统一设计规范的场景。
建议在项目初期或设计系统建立阶段就引入此技能,让AI从一开始就在正确的设计轨道上运行。对于追求极致视觉和交互细节的复杂项目,可以结合其完整的MCP服务以获得实时目录搜索和视觉审查等高级功能。注意,其免费技能主要提供设计约束和基础检查,更深入的自动化审计和截图批判等功能需要升级服务。
核心特点
与单纯提供UI组件库或设计建议的Skill不同,UIZZE的核心在于其“设计契约”和“完成门禁”机制,它强制AI编码代理必须参考真实产品证据并满足特定产品的设计规范后才能交付代码,从流程上杜绝了通用、粗糙的AI界面产出。
注意事项
不适合对界面独特性要求不高、或仅需快速生成功能原型进行内部验证的场景。
常见问题
使用UIZZE需要上传我的源代码吗?
不需要。其免费的anti-ui-slop技能和UI Slop Gate Action均在本地或GitHub Runner运行,仅检查代码或文件,无需上传源代码或截图。
它支持哪些AI编码工具?
广泛支持Codex、Claude Code、Cursor、GitHub Copilot及其CLI,并提供了相应的安装命令和插件市场集成。
给 AI 助手的安装指引
如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:
请访问 https://321skill.com/skills/uizze/raw/index.md 读取 uizze 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址:/skills/uizze/raw/index.md(查看排版版本)