williamsnieves/landing-factory

tasteskill v2

モデルによって構築されたページは、通常、モデルが見てきたすべてのページの平均のように見えます。中央に寄せられた3行の見出し、その上の小さなラベル、アイコンカードの行、ソフトなグラデーション、いくつかの細い罫線、そして等幅フォントのキャプション。そのどれも間違ってはいませんが、何も決定されていません。

このスキルは、それらのデフォルトを決定に置き換えます。4つの方法で。

1. スクリプトが方向性を提示し、あなたが選択します。 ルックを考案するように求められたモデルは、毎回カテゴリのデフォルトを選択します。scripts/draw.mjs は、研究された20の方向性から3つを提示し、あなたが主題のアイデアを最もよく伝えるものを選びます。その後、スクリプトは、247の実際のサイトから抽出されたライブラリから、タイプシステム、パレット、ヒーロー、セクション構成を展開します。
2. アイデアは主題から生まれます。 研究中、優れたサイトと忘れられがちなサイトを分けたのは、スタイリングではなく、対象そのものから取られたコンセプトでした。
3. 装飾のないハウススタイル。 実際のブラウザで scripts/inspect.mjs によって測定され、ルールが期待ではなくチェックされます。
4. あなたは自分が作ったものを見ます。 3つの幅でのスクリーンショット、審査員のルーブリック、修正、再確認。

テストで学んだ警告が1つあります。装飾を取り除くことは仕事の半分に過ぎません。ラベル、罫線、カードを失い、何も得られなかったページは薄っぺらく読め、盲目の審査員は、空のページよりも、それらを持つ豊かなページを正しく好みます。残りの半分は実質です。より大きなタイポグラフィ、色のフィールド全体、この主題の世界の実際の写真（見つけた、または描いたもの）、そしてすべてのセクションが完全なコンテンツを保持することです。このスキルはそれを提供するために構築されています。控えめさと引き換えにしないでください。

以下のコマンドで、<skill> はこのスキルのフォルダです。プロジェクトのルートから実行し、作業ファイルはそこにある .taste-skill/ に配置されます。スクリプトは Node 22+ とインストールされた Chrome、Edge、または Chromium を必要とし、何もインストールしません。assets.mjs はネットワークアクセスも必要としますが、API キーは使用しません。

実行手順

これらを順番に実行してください。ステップ1〜5は数分かかり、ページの良し悪しを決定します。

1. ブリーフとプロジェクトを読む

何が現実かを調べます。主題、対象者、ページがユーザーにさせたい唯一のこと、スタック、既存のブランド（色、フォント、ロゴ）、そして何よりも実際に存在する画像：プロジェクト独自の写真や製品ショット、表示可能な実際のインターフェース、呼び出せる画像生成ツール、または何もないこと。持っていない画像を中心に計画しないでください。独自のものがないことは、ほとんどの場合、まったく何もないわけではありません。主題の都市、通り、素材、歴史はオープンアーカイブや博物館にあり、クレジットを記載すれば無料で使用できます（ステップ6、scripts/assets.mjs）。

リクエストが曖昧な場合は、質問する代わりに、あなたの解釈を1行で決定して述べてください。不足している事実が作業を妨げる場合にのみ質問してください（例：製品名がない場合）。

次に、対象をノートにリストアップします。このクライアントに属し、競合他社には属さない8〜12の項目。名前とその意味を探します。住所、ドア番号、通り、近隣、そしてその場所の外観（タイル、看板、ペンキの色、店先の書体、光、天候）。ブリーフ内の数字（席数、部屋数、海までの分数、価格、年）。それが抱える制約（月に1バッチのみ、冬は休業、予約制）。素材と色。儀式と時間（5時にオーブン点火、7時のフェリー）。その世界の印刷物（時刻表、ラベル、チケット、看板）。このリストは、ステップ4でアイデアが生まれる場所です。ブラインドテストでは、各ブリーフで勝ったページは、そのようなリストの項目（クライアントの名前とその意味、それが位置する通り、それを特徴付ける1つの制約）から構築され、負けたページはカテゴリのアイデアで良い構成を持っていました。このリストはあなたの画像検索でもあります。各場所、素材、印刷物は、ステップ6のクエリになります。

2. 引数（主張）を書く

デザインの前に、ページを主張とその証拠としてリストアップし、references/copy.md §1 に示されているように、セクションごとに1行ずつ記述します。主張は、どのセクションが存在するか、どの順序で表示されるかを決定します。主張がないセクションは削除してください。これにより、ヒーロー、ロゴ、3つの機能、お客様の声、価格、CTA という定型的なシーケンスを回避できます。

3. 方向性を描く

node <skill>/scripts/draw.mjs --sector <sector> --brief "<主題に関する1行>" \
  --sections <あなたの引数の順序での役割> [--tone <tone>] [--have <assets>] [--keep palette,type] \
  --options 3

