tasteskill v2

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

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

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

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

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

実行手順

以下の順序で実行します。ステップ1〜5は数分かかり、ページの品質を決定します。

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

現実のものを把握します。テーマ、オーディエンス、ページが訪問者に達成させたいこと、使用スタック、既存のブランド（色、フォント、ロゴ）、そして最も重要なのは実際に存在する画像です。プロジェクト独自の写真や商品写真、表示可能な実際のUI、呼び出せる画像生成ツール、または何もないこと。持っていない画像を計画してはいけません。独自のものがないことは、多くの場合、まったく何もないわけではありません。テーマの都市、通り、素材、歴史は、オープンアーカイブや博物館にあり、クレジットを記載すれば無料で使用できます（ステップ6、scripts/assets.mjs）。

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

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

2. 主張を書く

デザインの前に、references/copy.md §1に示されているように、ページを主張とその証明として、セクションごとに1行でリストします。主張が、どのセクションが存在し、どの順序で表示されるかを決定します。主張のないセクションは削除します。これが、ヒーロー、ロゴ、3つの機能、 testimonial、価格、CTAという定番の順序を避ける方法です。

3. 方向性を引く

node <skill>/scripts/draw.mjs --sector <sector> --brief "<one line about the subject>" \
  --sections <roles in the order of your argument> [--tone <tone>] [--have <assets>] [--keep palette,type] \
  --options 3

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

node <skill>/scripts/draw.mjs <the same arguments, without --options> --direction <chosen 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。ブリーフが明確に要求する場合にのみ渡します。
--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つの要素であり、遊び場ではありません。ステップ6でページの一部として構築され、ステップ9でモーションとして追加されるものではありません。

5. 言葉を書く

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

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

6. 構築する、静的に

頭の中でモーションをオフにしてページを構築します。アニメーションが必要で完成したように見えるページは、完成していません。作業順序：

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

…（以下、原文の残りの部分も同様に翻訳します。必要に応じてコンテキストに基づいて続けてください。）

7. 検査する

node <skill>/scripts/inspect.mjs <path-to-html-file>

これは、実際のブラウザでCSSプロパティを検査します。異議を唱えるスタイルがある場合は、違反として報告します。<skill>/rules/ には、各ルールの説明と修正方法が含まれています。

8. スクリーンショットを撮る

node <skill>/scripts/screenshot.mjs <url-or-local-server-url>

320px、768px、1280pxの3つの幅でスクリーンショットを撮り、.taste-skill/screenshots/ に保存します。

9. ルック＆フィックスループ

スクリーンショットを確認し、審査員の評価基準（references/jury.md）に従って評価します。問題があれば修正し、再びスクリーンショットを撮ります。ループを繰り返します。

10. レポートを書く

すべての手順、選択した方向性、アイデア、再描画の理由、検査結果、ルック＆フィックスループの結果をレポートにまとめます。

参照

references/copy.md: コピーライティングのガイドライン
references/jury.md: 審査員の評価基準
assets/base.css: ニュートラルなベースCSS
rules/: ハウススタイルルールのコレクション
scripts/draw.mjs: 方向性を引くスクリプト
scripts/inspect.mjs: CSSインスペクションスクリプト
scripts/screenshot.mjs: スクリーンショット撮影スクリプト
scripts/assets.mjs: 画像アセット検索スクリプト

ライセンスとクレジット

このスキルは、研究に使用されたサイトの所有者または作成者とは提携しておらず、それらを代表するものではありません。

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