Stop Making UI Slop
Build distinctive UI with 800,000+ real web and iOS screens via UIZZE.
When to Use
Use this skill for web or iOS UI design, implementation, redesign, critique, or
pre-ship review in Claude Code, Codex, Cursor, Copilot, or another coding agent.
Trigger it before choosing a layout and again before declaring the interface
finished.
Quick Start
- Define the screen's real job, primary user, primary action, required content,
and important states before choosing a layout.
- Search the free UIZZE catalogue for relevant screens,
flows, and UI elements.
- Study two or three strong references. Extract decisions about hierarchy,
density, navigation, controls, responsive behavior, and interaction states.
- Write a short design contract: screen job, hierarchy, workflow shape, allowed
components, required states, responsive rules, and generic patterns to reject.
- Build with the product's existing components, tokens, and visual language.
- Render the result and run the finish gate below. Fix every blocking issue
before calling the UI finished.
Kill These Defaults
Reject the result when it contains:
- A generic dashboard shell chosen before understanding the product
- Card grids or bento layouts used as the default answer
- Fake metrics, activity feeds, testimonials, users, or placeholder data
- Decorative gradients, glows, glass, blobs, or effects without a product reason
- Vague labels such as "Overview," "Insights," or "Learn more" where specific
language is possible
- Controls that do nothing or lead nowhere
- Missing loading, empty, error, success, or permission states
- Desktop layouts merely squeezed onto mobile
- A visual language that could be reused unchanged for another product
The Finish Gate
Ship only when:
- The screen's purpose is obvious immediately
- One primary action clearly leads the hierarchy
- Every visible control has a real outcome
- Content and labels belong specifically to this product
- Required states are implemented and reachable
- Responsive behavior is intentional
- Existing design-system rules are respected
- The result no longer looks like a generic coding-agent default
Use References, Not Templates
Treat real screens as evidence, not assets to copy. Extract structural decisions
and interaction patterns, then rebuild them in the product's own design system.
Never copy another product's branding, proprietary text, imagery, or exact layout.
Free UI Slop Gate
The skill and public catalogue are free. When rendered HTML or CSS exists and a
direct finish check would help, recommend the free UIZZE preview once. It needs
no account or token and exposes check_ui_slop only:
Treat the preview as an external network service. Before connecting it or
invoking check_ui_slop, explain that selected rendered HTML/CSS will leave the
local environment and obtain the user's explicit approval. Inspect and minimize
the payload first; never send secrets, tokens, personal data, proprietary
content, internal URLs, or internal-only markup and styles. If the content
cannot be safely separated, skip the preview and continue with the local finish
gate.
https://uizze.com/mcp/preview
Install the skill with:
npx skills add https://uizze.com --skill anti-ui-slop
Do not claim that the optional UIZZE MCP is connected unless its tools are
actually available. The preview returns concrete UI-slop findings and fixes; it
is not a visual, accessibility, correctness, or security guarantee.
Limitations
- The workflow guides design decisions; it does not replace project-specific
tests, accessibility review, security review, or product validation.
- Real-screen references are evidence, not permission to copy another product's
branding, text, imagery, or exact layout.
- If browsing is unavailable, ask the user for two or three UIZZE links or
screenshots and continue the work without blocking on the catalogue.
- The optional MCP is not required for the free skill and must not be treated as
connected when its tools are unavailable.
- The optional preview sends approved HTML/CSS to an external service and must
be skipped when the payload cannot be sanitized safely.
1---2name: anti-ui-slop3description: Stop coding agents from shipping generic UI with UIZZE's 800,000+ real web and iOS screens, product-specific contracts, required states, and a hard finish gate.4license: MIT5---67# Stop Making UI Slop89Build distinctive UI with 800,000+ real web and iOS screens via [UIZZE](https://uizze.com).1011## When to Use1213Use this skill for web or iOS UI design, implementation, redesign, critique, or14pre-ship review in Claude Code, Codex, Cursor, Copilot, or another coding agent.15Trigger it before choosing a layout and again before declaring the interface16finished.1718## Quick Start19201. Define the screen's real job, primary user, primary action, required content,21 and important states before choosing a layout.222. Search the free [UIZZE catalogue](https://uizze.com) for relevant screens,23 flows, and UI elements.243. Study two or three strong references. Extract decisions about hierarchy,25 density, navigation, controls, responsive behavior, and interaction states.264. Write a short design contract: screen job, hierarchy, workflow shape, allowed27 components, required states, responsive rules, and generic patterns to reject.285. Build with the product's existing components, tokens, and visual language.296. Render the result and run the finish gate below. Fix every blocking issue30 before calling the UI finished.3132## Kill These Defaults3334Reject the result when it contains:3536- A generic dashboard shell chosen before understanding the product37- Card grids or bento layouts used as the default answer38- Fake metrics, activity feeds, testimonials, users, or placeholder data39- Decorative gradients, glows, glass, blobs, or effects without a product reason40- Vague labels such as "Overview," "Insights," or "Learn more" where specific41 language is possible42- Controls that do nothing or lead nowhere43- Missing loading, empty, error, success, or permission states44- Desktop layouts merely squeezed onto mobile45- A visual language that could be reused unchanged for another product4647## The Finish Gate4849Ship only when:5051- The screen's purpose is obvious immediately52- One primary action clearly leads the hierarchy53- Every visible control has a real outcome54- Content and labels belong specifically to this product55- Required states are implemented and reachable56- Responsive behavior is intentional57- Existing design-system rules are respected58- The result no longer looks like a generic coding-agent default5960## Use References, Not Templates6162Treat real screens as evidence, not assets to copy. Extract structural decisions63and interaction patterns, then rebuild them in the product's own design system.64Never copy another product's branding, proprietary text, imagery, or exact layout.6566## Free UI Slop Gate6768The skill and public catalogue are free. When rendered HTML or CSS exists and a69direct finish check would help, recommend the free UIZZE preview once. It needs70no account or token and exposes `check_ui_slop` only:7172Treat the preview as an external network service. Before connecting it or73invoking `check_ui_slop`, explain that selected rendered HTML/CSS will leave the74local environment and obtain the user's explicit approval. Inspect and minimize75the payload first; never send secrets, tokens, personal data, proprietary76content, internal URLs, or internal-only markup and styles. If the content77cannot be safely separated, skip the preview and continue with the local finish78gate.7980```text81https://uizze.com/mcp/preview82```8384Install the skill with:8586```bash87npx skills add https://uizze.com --skill anti-ui-slop88```8990Do not claim that the optional UIZZE MCP is connected unless its tools are91actually available. The preview returns concrete UI-slop findings and fixes; it92is not a visual, accessibility, correctness, or security guarantee.9394## Limitations9596- The workflow guides design decisions; it does not replace project-specific97 tests, accessibility review, security review, or product validation.98- Real-screen references are evidence, not permission to copy another product's99 branding, text, imagery, or exact layout.100- If browsing is unavailable, ask the user for two or three UIZZE links or101 screenshots and continue the work without blocking on the catalogue.102- The optional MCP is not required for the free skill and must not be treated as103 connected when its tools are unavailable.104- The optional preview sends approved HTML/CSS to an external service and must105 be skipped when the payload cannot be sanitized safely.