Shijiuwei/unslop

unslop は何をしますか？

unslopは、Damir Sokolovsky（@heydamir）によって作成されました。彼はXでUnsloppingシリーズを開始しました。これはCC BY 4.0の下でライセンスされているため、コピーや翻案にはこのクレジットを保持してください。

Vibecoded UIは、同じ予測可能な方法で失敗します。すべての表面が光り、すべてのラベルに絵文字が付き、間隔はその日モデルが入力した通りで、コピーは叫んでいます。Unsloppingは、クラフトを修正し、プロダクトを維持します。機能、コンテンツ、セクションの順序は変わりません。変更されるのは、すべてのサイズ、色、単語、画像が意図的に設定されることです。

スロップを除去することは作業の半分に過ぎません。きれいだがどのプロダクトにも属する可能性のある画面は、次のテンプレートです。すべての実行は、このプロダクトだけが持つことができる画面で終わります。

スロップとクラフトの違いは、リッチさがどこに行くかです。スロップは、色とエフェクトをクローム、背景、ボタン、境界線、ラベルに広げます。クラフトはクロームを静かに保ち、リッチさを、レンダリングされたオブジェクト、美しいチャート、プロダクトの世界からの画像など、人々が覚えている1つか2つのコンテンツの瞬間に集中させます。

デザイナーがレッドラインパスを行うように、一度に1つのレイヤーずつ、画面全体にわたって作業します。

良い状態とは

• 1つの明るい要素。 各画面には、色とクラフトを運ぶ1つの磨かれたもの（レンダリングされたオブジェクト、描かれたシーン、またはリッチなチャート）があります。その周りのすべては静かなので、瞬時に読み取れます。
• 静かなクローム。 ナビゲーション、ボタン、テキストは、着色されたニュートラルと1つのアクセントを使用します。光るものはなく、明るい要素と競合するものもありません。
• 明確なアイデア。 ビジュアルが何を示し、なぜこのプロダクトに属するのかを一文で言えます。
• 落ち着いたスペースのテキスト。 見出しは、画像またはレイアウトの空の部分に配置され、短く具体的で、1つのプライマリアクションと1つのセカンダリアクションがあり、その下に何も積み重なっていません。
• リアルなプロダクト、リアルなマテリアル。 プレビューは、もっともらしいデータを持つ実際のアプリのように見え、オブジェクトは、重み、光、影を持つ実際のもののように見えます。

どのビジュアルスタイルが機能する傾向があり、どのスタイルが失敗するかは、references/visuals.mdにあります。学習するための完成した例はreferences/refs.mdにあり、画像をグリフで描画するなどのコード処理はreferences/effects.mdにあります。

実行方法

1. 画面を見てください。 それをレンダリングするファイルを見つけてください。アプリを実行するか、ブラウザでファイルを開いてスクリーンショットを撮ることができるなら、そうしてください。そうすれば、コードだけでなく、人々が見るものを判断できます。
   • コードなしでライブサイトへのリンクのみ？ node <skill folder>/scripts/snapshot.mjs <url> unslop/original.html でページを保存し、そのファイルのコピーで作業してください。ユーザーが見ているテーマに合わせて --dark または --light を追加してください。また、original.live.png（ライブページのスクリーンショット）も保存されるので、保存したコピーをレンダリングし、開始する前に2つを比較してください。スクリプトによって描画されたアニメーションバックグラウンドは保持されないため、ライブページからの監査で説明してください。
   • スクリーンショットのみ？ まず画面を1つの静的HTMLファイルとして再構築し、厳密に一致させ、それをオリジナルとして扱ってください。
   • どちらの場合も、結果はユーザーが実際のサイトの所有者に渡すことができるコードで再設計されたページです。そのため、レポートでその旨を伝えてください。