これにより、3つの方向性が提示され、それぞれの短い要約が出力されます。それぞれをあなたのインベントリと照らし合わせてください。どの構成方法が、このクライアントだけが持つ何かを伝えられるでしょうか？最も馴染みのあるものではなく、それを選び、その理由をノートに1行書き留めてください。テストでは、主題に合わない単一のランダムな方向性が、弱いページの最も一般的な原因でした。その後、フルシートを展開します。

node <skill>/scripts/draw.mjs <同じ引数、--options を除く> --direction <選択したID>

• --sector：node <skill>/scripts/draw.mjs --list sectors。最も近いものを選んでください。
• --sections：--list roles からの役割（features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact）。ヒーローは暗黙的に含まれます。
• --tone（オプション）：quiet、bold、warm、technical、playful、luxury、editorial。ブリーフが明確に1つを要求している場合にのみ渡してください。
• --have：実際に存在するアセット（カンマ区切り）。photography（場所、人、作品のプロジェクト独自の写真）、product-photo（特定の製品の写真、またはそれらを作成できる画像ツール）、product-ui（実際のスクリーンショット）、illustration、video。何もない場合は省略してください。その場合、描画はそれらに依存する構成を回避し、シートには画像スロットを誠実に埋める方法が記載されます（ソフトウェアはHTMLで構築された独自のインターフェースを表示し、写真のない製品は、偽の製品ショットではなく、その世界の実際の画像の中に描かれて配置されます）。オープンコレクションで見つける画像はプロジェクト独自のものではないため、--have からは除外してください。
• --keep palette,type：ブランドがすでに色や書体を固定している場合。その場合、描画は構成のみを提供し、ブランドの値を役割にマッピングします。

コマンドは方向性シートを出力します。これはこのビルドのアートディレクションです。

• それを採用してください。 あなたが通常作成するであろうレイアウトと混ぜないでください。馴染みがないと感じるなら、それは良いことです。馴染みのあるレイアウトこそ、このスキルが存在する目的です。
• 1つのスロットを再描画する（--redraw hero | type | palette | photos | section:<role> | direction）のは、述べられる理由がある場合のみにしてください。それは、述べられたブランドの制約と矛盾する、または存在しないアセットを必要とするなどです。より快適なものを得るために再描画しないでください。すべての再描画をレポートに記録してください。
• 扱われたセクションが実際のコンテンツを保持できない場合（3つのプランを比較しているのに価格が1つしかない、5つの引用が必要なのに何もないなど）、コンテンツを適合させるために曲げないでください。--alternatives <role> で他のセクションをリストアップし、その前提がコンテンツに一致するものを選び、--redraw section:<role>=<id> で採用してください。
• パレットを主題と照らし合わせて確認してください。 扱われるパレットは、色のセットであると同時に、比率（1つのグラウンド、1つのインク、1つのアクセント、フィールド）のセットでもあります。その色が主題自身の素材と競合する場合（ピートウイスキーにキャンディー色のパステル、山小屋にネオン）、パレットを1回再描画してください。主題が紛れもない独自の色を持っている場合（その素材、通りのペンキ、窓の外の風景）、扱われた比率を維持し、代わりに主題から色を取得し、その旨をレポートに記載してください。
• node <skill>/scripts/draw.mjs --show でいつでも再印刷できます。長いセッションでは、各セクションを構築する前に再読してください。

4. アイデアを見つける

方向性は構成の方法です。アイデアは、このページをこの主題にのみ属させ、他の何にも属さないようにするものです。この文をノートに書き、両方の空白が主題自身から埋まるまで構築を開始しないでください。

このページでは、[主題に属する何か] が [方向性が求めるデバイス] になります。

最初の空白を探す場所：

• そのアウトプット。 そのものは何を生み出しますか？実際のアウトプットを素材としてページに配置します。（詩を印刷するカメラは、そのコピーを紙片として届けました。）
• そのオブジェクトまたは形状。 物理的にどのように見えますか？断面図、シルエットで。拡大し、トリミングし、フレームや唯一のモチーフにします。
• その名前。 文字は写真を保持できますか？壁に積み重ねられますか？2つの角に分割できますか？
• その場所。 誰かをそこに連れて行きたくなるような眺めはありますか？
• その儀式。 スクロールに応じてページが実行できるシーケンスはありますか？
• その人工物。 その世界にすでに存在する印刷物は何ですか？チケット、メニュー、ラベル、レシート、招待状、フォルダ、マニュアル？
• その反対。 この1つに欠けている感情を、どの他のカテゴリが所有していますか？

最初の空白を、カテゴリではなく、あなたのインベントリ（ステップ1）から埋めてください。競合他社テスト： 最も近い実際の競合他社（2つ先のパン屋、別のオーク材家具職人、同じ山の別の小屋）を文に当てはめてみてください。それでも文が成立する場合、そのアイデアはカテゴリに属しています。一斤のパンはすべてのパン屋にあります。このパン屋の名前の由来となった通りの7つのドアは、このパン屋だけのものです。「クリーンでモダン」はアイデアではありません。研究パネルが最も低いスコアをつけたサイトは、そのアイデアが「標準的な公式以外には記録されていない」ものでした。

