Leonxlnx/taste-skill

AI のコーディングエージェントに読ませる指示書（スキル）を集めたリポジトリだ。AI に Web ページを作らせると、紫のグラデーション、中央寄せの大見出し、同じ大きさのカードが3枚並ぶ、といった決まった見た目になりやすい。こうした「ありがちな形」を避け、レイアウト・文字組み・動き・余白を作り込ませるための決まりごとが、SKILL.md というファイルに書かれている。README によれば Codex・Cursor・Claude Code などで使え、React・Vue・Svelte のどれにも使えるよう、特定のフレームワークではなくデザインの意図を対象にしている。

中心になるのは taste-skill で、いまは大きく書き直した v2 が「実験版」として既定になっている。書き始める前に依頼文を読んで、どんなページを誰に向けて作るのかを1行で宣言させ、そのうえでつまみを3つ（レイアウトの冒険度・動きの量・情報の詰め具合、それぞれ1〜10）合わせてから作らせる。長いダッシュ記号（—）を禁止するといった細かい決まりも入っている。

ほかに、GPT・Codex 向けに締め付けを強めたもの、既存のサイトを点検してから直すもの、落ち着いた高級感・ミニマル・ブルータリズムといった方向別のもの、途中で省略せず最後まで出力させるものなど、用途ごとに分かれている。コードではなく参考画像だけを作るスキル（Web・スマホの画面案、ブランドの素材一式）もあり、ChatGPT Images などで作った画像を、あとからコーディングエージェントに渡して実装させる使い方が想定されている。

AIに作らせたページが、どれも似た見た目になってしまうとき

ランディングページやポートフォリオを AI に任せると、配色や並びが毎回同じ型に収まりがちだ。指示書を読ませることで、避けるべき形と、依頼に合わせた方向の決め方をエージェントに渡せる。見た目の方向性がすでに決まっているなら、ミニマル・ブルータリズムなどの方向別スキルを足す。

画面の案を先に絵で固めてから、実装に回したいとき

画像生成向けのスキルで Web やスマホの画面案、ブランドの素材一式を作り、その画像をコーディングエージェントに渡せる。生成から画像の読み取り、実装までを1つの流れでやらせるスキルも用意されている。

既定のスキルは実験版。 既定の taste-skill は v2 で、README は「実験版」としている。v1 の挙動に頼っている場合は、v1 を名指しで入れれば固定できる。

向いていない画面がある。 taste-skill の指示書自体に、対象はランディングページ・ポートフォリオ・リデザインで、ダッシュボードやデータの表、手順の多い業務画面は対象外だと書かれている。既定の v2 で管理画面を作らせたい人には合わない。

コマンドで入れるなら、外部の道具を使う。 導入は npx skills add というコマンドを使う方法が案内されている。SKILL.md を自分のプロジェクトにコピーしたり、会話に貼り付けたりする方法もある。

名前を使った暗号資産とは無関係。 README は、公式のトークンや暗号資産は存在せず、作者の名前や画像を使ったものは無関係だと明記している。