About Uizze
Uizze provides UI design skills and optional full-screen reference search for coding agents. It is aimed at developers improving interfaces, and builds within the existing components and design system of a project.
Key features
- 01Free UI design skills for coding agents
- 02Full-screen web and iOS reference search
- 03Hosted font, icon and material search
- 04GitHub Action that flags unfinished UI code
Use cases
- 01Improving a billing settings page with a coding agent
- 02Recreating a screenshot in an existing app
- 03Checking frontend changes in pull requests for unfinished UI
MCP support
The optional paid MCP exposes find_ui_references and find_ui_materials tools so agents can search UI references and design materials.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://uizze.com/mcpclaude mcp add --transport http uizze-uizze https://uizze.com/mcp{"mcpServers":{"uizze-uizze":{"type":"http","url":"https://uizze.com/mcp"}}}Open in Cursor{"servers":{"uizze-uizze":{"type":"http","url":"https://uizze.com/mcp"}}}Open in VS Code{"mcpServers":{"uizze-uizze":{"type":"http","url":"https://uizze.com/mcp"}}}{"mcpServers":{"uizze-uizze":{"serverUrl":"https://uizze.com/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
Tools
Details
From the project READMEUIZZE · Better UI for coding agents
Build interfaces that look like your product. Give Codex, Claude Code, Cursor, and GitHub Copilot a focused UI workflow, with optional references from 800,000+ real web and iOS screens.
Explore UIZZE → · Try a workflow · Connect MCP · Add the PR check
Watch UIZZE before and after
20-second mobile UI comparison: Without UIZZE on the left, With UIZZE on the right.
https://github.com/user-attachments/assets/d7ee2275-8e7f-474c-a2e4-b45759b86996
Build your next screen with UIZZE →
Try a billing screen in Claude Code, Cursor, or Copilot: install, copy the brief, connect optional reference search, and check the result.
Start with your next screen
Install the free UI design skill:
npx skills add https://uizze.com --skill ui-design
Then give your agent a real task:
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.
The skills work without an account or MCP connection. Start in an existing project: your brief, components, and design system guide the work.
| Your task | Free skill | What to ask for |
|---|---|---|
| Build and improve UI/UX with Uizze | uizze-ui | The Uizze UI Pack: work with your project and use Uizze's full toolkit where it helps |
| Build or redesign an interface | ui-design | A clear hierarchy, working interactions, and the states your users need |
| Fix a generic first draft | anti-ui-slop | Product-specific content, deliberate layouts, and a finish review |
| Investigate a UI decision | ui-radar | A focused reference workflow; connect the paid MCP for live retrieval |
| Recreate an image or screenshot | image-to-ui | A 1:1 implementation, checked against the reference at the same viewport |
For a focused review, install anti-ui-slop instead:
npx skills add https://uizze.com --skill anti-ui-slop
UI Taste and iOS Design are distributed only from https://uizze.sh, not mirrored in this repository. The existing uizze.com installation source remains available for anti-ui-slop, ui-design, and ui-radar; Image to UI is GitHub-native.
The Uizze UI Pack
The official Uizze skill for building and improving UI/UX with agents.
npx skills add uizze/uizze --skill uizze-ui
Work with your project's code and assets, and use Uizze for design systems, real app examples, licensed fonts, icons, motion and interaction details. Local UI/UX work does not require a Uizze account or MCP connection.
Recreate an image
Have a screenshot or mockup you want implemented? Install Image to UI:
npx skills add uizze/uizze --skill image-to-ui
Then attach the image and ask:
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.
This is a short, self-contained skill, not another design framework. It works without an account or MCP connection and includes the MIT license.
Use UI Taste or native iOS guidance
For a web or iOS interface that needs a clearer direction and a finish pass:
npx skills add https://uizze.sh --skill ui-taste
For native iPhone screens, navigation, forms, and accessibility:
npx skills add https://uizze.sh --skill ios-design
Both skills include their referenced playbooks, licenses, and notices. Their existing banners and instructions are unchanged; no account or MCP connection is required to use the local workflows.
Bring real product references into the conversation
Use UIZZE when the agent needs to see how real products handle a specific design problem: a dense settings page, a permission flow, an invoice table, or an iOS onboarding screen.
The optional paid MCP connects your agent to focused reference and material search:
| Tool | What your agent gets |
|---|---|
find_ui_references | Up to three full-screen references per result, drawn from UIZZE's web and iOS library |
find_ui_materials | Up to three hosted fonts, icons, animated icons, or explicitly requested packs |
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.
Create an agent token in UIZZE, then follow the MCP setup guide. References inform the design; the agent builds the interface in your own product's style. If a search returns no useful evidence, continue from the project.
Use it where you already build
| Environment | Start here |
|---|---|
| Codex, Claude Code, Cursor | Install and try your first task |
| GitHub Copilot | UIZZE plugin in Awesome Copilot |
| Cline | Connect Uizze in Cline |
| Gemini CLI | Install the Uizze extension |
| Antigravity | Install the Uizze custom plugin |
| VS Code, Windsurf / Cascade, Zed | Native MCP connection instructions |
| MCP clients | GitHub MCP Registry · Connection guide |
| GitHub pull requests | UI Slop Gate Action · Inspect actual example output |
Catch unfinished UI in pull requests
The free UI Slop Gate checks changed frontend source for inert controls, missing state markers, hardcoded colors, and combinations of generic dashboard cues. Findings appear next to the code and in the workflow summary.
permissions:
contents: read
steps:
- uses: actions/checkout@v7
with:
fetch-depth: 2
persist-credentials: false
- uses: uizze/uizze@v1
with:
fail-on: error
No account, API key, or source upload. Watch the published Action check a before-and-after example, then copy the complete workflow. This is a conservative source check; use rendered inspection and your normal accessibility and usability checks alongside it.
Build a screen with a worked example
- Free UI task-brief builder: describe the task, user, and outcome; copy or download a concrete agent prompt. No account required.
- SaaS dashboard walkthrough: compare information hierarchy and try loading, empty, error, and assignment states.
- DESIGN.md template: download a design contract and apply it across settings and billing.
- Empty-state examples: distinguish first use, no matches, service failure, and unavailable access.
- iOS onboarding and recovery: try a small browser prototype and explore the native SwiftUI starter.
These are original UIZZE teaching examples with fictional data. Browse all guides for agent-specific setup, comparisons, and review workflows.
Explore the repository
- Practical agent workflows: billing settings, data tables, permission screens, and native iOS.
- Reproduce a pull-request check: source, findings, and a local command.
- Next.js starter: an existing starting point for a product-specific interface.
- Storybook integration: review UI states alongside your components.
- Public distribution: maintained install and catalog paths.
Production metadata: skills index · MCP manifest · server card · documentation.
License
Uizze-authored repository code and text use MIT unless a more specific notice applies. Bundled skill playbooks retain their Apache-2.0 license and third-party notices. See the license map before redistributing a skill package.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.