2. 監査。 references/signs.md を確認し、見つけたすべての兆候を、それがどこにあるかを含めて1行ずつリストアップしてください。
3. 変更量を決定してください。 何かを計画する前に、監査を正直に読んでください。
   • ヘビースロップ、色、タイポグラフィ、アイコン、コピーにわたる多くの兆候。以下の完全なプロセスを実行してください。
   • ライトスロップ、ほとんどがデザインされていて、いくつかの兆候が残っている画面。ポリッシュモード。監査で見つかったものだけを修正し、新しいブランドを発明する代わりに既存のブランドから方向性を取り、パレット、タイポグラフィ、レイアウト、ビジュアルを維持してください。欠けている瞬間やヒーローのシーンなど、より大きなアイデアは、変更としてではなく、提案としてレポートに含めてください。
   • スロップなし。 その旨を明確に述べ、最大で2、3の小さな洗練を正確な値で提案してください。ユーザーが同意した場合のみそれらを適用し、そこで止まってください。単に異なるものにするために良い画面を変更しないでください。
4. 方向性を設定して停止してください。 以下に説明する5行を書いてください。監査と方向性をユーザーに示し、編集する前にユーザーの回答を待ってください。方向性を後で変更すると、すべてをやり直すことになるからです。ユーザーに質問するためのツールがある場合はそれを使って質問し、そうでない場合はプレーンテキストで質問して停止してください。ユーザーがすでに「実行して」と言っている場合のみ、待機をスキップしてください。
5. 9つのパスで順番に修正してください。 次のパスを開始する前に、画面全体でパスを完了させてください。ほぼすべての行が変更される場合、パスを順番に計画し、すべてのパスが適用されていることを確認してから、新しい画面を一度に書いてください。間隔が最初に来るのは、リズムが正しくなると他のすべての読み方が変わるからです。コピーはタイポグラフィとレイアウトの前に来るのは、見出しの長さがそのサイズと配置を決定するからです。ビジュアルとモーションは最後に来るのは、それらがなくても機能する画面に適合する必要があるからです。
6. チェック。 このファイルの最後にあるチェックリストを実行し、再度レンダリングして監査リストと比較してください。リストにまだあるものは修正されます。
7. レポート 方向性、パスごとに何が変更されたかについての数行、および作成した画像プロンプトを報告してください。
8. 求められた場合、またはユーザーが共有したい場合に記録してください。 ストーリーファイルを構築し、ストーリービデオで説明されているビデオをレンダリングしてください。ユーザーが最初からそれを求めた場合は、各パスを進めながらストーリーファイルに書き込んでください。

実行を迅速に保ってください。画面を確認するためにレンダリングするのは最大3回までにしてください。画像を生成するときは、方向性が確認されたらすぐに開始し、それを待つ代わりに最初のパスを続けて実行してください。

すべてのパスの正確な値は、references/tokens.mdにあります。

方向性

何かに触れる前に、5つの短い行を書いてください。トレンドからではなく、ページが言っているプロダクトの機能と対象者から導き出してください。

• プロダクト。 何を誰のために行うか、一文で。
• キャラクター。 落ち着いた、正確、少し温かい や 速い、技術的、遊び心 のような、2、3の具体的な単語。クリーン、モダン、スリック、ミニマル、プレミアム のような単語は許可されません。なぜなら、それらはすべてのテンプレートを説明するものだからです。
• 世界。 プロダクトが自然に属する場所またはマテリアル。メモアプリは紙とインクの近くに、監視ツールは計器と夜勤の近くに、旅行アプリは地図と窓からの光の近くに住んでいます。この世界は、ニュートラル、アクセント、ビジュアルの色合いを設定します。
• 瞬間。 画面が豊かな色、マテリアル、詳細を得る1つまたは2つの場所。プロダクトが表示するものから選択します。プレビュー内のレンダリングされたカードやデバイス、各色がシリーズを意味するチャート、コンテンツの隣に配置された世界からのオブジェクト。それらが何であるかを書いてください。
• シグネチャー。 このプロダクトだけが持つであろう1つの小さなディテールで、一貫して使用されます。監視ツールのライブステータスドット、開発者ツールのキーキャップ、教育アプリの手書きの下線、配送アプリのルートライン。5つではなく、1つのディテール。

ここでの例は、回答の形を示しているだけです。例がたまたま適合しても、あなたの目の前のプロダクトから導き出してください。

