anti-ui-slop – skill Thiết kế & UI cho agent AI
Ngăn các coding agent tạo ra giao diện chung chung. Mở rộng design system của sản phẩm, chỉ dùng bằng chứng từ UIZZE khi thật sự hữu ích, bao phủ đủ các trạng thái cần có, và kiểm tra kết quả đã render.
Cài skill anti-ui-slop bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/anti-ui-slop-55bbd.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /anti-ui-slop – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/anti-ui-slop-55bbd.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $anti-ui-slop – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/anti-ui-slop-55bbd.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /anti-ui-slop – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/anti-ui-slop-55bbd.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /anti-ui-slop – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
Stop Making UI Slop
Build product-specific UI with 800,000+ real web and iOS screens via
[UIZZE](https://uizze.com).
Overview
Use the product brief, existing interface, components, and local design system
before reaching for outside references. UIZZE evidence is optional: it should
answer a concrete visual question, not turn every interface task into a research
project.
When to Use
Use this skill when designing, implementing, redesigning, critiquing, or doing a
pre-ship review of a web or iOS interface.
Work From the Product
1. Identify the screen's real job, primary user and action, required content,
and important loading, empty, error, success, disabled, and permission states.
2. Reuse the repository's components, semantic tokens, typography, spacing, and
interaction conventions before adding a new abstraction or visual language.
3. For a new interface or major redesign, write a short design contract covering
hierarchy, workflow shape, allowed components, required states, responsive
behavior, and observable acceptance criteria. Keep smaller changes smaller.
4. Use product-specific labels and data. Do not invent metrics, activity,
testimonials, users, or placeholder workflows to make a layout look complete.
Optional UIZZE Evidence
The free skill and public catalogue work without an account, token, dependency,
script, or executable. If a concrete unresolved visual question would benefit
from evidence, use the smallest relevant set of screens or materials.
The optional authenticated UIZZE MCP exposes exactly find_ui_references and
find_ui_materials. Use it only when those tools are actually available. If a
search returns nothing, continue silently from repository evidence. Never claim
an MCP-backed result that was not returned by the host.
Treat references as evidence, not templates. Transfer useful decisions about
hierarchy, density, navigation, controls, responsive behavior, and state
handling; never copy another product's branding, proprietary text, imagery, or
exact layout.
Install the current free skill directly from its canonical source:
npx skills add https://uizze.com --skill anti-ui-slopFinish
When the environment supports it, render and inspect the result once. Fix
observable breakage such as clipping, overlap, distorted media, inaccessible or
inert controls, missing required states, and unintentional responsive behavior.
Run the project's normal checks and keep the handoff concise.
Limitations
- This workflow does not replace product validation, accessibility review,
security review, or project-specific tests.
- UIZZE evidence is optional and may legitimately return no useful result.
- A reference is not permission to copy another product's identity or assets.
Skill liên quan
- antigravity-design-expert – Kỹ năng cốt lõi về kỹ thuật UI/UX để xây dựng giao diện web tương tác cao, mang tính…
- experimental-design – Thiết kế thí nghiệm và nghiên cứu TRƯỚC KHI thu thập dữ liệu — chọn thiết kế, ngẫu nhiên…
- api-and-interface-design – Hướng dẫn thiết kế API và giao diện ổn định. Dùng khi thiết kế API, ranh giới module…
- design-system-patterns – Xây dựng design system có khả năng mở rộng với design token, hạ tầng theming và kiến…
- baoyu-xhs-images – Tạo chuỗi thẻ hình ảnh infographic với 12 phong cách trực quan, 8 bố cục và 3 bảng màu…
- concept-diagrams – Tạo hình minh họa SVG giáo dục phẳng, tối giản dưới dạng HTML.
- apify-brand-reputation-monitoring – Thu thập review, đánh giá và các lượt nhắc đến thương hiệu từ nhiều nền tảng bằng Apify…
- playwright-interactive – Tương tác bền vững với trình duyệt và ứng dụng Electron qua `js_repl` để gỡ lỗi giao…