「AIにコーディングさせるとデザインがどこか安っぽくなる」問題に効くというOSS「taste-skill」を、実際に当サイトの2ページで検証してみました。この記事では、GitHubで5.7万スターを集める話題のSKILL.mdファイルの中身と、元デザインが良いページ・伸びしろのあるページそれぞれに適用した実測結果を、誇張なく報告します。
- 話題のOSS「taste-skill」の正体と導入方法
- 当サイト2ページに実際に適用したBefore/Afterの実測結果
- 実運用で気をつけたい注意点3つ
ぶるすなさん最近X（旧Twitter）でよく見かける「taste-skill」ってOSS、知ってる？
AIコーディングエージェントに読ませるだけでUIデザインの品質が上がるっていう、SKILL.mdファイル1本のリポジトリなんだけど。
SKILL.mdを読ませるだけ？ なんだか怪しくないですか？
ぶるすなさん怪しいと思うのが健全な反応だと思う。
だからこそ今回は「話を聞いた」だけで終わらせず、実際に当サイトの2ページに適用して、Before/Afterを自分の目で確認してみたよ。
こっちゃん結論だけ先に言っちゃうと？
ぶるすなさん「元々デザインが整っていたページ」では上品な微改善どまり。「伸びしろがあったページ」では視覚言語ごと刷新されて、体感としてはっきり変わった。
同じスキルでも、対象ページの状態次第で結果の振れ幅がかなり大きい。図にするとこういうことだよ。
taste-skillとは何か
ぶるすなさんまず前提から。taste-skillはGitHub上のリポジトリ（Leonxlnx/taste-skill）として公開されているオープンソースで、中身は実行プログラムではなく、AIコーディングエージェント向けの「読み込ませるルールファイル」1本（SKILL.md）が本体。基本情報を表にまとめておくね。
| 項目 | 内容 |
|---|---|
| リポジトリ | Leonxlnx/taste-skill（GitHub） |
| ライセンス | MIT |
| スター数 | 57,864（2026年7月6日時点） |
| フォーク数 | 3,947 |
| 実体 | SKILL.md 1ファイル（1,206行・約87KB） |
| 対応ツール | Claude Code・Cursor・Codex・Gemini CLI など |
こっちゃんプログラムじゃなくて、ただの説明書みたいなファイルってことですか？
ぶるすなさんそのとおり。SKILL.md本体は1,206行のテキストで、中身は大きく分けて次の4つの要素で構成されているよ。
- タイポグラフィ・余白・配色・モーションの具体的なルール
- 「いかにもAIが作った感」が出る禁止パターン集（AI Tells）
- 既存ページを改修する際の手順（まず監査から入る、という考え方）
- 納品前に確認すべきチェックリスト
りっちゃん読ませるだけで何でも良くなる魔法なら、世界中のデザイナーはとっくに南の島で昼寝してるよ。
ぶるすなさん身も蓋もない言い方だけど、実態はそのとおりで「地道なルール集」なんだよね。魔法のように持ち上げる類のものではない。
そのぶん導入自体は非常に簡単で、SKILL.md対応のツールなら次のコマンド一発で追加できる。
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend導入が簡単なのは分かりましたけど、どんなページにでも効くんですか？
ぶるすなさんtaste-skillが得意なのはLP・ポートフォリオ・リデザインの領域。一方で、ダッシュボードやデータテーブル、多段階のウィザードUIは公式ドキュメント（§13）で明確に対象外とされている。
また現行のv2は作者自身が「実験段階」と明記していて、完成された銀の弾丸というトーンでは語られていないよ。
こっちゃんじゃあ実際どこまで効くのか、当サイトのページで試してみたと。
検証①：元デザインが良いページに使うと「上品な微改善」止まりだった
ぶるすなさん1つ目の検証対象は、当サイトのトレードタロット。夜空×蝋燭×金というミスティックな世界観がすでに固まっていたページだよ。
ここに適用したのが「Redesign – Preserve」モード。taste-skillの2つのモードの違いを先に整理しておくね。
| モード | 保持するもの | 変えるもの |
|---|---|---|
| Redesign – Preserve | IA・DOM構造・JS（ロジック） | 見た目の質感のみ |
| Overhaul | コンテンツ・情報設計（IA） | 視覚言語（配色・質感・装飾） |
こっちゃんJSにも手を入れないんですか？ 占いの抽選ロジックとか壊れそうで怖いです。
ぶるすなさんそこは実際に機械的なチェックをかけていて、結果は次のとおり。
- 改修前後で全5つの<script>ブロックがバイト単位で完全一致（抽選ロジック本体を含む）
- 変更は<style>ブロックとカードの縁取り用マークアップ1点のみ
こっちゃん裏側の抽選ロジックには一切触れずに見た目だけ変えられるんだ…！
ぶるすなさん具体的に変わったのは次の4点。
- カードの枠：単色の線 → 箔押し風のグラデーション枠
- 見出しまわりの明朝体の使い分けを強化し、階層にメリハリを追加
- 問いパネル・読み解きパネルの余白を拡張し、呼吸感を追加
- カードがめくれる際のeasing（動きの緩急）を上質なカーブに調整
こっちゃん正直、パッと見ただけだと「あれ、何が変わったの？」ってなるレベルだね。
れおしゃんBefore/Afterクイズにしたら、正答率はコイン投げと互角だと思う。
ぶるすなさんそのくらい「並べて初めて分かる」改善なんだよね。ただ、元のデザインがすでにブランドとして機能していたから、提案が大きな刷新ではなく細部の質感磨きに収まった。
これはtaste-skillの限界というより、Preserveモードの正しい振る舞いだと思う。「劇的に変わった」とは言わない。地味だけど、狙いどおりの結果だよ。
検証②：伸びしろのあるLPに使うと「視覚言語ごとの刷新」になった
ぶるすなさん2つ目の検証対象は、海外FX初心者〜中級者向けの入口LP/start/。
元々「紺＋ゴールド」の典型的な金融プレミアム配色で作られたページで、こちらには視覚言語ごと刷新する「Overhaul」モードを適用した。
れおしゃん視覚言語ごと変えるって、リンクとか免責事項とか消えちゃったりしないんですか？
ぶるすなさんそこも機械的に検証済み。結果は次のとおりだよ。
- ページ内の全リンクURL10件（外部アフィリンク・内部リンク含む）が改修前後で完全一致・差分ゼロ
- アフィリエイトリンクの
rel="nofollow sponsored noopener"属性も文字列レベルで維持 - 見出し・リード文・免責事項などのコピー文言も実質変更なし（タグ除去や改行位置の違いのみ）
こっちゃん見た目は激変してるのに、リンクと免責事項はビタ一致してるってこと…！？
ぶるすなさんそう、そこがOverhaulモードの面白いところ。実際の刷新内容はこの4点だよ。
- 配色：紺＋ゴールドの典型的な金融配色 → 深宇宙ネイビー〜黒＋シアングロー＋控えめな金（近未来ダークテック配色）
- 7個あった手描き風の装飾SVGアイコンを全廃し、CSS描画の番号マーカーや罫線に置換
- 比較口座パネルにガラス質の質感（半透明＋ぼかし）を追加
- 数字表示にモノスペースフォントを採用し「計器の精密さ」を演出
こっちゃんこれはさっきのタロットと違って、パッと見で分かるレベルの変化だね。
ぶるすなさんうん、配色や質感が全面的に切り替わっているぶん、体感の差は大きい。
読みやすさの面も、コントラストをWCAG基準で実測していて、主要な箇所はすべてAA基準（4.5:1）を上回っていたよ。
| 測定箇所 | 実測値 | WCAG AA基準 |
|---|---|---|
| CTAボタンの文字 | 10.91:1 | 4.5:1 |
| 本文テキスト | 16.72:1 | 4.5:1 |
「見た目が変わった」ことと「成約率などの成果が上がる」ことは別の話です。本記事で報告しているのは、あくまで見た目・コントラスト・保持すべき要素がどうなったかという検証結果で、成果を保証するものではありません。
ぶるすなさんモバイル表示についても、レイアウトの折り返しや余白の縮小を静的に実装したうえで確認しているよ。
検証中に見つかった「バグ」の正体（証拠ベースで切り分けた話）
ぶるすなさんここでひとつ、検証の副産物として面白かった話を。
タロットページの改修中、モバイル幅のスクリーンショットで「カードが画面端で見切れている」ように見える問題が見つかったんだよね。
それってtaste-skillのせいで壊れちゃったってことですか？
ぶるすなさん最初はそう疑った。でも実測してみたら違ったんだよ。切り分けの流れはこんな感じ。
モバイル幅（390px指定）のスクリーンショットで、カードが画面端で見切れているように見えた。
taste-skillで変更したCSSが原因ではないか、という仮説から出発した。
要素の幅とはみ出しを実測すると、改修前のBeforeの時点でも横方向のはみ出しは発生していなかった。つまり改修CSSは無関係。
ヘッドレスChromeには最小ウィンドウ幅（約500px）のクランプという制約があり、390px指定でも実際には482px相当の幅で描画された画像を390px幅として切り出していたため、見切れて見えていた。
こっちゃんデザインのバグかと思ったら撮影環境のクセだったってこと…！
ぶるすなさん犯人は改修コードじゃなくて撮影係のChromeだった。ミステリーとしては地味すぎるね。
「なんか見切れてる、直さなきゃ」で即座に手を加えるのではなく、まず実測して原因を切り分ける。AIに検証をさせるときほど、この一手間が効いてきます。
実際に使ってみて分かった注意点
こっちゃんここまでで結果は分かったけど、実際に使うときに気をつけることも見えてきたんだよね。
ぶるすなさんうん。実運用で意識しておきたいのは次の3点だよ。
- ファイルサイズが重い：SKILL.md本体は約87KB＝トークン換算でおおよそ2万トークン前後。常設で読ませ続けるには重く、改修したいセクションだけを抜粋して渡すほうが現実的
- 既存のデザイン規約と競合し得る：ブランドカラーやフォントの縛りがある場合、どちらを優先するかを事前に明示しておく（今回は「既存のブランドカラー・書体は保持」と先に決めていたため共存できた）
- 対象外のUIがある：ダッシュボード・データテーブル・多段階ウィザードは公式ドキュメント（§13）で対象外。現行v2は作者自身が「実験段階」と明記している
りっちゃん逆に言えば、この3つを分かったうえで使えば大きくは外さない、ということですね。
まとめ：どんな人が試す価値があるか
ぶるすなさん今回の検証で見えた結論はシンプルで、「効果の大きさはページの状態で決まる」ということ。冒頭の図のとおりだよ。
- 元のデザインが良いページ → 上品な微改善どまり（Preserveモードの正しい挙動）
- 伸びしろのあるページ → 視覚言語ごとの刷新で、体感がはっきり変わる
- 「読ませるだけの魔法」ではなく、地道なルール集をAIが淡々と適用してくれるツール
こっちゃんで、結局どんな人なら試す価値がありそう？
ぶるすなさん今回の結果から言えるのは、この3タイプかな。
- LP・ポートフォリオ・リデザイン系のページをAIに改修させたい人
- コピーやリンクは保持したまま、見た目だけを底上げしたい人
- 既存のデザイン規約との優先順位を自分で決められる人
こっちゃん今回検証してみて、また新しいAIツールが出てきたら試してみますか？
ぶるすなさんもちろん。話題性だけで判断せず、実際に自分のページで試して、変わったところ・変わらなかったところを両方正直に報告する。今後もこのスタンスで検証していくつもりだよ。