プロダクトにすでに実際のブランド（ロゴファイル、色、書体など、スロップではないもの）がある場合は、それを維持し、その周りに方向性を構築してください。バイオレットからブルーのグラデーション、スパークル、グローは、ロゴにあってもスロップです。そのため、ユーザーがそう言わない限り、ブランドとしてカウントされません。

1. 間隔

• すべてが4pxグリッド上に配置されます。マージン、パディング、ギャップ、固定高さは4の倍数です。そのため、28や104はトークンリストにない場合でも問題ありません。小さなコントロール内の微調整には2pxステップで問題なく、何かを正確に中央に配置する奇数の値はそのまま残ります。
• 同じものは同じサイズ。リスト内のすべての行は1つの高さと1つのギャップを共有し、行内のすべてのカードは1つのパディングを共有します。
• スペースはグループ化を示します。グループ内のスペースはグループ間のスペースよりも小さいため、リストは1つのブロックとして読み取られ、セクションは別々のものとして読み取られます。
• ものが整列します。アイコンは1列に、ラベルは1行に始まり、数字は1列に右揃えになります。迷子のtransformや奇妙なマージンで線からずれるものはありません。
• パディングは密度に従います。コンパクトなパネルとサイドバーは約16、カードは20〜24、ページの端は24〜32です。
• ナビゲーションはアプリの中で最も密度の高い部分です。行の高さは32〜36で、行間は2〜4、アイコンは1列、ラベルは1行です。セクションラベルは、その上のセクションよりも、自身のアイテムの近くに配置されます（例：上24、下8）。パスの後にサイドバーを測定してください。ここで間隔が最も頻繁に壊れます。
• mt-[13px] や py-[11px] のようにリズムを壊す1回限りの値を削除し、スケールのステップに置き換えてください。

2. 色

• 方向性の世界に向けて着色された1つのニュートラルランプから構築してください。トークンからグラファイト、ウォーム、インクを選択するか、同じ方法で独自に着色してください。背景、隆起したサーフェス、境界線、テキストはすべてそのランプから取得されます。
• アプリやダッシュボードでは、背景、サーフェス、境界線、テキストはニュートラル（グラファイトランプまたは同等にグレーなもの）に保たれます。人々は何時間もそれらを見て、コンテンツが色を運ぶ必要があります。背景がオレンジ、茶色、青、または緑に見える画面は、やりすぎです。世界は、アクセント、チャート、瞬間に現れ、サーフェスには現れません。ランディングページは、サーフェスを世界に向けてさらに着色することができます。
• 3つのテキストロール：プライマリ、セカンダリ、ミュート。わずかに異なる10のラベンダーではありません。
• クロームでは、1つのアクセントを控えめに使用します。プライマリアクション、選択、または重要な1つの数値をマークします。
• 方向性からの瞬間は例外です。その内部では、色は豊かで、チャート内のいくつかの色相、実際のマテリアルを持つレンダリングされたオブジェクト、独自の光を持つ画像など、世界内に留まり、各色が何かを意味する限り可能です。
• ブランドに実際の色がある場合、それがアクセントになり、サーフェスから離れます。実際のブランドカラーがない場合は、世界からアクセントを取ってください。
• テキストが載っているアクセントは4.5:1のコントラストに達する必要があります。そうでない場合は、暗くするか、暗いテキストを載せてください。テキストまたはインクとして明るいサーフェスで使用されるアクセントは、同じコントラストが必要です。そのため、そこでより暗い色合いを使用してください。
• ダークテーマでは、プライマリボタンはランプからのオフホワイトに暗いテキストを載せたものにでき、アクセントは選択範囲や重要な数字など、より小さな場所に配置できます。これは、多くの場合、色付きのボタンよりも意図的に見えます。
• セマンティックカラーは、良い変化に緑、エラーに赤など、意味を運ぶ場合にのみ使用され、パレット内に収まるようにトーンダウンされます。
• サーフェス上の色相グラデーション、グラデーションテキスト、色付きグロー、色付きシャドウ、コンテンツの背後にある放射状の色のウォッシュやブロブ、ネオンの境界線を削除してください。
• 境界線は、テキストカラーのランプを6〜10%の不透明度にした、目立たないヘアラインです。
• ダークテーマでは、奥行きはサーフェスステップとヘアラインから得られ、シャドウからは得られません。画像の上に浮かぶウィンドウやオブジェクトは、ソフトなニュートラルシャドウを保持してもかまいません。ライトテーマでは、シャドウはニュートラルで、ソフトで、小さいものです。
• グラデーションは、アクティブな行が #2b2b2b から #1f1f1f になるなど、1つのニュートラル内での小さなトーンシフトとしてのみ許可されます。ある色相から別の色相へのグラデーションは決して許可されません。

