tasteskill v2 – アンチ・スロップ フロントエンドスキル

tasteskill v2

モデルが構築したページは、大抵、モデルが見てきたあらゆるページの平均のように見える。すなわち、3行の中央寄せ見出し、その上の小さなラベル、アイコンカードの行、ソフトなグラデーション、いくつかの細い罫線、モノスペースのキャプション。間違っているものは何もなく、決断されたものも何もない。

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

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

テストで学んだ一つの警告。装飾を取り除くことは仕事の半分に過ぎない。ラベル、罫線、カードを失い、その代わりに何も得ていないページは薄く読まれ、盲目の審査員は、それらがない空のページよりも、ティル（特徴的な兆候）のある豊かなページを正しく好む。残りの半分は実質だ: より大きく設定されたタイポグラフィ、色のフィールド全体、この主題の世界の実際の写真（見つけたもの、または描いたもの）、そして各セクションが完全なコンテンツを運ぶこと。このスキルはあなたにそれを与えるために構築されている。それを抑制と引き換えにしてはならない。

以下のコマンドで、<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でアイデアを得る場所である。盲検テストでは、各概要で勝ったページは、そのようなリストの項目（クライアントの名前とその意味、それが位置する通り、それをそのままにする唯一の制約）から構築され、負けたページはカテゴリのアイデアを持った良い構成だった。リストはまた、あなたの画像検索でもある: その中のすべての場所、素材、印刷物はステップ6のクエリである。

2. 主張を書く

デザインの前に、ページを主張とその証拠としてリストアップする。references/copy.md §1 に示されているように、セクションごとに1行。主張はどのセクションが存在し、どの順序で並ぶかを決定する。主張のないセクションはすべて削除せよ。これが、ヒーロー、ロゴ、3つの特徴、お客様の声、価格、コールトゥアクションという定型シーケンスを回避する方法である。

3. 方向性を引く

node <skill>/scripts/draw.mjs --sector <セクター> --brief "<主題についての一文>" \
  --sections <あなたの主張の順序でのロール> [--tone <トーン>] [--have <アセット>] [--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:<ロール> | direction）のは、述べられる理由がある場合のみ: それは述べられたブランド制約と矛盾する、または存在しないアセットを必要とする。より快適なものを得るために決して再描画してはならない。すべての再描画をレポートに記録せよ。
• 提示されたセクションが実際のコンテンツを保持できない場合（3つのプランを比較するのに価格が1つしかない、5つの引用を必要とするが存在しないなど）、コンテンツを適合させるために曲げてはならない。--alternatives <ロール> で他のものをリストし、コンテンツの前提に一致するものを選び、--redraw section:<ロール>=<ID> で採用せよ。
• パレットを主題に対してチェックせよ。 提示されたパレットは、色のセットと同じくらい、比率のセット（1つのグラウンド、1つのインク、1つのアクセント、フィールド）である。その色が主題自身の素材と衝突する場合（ピートウイスキーにキャンディパステル、山小屋にネオン）、パレットを一度再描画せよ; 主題に紛れもない独自の色がある場合（その素材、その通りのペンキ、その窓の外の風景）、提示された比率を維持し、代わりに主題から色を採用し、その旨をレポートに記述せよ。
• node <skill>/scripts/draw.mjs --show でいつでも再表示できる。長いセッションでは、構築する各セクションの前にそれを再読せよ。

4. アイデアを見つける

方向性は構成の方法である。アイデアは、このページをこの主題だけのものにし、他の何ものでもなくするものである。以下の文をノートに書き、両方の空白が主題自体から埋まるまで構築を始めてはならない:

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

最初の空白を探す場所:

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

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

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 "<クエリ>" で検索せよ（Openverse、Wikimedia Commons、シカゴ美術館、メトロポリタン美術館; デフォルトでは商用利用を許可するライセンスのみ）。カテゴリではなく、インベントリを検索せよ: 古いはがきの中のその通り、近隣の古地図、アップの素材、版画の中のその商売、その種類の博物館のオブジェ、植物図版、星図。大きく意図を持って使用せよ: ヒーローとしての1枚のアーカイブ写真、ページのモチーフに拡大された版画、コンタクトセクションとしての通りの実際の地図。選択する前にそれぞれを見よ; --get <参照> はそれを assets/ にダウンロードし、そのソースとライセンスを記録する; --credits はフッターのクレジット行を出力する。見つけた写真はクライアントの周りの世界を示し、クライアント自身の製品、部屋、料理、人物、チームとして提示されることは決してない;
   4. 主題の世界から描かれたもの。主題を綿密に示す図面（ロゴの線画から拡大、その製品の断面図、掲示板のスケッチ）;
   5. 主題の要素と厳密に結びついたパターンまたはテクスチャ（壁紙、タイルパターン、印章）;
   6. 抽象的な形状またはグリッド。残っているスロットを埋めるためだけに使用され、画像の代わりとしては使用されない。

検査と修正ループ

7. 検査してレポートする

node <skill>/scripts/inspect.mjs

node <skill>/scripts/inspect.mjs --report

これにより、.taste-skill/report/ にレポートファイルが作成される。報告された違反を修正せよ。

8. スクリーンショットを撮り、分析する

node <skill>/scripts/screenshot.mjs --widths 360,768,1280 --full

node <skill>/scripts/analyze.mjs

9. フィックスループ

レポートとスクリーンショット分析に基づき、CSSとHTMLを修正せよ。

10. 最終報告

node <skill>/scripts/report.mjs --final