ウェブデザインは何をしますか？

生成UIには決まった形の失敗があります。同じフォント、同じ紫のグラデーション、カードの中のカード、中央寄せのヒーローに3つのアイコンタイル、装飾で意見の代わりをする。このスキルはデフォルトを意思決定で置き換え、レンダリング結果をチェックします。

以下の<skill-dir>はこのスキル自体のフォルダを意味します。プロジェクトルートからスクリプトを実行してください。出力はインストールされたスキル内ではなく、プロジェクト内に配置されます。

1. デザインコンテキストの読み込みまたは作成

DESIGN.md（同様にdocs/DESIGN.md、BRAND.md）を探します。存在する場合は、UIに触れる前に読み込みます。そのトークンとルールがあなたの好みより優先されます。存在せず、作業が小さな修正以上の場合は、テンプレートからコードを読んで作成します。CSS/Tailwind Configからの実際のトークン、実際のフォント、実際のコンポーネントを使用します。推測したものは推測としてマークします。

セッションで永続的な決定（新しいトークン、却下した方向性とその理由）が行われた場合、DESIGN.mdを更新します。これにより、次のセッションがデフォルトに後退するのを防ぎます。

2. 方向性を決める

まずモードに名前を付けます。 それによって表面にどれだけの大胆さを与えるかが決まります。

説得（ランディング、価格、ローンチページ）：デザインが製品そのものです。はっきりとした意見を持ちます。
操作（アプリUI、ダッシュボード、設定、フォーム）：正確さと抑制。親しみのあるパターンはその価値を証明します。ブランドは細部に宿ります。
読む（ドキュメント、記事、チェンジログ）：理解のために構造化し、読みやすさを追求します。
体験（ポートフォリオ、ショーケース、ゲーム）：作品が主役で、インターフェースは控えめにします。

リファインかリデザインか？ リファインは現在のアイデンティティ、コピー、動作を維持し、その範囲内で改善します。リデザインは製品の事実と機能を維持しつつ、外観を完全に置き換えます。破棄する予定の見た目を磨いて妥協してはいけません。

コードを書く前に、2つのパスで計画します。

パス1、計画：

ジョブ：誰がここにいるのか、最初に必要なもの、次のアクション。
パレット：4～6の名前付き16進数カラー。アクセントが許可される場所も指定。
タイポグラフィ：書体とその役割、スケール、数字。
レイアウト：一文とおおまかなASCIIワイヤーフレーム。配置を明示。
一つの大胆な要素：記憶に残る単一の要素。その他の要素は控えめにします。

パス2、汎用性テスト：この計画を同様の概要に対して作成しただろうか？現在のAIデフォルトの見た目と照らし合わせます（これらは時間とともに変化します）。クリーム色の背景にセリフ体の見出しとテラコッタのアクセント、ニアブラックに一つのアシッドアクセント、大判紙のヘアラインなどが今日のクラスターです（昨年の紫グラデーションのように）。計画の一部が、概要が要求していないデフォルトと一致する場合、それを置き換え、何をなぜ変更したかを書き留めます。概要の言葉が常に優先されます。たとえこれらの見た目のいずれかを要求している場合でも同様です。

対象の世界から選択します：その素材、場所、人工物、語彙。犬の散歩サービスのサイトとアナリストのダッシュボードは、パレットを交換できるようであってはいけません。

ユーザーが参考資料を提供した場合、適切に調査します：参考資料の調査では、ライブサイトから計算されたスタイルを取得し、表面の装飾ではなく、関係性（スケール、リズム、密度）を借用します。

3. プロダクトのシステム内で構築する

既存のトークン、プリミティブ、コンポーネントを使用します。一回限りの値を追加する前に、トークンを追加します。
実際のコンテンツのみ：実際の名前、長い名前、実際の数字、空のデータ。ダミーテキストは決して使わず、レイアウトを埋めるための架空のメトリクスも使用しません。
画面とともに状態をデザインします：ローディング、空、エラー、成功、無効、オーバーフロー。壊れたように見える空の状態はバグです。
言うことがないものは隠します。ゼロ行、ゼロ残高、空のチャートは、正直な空の状態になるか、消えます。ゼロの壁は作りません。
ヘッダーはラベルです。ヘッダーを言い換えるサブタイトルは削除します。
モバイルはそれ自体のレイアウトです：優先順位で並べ替え、デスクトップがグリッドを使う場所では水平スナップレールを使用、100vhではなくdvh/svh、入力は16px以上、タップターゲットは44px以上。

クラフトフロアのラインを、最終パスではなく構築中に守ります。アニメーションやトランジションについては、先にモーションを読んでください：一つのオーケストレーションされた瞬間、小さなタイミングシステム、中断に強い、動きの縮小に対応、フィルムストリップとして監視します。

4. 見てみる

node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --full          # 390 + 1440、ライト＋ダーク
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --widths 320,390,768,1440 --themes light
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --click '[aria-controls=menu]' --widths 390

すべてのスクリーンショットを開き、実際に読みます。次に、以下の順序で確認します。

最初の読み取り：目を細めて見ます。最も重要なものが最も目立っていますか？これが何で、何をすべきか3秒でわかりますか？
壊れている：オーバーフロー、クリップされたテキスト、重なるレイヤー、孤立した単語、見えないフォーカス、ダークモードのコントラスト。shoot.mjsはこれらのいくつかをフラグします。その出力を確認します。
階層とリズム：見出しの上より下に多くのスペース。グループ内で一貫したギャップ、グループ間ではより大きいギャップ。ビューあたり一つのプライマリアクション。
汎用性：deslopのスキャンを実行するか、アンチパターンを確認します。ロゴを削除したスクリーンショットから、第三者がこの製品を推測できますか？
クラフト：2倍でピクセル単位の配置、アイコンとテキストの光学バランス、カラム内の表組み数字。

最悪の問題を修正し、再撮影し、繰り返します。同じ幅と状態の参考資料と比較します。新しい作業では、通常2～3回のフルループです。

5. 完了

検査したスクリーンと状態（幅、テーマ）、行った決定、検査しなかったもの（到達できなかった認証状態、持っていなかった実際のデータ）を報告します。DESIGN.mdの変更をUIとともにコミットします。

ルール

ユーザーの概要とDESIGN.mdがこのスキルより優先されます。ブランドが紫のグラデーションなら、それは紫のグラデーションです。
ローカルな変更のために新しいUIライブラリ、アイコンセット、フォントを追加しないでください。
ソーシャルプルーフ、 testimonial、ロゴ、ユーザー数、「Trusted by」をでっち上げないでください。
ライブ感を偽装しないでください。実際のデータがその周期でバックアップしていない限り、パルスする「Live」ドット、ティッカー、アクティビティは使用しないでください（「10秒ごとに更新」はそれが真実の場合のみ）。
異なる状態（送信済み、承認済み、確認済み）を一つの成功チェックマークに決してまとめないでください。

ウェブデザイン