3. アイコン

• アイコンまたはラベルの装飾として使用されるすべての絵文字は、1つのセットからのラインアイコンになります。プロジェクトにすでにあるセットを使用し、そうでない場合はlucideを使用します。
• すべてのアイコンで1つのサイズと1つのストローク、16または18pxで1.5ストローク。
• アイコンはテキストロールの色を取得し、通常はセカンダリまたはミュートです。それらが独自の色を持つことはありません。
• アイコンボックスはすべての行で同じ幅を持ち、ラベルへのギャップは8または10に固定されているため、ラベルが整列します。
• すべてのカードタイトルやすべてのセクションラベルの前の絵文字など、何も追加しないアイコンは削除してください。色を必要とするカテゴリは、小さなステータスドットを取得します。

4. コピー

• 見出しは、プロダクトが誰のために何をするかを平易な言葉で言い、他のプロダクトには当てはまらないようにします。すでにページにある事実を使用し、新しい事実を発明しないでください。
• インターフェイステキストに感嘆符は使用せず、決して !! も使用しないでください。
• Welcome back, Damir! 👋 のような挨拶の見出しは使用しないでください。タイトルは、ページ名や期間など、コンテキストを指定します（例：October 2026）。
• 短いラベル。Search anything... ではなく Search。
• 変更は、+12% vs last month や 3 fewer vs last month など、何と比較しているかを示します。
• 見出し、小見出し、ラベル、ボタン、キャプションはピリオドで終わりません。数文の段落のみピリオドを保持します。
• supercharge、seamless、unlock、magic、revolutionize、game-changing などの誇大広告的な言葉は使用せず、すべてに AI-powered も使用しないでください。
• Loved by 10,000+ teams や 10x faster など、確認できない主張は、ユーザーが実際のものだと確認した場合は控えめで具体的になり、そうでない場合は削除されます。質問し、レポートにリストアップしてください。
• モックデータは、[X] や 123,456 ではなく、もっともらしい数字と名前で実際のように見えます。
• PRO、New ✨、Beta 🚀 などのバッジは、プロダクトが本当に必要とする場合を除き削除され、その場合は控えめなテキストになります。

5. タイポグラフィ

• 方向性のキャラクターに合わせて、トークンのファミリーからタイポグラフィを選択してください。プロジェクトのフォントが実際のブランドの一部である場合は、それを維持してください。誰も選んでいないInterのようなデフォルトは、別のファミリーがキャラクターにより適している場合に交換されることがあります。インターフェイスには1つのファミリーに加え、トークンの任意の行から最大1つのパートナー（図表やメタ用のモノ、大きな見出し用のディスプレイフェイス）を使用します。
• スケールからのいくつかのサイズと2つのウェイト（400と500）を使用し、まれな強調のために最大600を使用します。700〜900の見出しは使用せず、グラデーションテキストも使用しないでください。
• 階層は、ウェイトではなくサイズと色から得られます。
• すべての場所でセンテンスケースを使用します。NAVIGATION や PAID THIS MONTH のようなワイドトラッキングのラベルは、Navigation や Paid this month になります。
• 小さなテキストにネガティブなカーニングは使用しないでください。小さなテキストの可読性は、大きくする、少し太くする、またはわずかにルーズにすることによって向上します。タイトなトラッキングは、大きなディスプレイテキストにのみ使用します。
• 数字は tabular-nums を使用し、画面全体で1つの形式にします。1つの図の場合、...