1つのライブなもの。 ページに、訪問者ができること、または訪問ごとに異なる何かを1つ与えてください。アイデアから作られたもの。木材を選んでその椅子を見る、あなたの名前を入力して鋳造所の文字でカットされたものを見る、ローンを設定して実際の月々の金額を読む、小屋のストーブが今点いているかどうか、最終フェリーまでどのくらいの時間があるかを確認する、サイズを選んで部屋の中でそれを見る。ブラインドテストでは、すべての勝者ページに1つあり、審査員はそれを最初に挙げました。ルール：主題の実際のコンテンツを使用し、親指でスマートフォン上で動作し、スクリプトなしのプレーンなフォールバックを持ち、読み取りをブロックせず、遊び場ではなく1つのものであること。これはステップ6でページの一部として構築され、ステップ9でモーションとして追加されるものではありません。

5. 言葉を書く

マークアップの前に、references/copy.md に従って、ページ全体をコピーデッキ（プレーンテキスト）として記述します。

• すべての見出しは、すべての幅で2行以下に収まります。 文を確定する前に、copy.md §2 で計算を行ってください。自信のあるサイズでは、約32文字がどこでも安全です。調査されたギャラリーヒーローの見出しは、中央値で5ワード、32文字でした。
• 1つの補足文。1つの主要なアクション。それが何をするのかを示す名前で、最初の画面に実際のボタンとして配置します。
• 最初の画面は、訪問者の最初の質問に大きなタイプで答えます。 イベントの場合：何か、いつ、どこで（日付は見出しまたは2番目のサイズに属し、小さなテキストだけに決して入れてはいけません）。製品の場合：何か、そしてその価格または機能。人物の場合：誰か、そして何をしているか。訪問者が求めてきたすべてのセクション（ラインナップ、メニュー、部屋、価格）には、独自の見出しとナビゲーション内の独自の場所があります。
• 完全なコンテンツを記述してください。 ブリーフが求めるすべてのセクションは、その情報を完全に提供します。価格付きの完全なメニュー、各部屋の詳細、すべてのスピーカーとトーク、含まれるものの内訳、それぞれの実際の質問への回答。薄いセクションは、クリーンなページがより賑やかなページに負ける最も一般的な理由です。
• ブリーフにギャップがある場合（料理名、部屋名と料金、プロジェクトタイトル）は、サンプル詳細が期待され、デザインがフルデンシティで見られるようにします。それらをレポートにリストアップして、クライアントが確認できるようにします。証拠は決して発明されてはなりません。顧客、引用、レビュー、プレス、ロゴ、ビジネス統計はありません。

6. それでも構築する

頭の中でモーションをオフにしてページを構築します。アニメーションが必要なページは、完成ではありません。作業の順序：

1. トークン。 シートからの色とタイプの役割をCSSカスタムプロパティとして定義します。後続のすべてはトークンのみを参照します。<skill>/assets/base.css は、出発点として使用できるニュートラルな基礎です（リセット、トークン名、可変タイプステップ、グリッド、フォーカスと選択スタイル、モーションヘルパー）。独自のルックはありません。
2. ヒーロー。 ブループリントの説明どおりに、デスクトップと電話の幅で。他のすべてが存在する前に、大きなものを大きく、小さなものを小さくします。
3. ブループリントからの各セクション。 このプロジェクトのコンテンツを使用します。ジオメトリを維持し、主題を変更します。隣接するセクションはレイアウトを共有してはいけません。アイデアをすべてのセクションに適用してください。 価格、FAQ、フッターも含めて。研究における最も一般的な失敗（優れたサイトでも）は、特徴的な最初の画面の後に標準的なブロックが続くことです。
4. 画像。 以下の優先順位で：
   1. プロジェクト独自のもの。
   2. 画像ツールがある場合は生成されたもの。
   3. オープンコレクションからの、主題の世界の実際の画像。 正直なものが存在する場合は常に。node <skill>/scripts/assets.mjs "<query>" で検索します（Openverse、Wikimedia Commons、シカゴ美術館、メトロポリタン美術館。デフォルトで商用利用を許可するライセンスのみ）。カテゴリではなく、インベントリを検索します。古い絵葉書に写ったその通り、近隣の古地図、その素材のクローズアップ、版画でのその商売、その種類の博物館のオブジェクト、植物図版、星図。それらを大きく、意図を持って使用します。1枚のアーカイブ写真をヒーローに、版画をページのモチーフに拡大、通りの実際の地図をコンタクトセクションに。選択する前にそれぞれを見てください。--get <ref> はそれを assets/ にダウンロードし、そのソースとライセンスを記録します。--credits はフッター用のクレジット行を出力します。見つけた画像はクライアントの周りの世界を示し、クライアント自身の製品、部屋、料理、人物、チームとして提示されることは決してありません。
   4. HTML/CSSで描画または構築。 主題の世界からの実際の画像が存在しない場合、または画像がアイデアを伝えられない場合。形状、パターン、図、比率。写真のように振る舞おうとせず、グラフィックとして正直に振る舞います。

注意

元のSKILL.md文書はここで切り詰められています。完全な内容については、ソースリポジトリを参照してください。