anti-ui-slop

UI のスロップを作るのはやめましょう

UIZZE の無料のアンチ UI スロップワークフローを使って、製品に特化したインターフェースを構築しましょう。製品概要、既存のコンポーネント、デザインシステムを活用し、画面の階層、コンテンツ、操作要素、状態を意図的に設計します。

このスキルを使う場面

Web または iOS インターフェースの設計、実装、再設計、レビュー、仕上げに使います。特に、初稿がありきたりに感じられる場合や、重要な状態が抜けている場合に役立ちます。

使用方法

1. 対象画面、製品のコンテキスト、既存のデザインシステムを確認します。主要なユーザー、操作、コンテンツ、制約を特定します。
2. プロジェクトのコンポーネント、トークン、タイポグラフィ、インタラクションの規約を再利用します。大幅な再設計では、簡潔なデザイン契約を作成します。小さな修正は小さく保ちます。
3. 製品に特化したラベルと実際のデータ要件を使います。レイアウトを埋めるために、指標、アクティビティ、お客様の声、操作要素を作り出さないでください。
4. 必要な読み込み中、空、エラー、成功、無効、権限の各状態を実装します。主要な操作と復旧手段を明確にします。
5. 環境が対応している場合は、結果をレンダリングし、確認できるクリッピング、重なり、反応しない操作、レスポンシブ表示の問題を修正します。プロジェクトに関連するチェックを実行し、変更点をまとめます。

このワークフローは、アカウント、トークン、スクリプト、MCP 接続がなくても機能します。外部の参照情報を利用できない場合は、リポジトリ内の情報をもとに作業を続けてください。

例

Use anti-ui-slop on our billing settings page. Make the current plan,
payment method, and invoice history easy to scan. Reuse our components
and tokens. Cover no invoices, payment failure, and read-only access.
Inspect desktop and mobile output and fix visible breakage.

対象を絞ってレビューする場合は、まず最も有用な変更を3つ特定し、依頼された範囲内で実装します。

UIZZE の参考情報（任意）

別途提供される有料の UIZZE MCP では、実際のWebおよびiOS画面80万件以上を対象に、参考情報を絞り込んで検索できます。提供されるツールは次の2つだけです。

• find_ui_references は、全画面の参考例を最大3件検索または調査します。
• find_ui_materials は、ホストされたフォント、アイコン、アニメーションアイコン、または明示的にリクエストされたパックを最大3件検索します。

認証済みの接続をホストが提供しており、具体的なビジュアル上の疑問に根拠が役立つ場合に限り、これらのツールを使ってください。検索結果が何も返されない場合は、プロジェクトの情報をもとに作業を続けてください。ホストから返されていないツールの結果を、返されたかのように主張しないでください。

階層、密度、操作要素、状態に関する有用な判断を、製品独自のデザインシステムに合わせて取り入れます。製品のアイデンティティとコンテンツは維持してください。

正規パッケージとその他の例

このカタログ項目は、単独で使えるワークフローです。特化したプレイブックを含む最新のスキル一式を、次のコマンドでインストールしてください。

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

正規のソース · 実践的なワークフロー · UIZZE