Unslop Anything
AIスロップとは、誰も決断しなかったもののことです。モデルが最も一般的な答えに手を伸ばした結果、その出力は他と見分けがつかなくなります:バイオレットのグラデーション、すべてのラベルに付く絵文字、挨拶文のヘッドライン、「単なるXではなく、Yです」という文。たとえ良いパターンでも、みんながデフォルトで出荷するとスロップに変わります。
したがって、アンスロップには二つの側面があり、両方必要です:
- デフォルトを取り除く。 名前付きの兆候をすべて見つけ、具体的な値や具体的な文で修正します。
- 決断を加える。 どんな製品にも当てはまるクリーンな結果は、次のテンプレートにすぎません。完成した作品には、この製品、ブランド、または書き手だけが持つものが少なくとも一つ含まれていなければなりません。
作業は自分で行います:ファイルを読み、編集し、レンダリングし、比較します。素材自体からわからないことだけをユーザーに尋ねます。
このスキルの使い方
パスはこのスキルのフォルダを基準とします。参照はオンデマンドで読み込み、一度にすべては読み込みません。
- ルーティング。 あなたがアンスロップしようとしているものを判断し、その参照のみを開きます。
| 媒体 | 読むもの |
|---|---|
| Webアプリ、ダッシュボード、ランディングページ、HTML/CSS/React/Vue/Svelte UI全般 | references/ui-signs.md、references/ui-passes.md、references/direction.md |
| モバイルアプリ画面(iOS, Android, React Native, Flutter, SwiftUI) | 上記UIファイルに加えて references/mobile.md |
| 画像、イラスト、アイコンセット、ポスター、ソーシャルグラフィック、スライド、ロゴ | references/visual-design.md、references/direction.md |
| 文章:投稿、スレッド、記事、メール、ドキュメント、README、UIコピー | references/writing.md |
| コピーもスロップになっているUI | 最初にUIを修正し、次に references/writing.md を使ってコピーパスを実行 |
ユーザーが特定のオーバーレイやコンポーネントを要求し、その名前が曖昧な場合(「ポップアップを作って」)は、構築する前に references/component-vocabulary.md を確認してください。
-
ジョブを選ぶ。
- 検出。 ユーザーが「これはスロップ?」と尋ねる、監査を希望する、または何も変更しないでほしいと言う場合。媒体のサイン・ファイル(
ui-signs.md、visual-design.mdまたはwriting.md)のみを読み込みます。編集は行いません。次の形式で回答します:スロップレベル:N%(重い | 軽い | なし) <カテゴリ> - <サイン>:<場所:ファイル:行、画面領域、または「引用文」> -> <修正案を数単語で> 確認が必要な主張:<検証不可能な主張、またはなし> 未確認:<確認できなかったもの、またはなし> 修正しますか? - 修正(デフォルト)。 以下のワークフローを実行します。
- 検出。 ユーザーが「これはスロップ?」と尋ねる、監査を希望する、または何も変更しないでほしいと言う場合。媒体のサイン・ファイル(
-
素材を目の前に置く。
- コード:画面をレンダリングするファイルを見つけます。実行できる場合は、実行してスクリーンショットを撮ります。コードだけでなく、人が見るものを判断します。
- URLがありコードがない場合:ブラウザツールで開き、スクリーンショットを撮り、HTMLをローカルにコピーとして保存して作業します。出力は、ユーザーがサイトの所有者に渡せる再設計されたファイルです。その旨を伝えます。
- スクリーンショットのみ:それに近い1つの静的HTMLファイルとして再構築し、それをオリジナルとして扱い、その旨を伝えます。
- ブラウザやレンダリングツールがない、またはアプリが起動しない場合:画面を静的HTMLファイルに抽出し、可能であればそれをレンダリングします。そうでなければコードから作業し、すべての視覚的確認項目を「未確認:」の下にリストします。
- 文章:ドラフトが貼り付けられていない場合は依頼します。対象読者が不明な場合は、1つだけ質問します:誰がこれをどこで読むのか。
ワークフロー
- スキャン。 コードまたはテキストファイルの場合、スキャナーを実行します。スキャナーは候補を見つけるものであり、判定を下すものではありません:
Windowsではpython3 <skill folder>/scripts/slop_scan.py <files or folders> python3 <skill folder>/scripts/slop_scan.py --text draft.md # 任意のファイルに文章ルールを適用python3の代わりにpyを使用します。必要なのはPython 3のみです。終了コード0は候補なし、1は候補あり、2は何もスキャンされなかったことを示します。 スキャン対象はターゲットのみとします:画面のファイルとそれが使用する共有コンポーネントやスタイル。リポジトリ全体は対象としません。ただし、ユーザーがリポジトリ全体の監査を依頼した場合は除きます。リポジトリ全体の監査の場合は--jsonを使用し、読み取る前にルールごとにヒットをグループ化します。各ヒットを読み取って確認します。誤検出は破棄し、その理由をレポートに記載します。 - 監査。 媒体のサイン・ファイルを確認します。サインごとに1行:何を、どこで(
ファイル:行、画面領域、または引用文)、修正方法。スキャナーでは見えないサイン(階層、リズム、構成、意味)も追加します。 - 評価する。 サイン・ファイルのカテゴリ(スキャナーではなくファイルのカテゴリ)のうち、少なくとも1つのサインがあるものを数えます。各サインは、それを最初にリストしている1つのカテゴリにのみ分類します。その数に10を掛けたものがスロップレベルです。UIの場合、最後のカテゴリ(テンプレートルック)は、他の9つが空の場合にのみカウントします。次にモードを選択します:
- 重い(50%以上):完全なプロセス。方向性を最初に決定。
- 軽い(10-40%):ポリッシュモード。監査で見つかったものだけを修正します。パレット、タイポグラフィ、レイアウト、トーン、ブランドは維持します。より大きなアイデアは提案としてレポートに記載します。
- なし(0%):その旨を明確に伝えます。正確な値を伴う2つまたは3つの改良点を提案し、ユーザーが同意した場合のみ適用します。単に目新しさのために良い作品を決して変更してはいけません。
- 方向性(重いUIおよびビジュアルデザインのみ)。
references/direction.mdに従います:製品ステートメント、キャラクター、世界観、瞬間、シグネチャー。新しいルックの場合は、1つに決める前に3つの候補となる方向性を示します。監査と方向性を表示し、ユーザーの回答を待つために一時停止します。方向性を後で変更すると全てをやり直すことになるからです。ユーザーがすでに「とにかくやってくれ」と言っている場合のみ、待機をスキップします。その場合でも、レポートには3つの候補(それぞれ1行)と、なぜその1つを選んだかを記載します。 - パスで修正。 UI:パスの順序は
references/ui-passes.mdに従います。ビジュアルデザイン:順序はreferences/visual-design.mdに従います。文章:ワークフローはreferences/writing.mdに従います。次のパスを開始する前に、作品全体に対して1つのパスを完了します。 - 検証。 再度レンダリングし(実行ごとに最大3回)、フルサイズで領域ごとに確認します:衝突する列、クリップまたは重なったテキスト、ずれたエッジはそこにしか現れません。監査リストと使用した参照のチェックリストと照合します。スキャナーを再度実行します。リストに残っているものは修正されるか、明示的に正当化されます。
- レポート。 前後のスロップレベル、方向性、パスごとに変更点を数行、破棄した誤検出、確認できなかったもの(「未確認:」)、ユーザーに確認が必要な主張を記載します。
譲れないルール
- 製品を維持し、クラフトを変える。 機能、コンテンツ、データ、セクションの順序、製品名はそのまま残します。セクションを追加してはいけません。
- モックデータはプレースホルダーのみを置き換える。 オリジナルがプレースホルダー値(
$123,456、Lorem、John Doe、偽のチャート)を示している場合、それらを妥当なモック値に置き換えることができます。すべてのモック値はレポートの「置き換えるモックデータ」の下にリストします。実際のデータは決して変更しません。 - 決して捏造しない。 新しい機能、統計、お客様の声、出典、ロゴ、引用は追加しません。「10,000以上のチームに信頼されています」や「10倍高速」といった主張は、ユーザーに確認するか削除します。それらをレポートにリストします。
- 削除した装飾を新しい装飾で置き換えない。 パープルグラデーションをグラスモーフィズム、グレイン、ネオン、ベントーグリッド、3Dガラスアイコンに交換することは、新しいトレンドの中での同じスロップです。
- 静かであることと、薄いことは違う。 すべての色を取り除いて何も読めなくなるのも失敗です。色は意味を持つ場所に残します:主要なアクション、選択状態、ステータス、データ系列、一つの重要な瞬間。
- 色とラベルは真実を伝える。 ラベルはその数値と一致します(「64%回復」は、スケールがそうでない限り「優れている」ではありません)。赤は問題を意味します。緑は良好を意味します。
- デザインシステムを通じて作業する。 プロジェクトにテーマトークンやCSS変数がある場合、その値または使用方法を変更します。ハードコードされた値でそれらをバイパスしてはいけません。
- 書き手の声と実際のブランドを維持する。 実際のロゴ、色、書体はそのまま残します。ロゴのバイオレットからブルーへのグラデーション、スパークルタイル、グローは、ユーザーがそう言わない限りブランドではありません。文章は書き手の語彙、率直さ、ユーモアを維持します。
- 有名なアプリをコピーすることはアンスロップではない。 構造と数値のために3〜5つのリファレンスを調査し、ある製品のルックを別の製品に貼り付けてはいけません。
- 検出器の推測はしない。 検出モードでは、証拠を持ってパターンに名前を付けます。「これはAIによって書かれた」とは決して主張しません。
| 言い訳 | 現実 |
|---|---|
| 「今はきれいに見える」 | きれいはテンプレートです。テンプレートテストを実行してください:競合の名前に置き換えます。それでも適合するなら、方向性を推し進めてください。 |
| 「ユーザーはただきれいにしたいだけだ」 | きれいであることと、異なることは同じではありません。10のきれいなAIアプリを並べると、1つのアプリになります。 |
| 「色を削除すれば直る」 | 段階、アクセント、意味なしに色を削除すると、グレーのテンプレートになります。 |
| 「スキャナーは何も見つけなかった」 | ヒットゼロは、grep可能なサインがゼロであることを意味します。階層、リズム、意味は依然としてあなたの目を必要とします。 |
| 「レンダリングはスキップします。コードは正しいので」 | スロップは人が見るものに宿ります。クリップされたテキスト、不均一なギャップ、弱い階層は、レンダリング時にのみ現れます。 |
テンプレートテスト(毎回、最後に実行)
製品名または書き手の名前を競合のものに置き換えます。画面、画像、またはテキストが編集なしでまだ適合する場合、それは完成していません。コピー、ビジュアルモーメント、シグネチャーのディテールで方向性をより強く推し進めてください。