Maikozort/claude-skills

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でアイデアが生まれる元です。ブラインドテストでは、各ブリーフで勝利したページは、そのようなリストの項目（クライアントの名前とその意味、それが立つ通り、それを特徴付ける唯一の制約）から構築され、負けたページはカテゴリのアイデアを持つ優れた構成でした。このリストはまた、あなたの画像検索でもあります。リスト内の各場所、素材、印刷物は、ステップ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。何もない場合は省略します。そうすると、drawはそれらに依存する構成を避け、シートは画像スロットを正直に埋める方法を示します（ソフトウェアはHTMLで構築された独自のインターフェースを表示し、写真のない製品は描画され、実際の世界の画像の中に配置され、決して偽の製品ショットは使用しません）。オープンコレクションで見つける予定の画像はプロジェクト自身のものではありません。--have には含めないでください。
• --keep palette,type: ブランドが既に色や書体を固定している場合。その場合、drawは構成のみを提示し、ブランドの値を役割にマッピングします。

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

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

4. アイデアを見つける

ディレクションは構成の方法です。アイデアは、ページをこの主題だけのものにするものです。メモにこの文を書き、両方の空白が主題自体から埋められるまで構築を開始しないでください。

このページでは、[主題に属する何か] が [ディレクションが求める装置] になる。

最初の空白を探す場所：

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

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

一つの生きたもの。 ページに、訪問者ができること、または訪問ごとに異なることを一つ与えてください。アイデアから作ります。木材を選んでその椅子を見る、自分の名前を入力して鋳造所の活字で刻まれるのを見る、ローン額を設定して実際の月々の金額を読む、小屋のストーブが今ついているか、最終フェリーまであとどのくらいかを見る、サイズを選んで部屋の中での見え方を確認する。ブラインドテストでは、すべての勝利ページにこれが一つあり、審査員はそれを最初に挙げました。ルール：主題の実際のコンテンツを使用し、親指でスマートフォン上で動作し、スクリプトなしでプレーンなフォールバックを持ち、読むことを妨げず、一つのことであり、遊び場ではありません。これはステップ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、シカゴ美術館、メトロポリタン美術館。デフォルトでは商用利用を許可するライセンスのみ）。カテゴリではなく、目録を検索します。その通りの古い絵葉書、近隣の古地図、素材のクローズアップ、版画でのその職業、その種類の博物館の品、植物図譜、星図。意図を持って大きく使用します。ヒーローとしてのアーカイブ写真、ページのモチーフに拡大された版画、コンタクトセクションとしての通りの実際の地図。選択する前にそれぞれを見てください。--get <参照> はそれを assets/ にダウンロードし、そのソースとライセンスを記録します。--credits は...

...（翻訳はSKILL.mdの内容に従って続きます）