バイブコーディングしたサイトは、taste-skill v2 で「AIっぽさの印」を幅ごとに洗い出してから直す

どんな問題を解決するか / いつ使うか

エージェントに作らせたLPやサービスサイトが「どこかで見たAIっぽい見た目」になっているが、どこを直せばいいか言葉にできないとき。公開前の点検として使う。

やり方

1. Claude Code か Codex で taste-skill を README どおりに入れる（インストール名は design-taste-frontend）。スキル本体と付属スクリプトを読ませる。
2. プロジェクトをローカルで起動し、トップと主要LPごとに付属の inspect.mjs <ローカルURL> --out .taste-skill/inspect/<ページ名> を1回ずつ実行させる。保存されたスクショも見させる。
3. 指示のポイント（要約）：
   • 公開ページだけを見る。ダッシュボードや表のページは対象外
   • Node 22 や Chrome が無ければ先に知らせる
   • 問題ごとに「どのページ・どの幅・どの要素か」をレポートから引用し、いちばん小さい直し方を添える
   • FAIL を WARN より先に並べる
   • まず一覧だけ出させ、コードは変えさせない
4. 一覧を見て、直すものを選んでから修正を頼む。

すぐ自分で確かめられる「AIサイトの印」（投稿で挙がっていた例）

• 見出しの上の小さな全部大文字のラベル（例：FEATURES）
• 01 / 02 / 03 と番号を振ったセクション
• コード以外の本文やボタンに等幅フォント
• ホバーしていないのに常に付いているグラデーション、極細の枠線、影
• クリーム色の背景×テラコッタ、または紫・インディゴ
• 実写の画像が4枚未満（SVGのイラストは数えない）、動く要素が8つ未満

注意点

• 投稿者の検証では、ブラインド評価でスキルあり7.7点・なし7.8点とほぼ互角（3つのお題のうち2つでは1位）。見た目が必ず良くなる魔法ではなく、AIっぽさの印を見つける検査道具として使う。
• 判定はスキルの基準に沿ったもの。ブランドの意図で使っている要素（例：あえての等幅フォント）は外してよい。
• 似た道具に Impeccable などがある（デザイン用スキル＋決まったルールで検出する仕組みで「AIっぽいUI」を潰す（Impeccable等））。修正前に一覧で確認する流れは 「Modern Web Guidance」などのスキルでサイトを採点させ、HTMLレポート→一括修正する と同じ。
• リポジトリ：github.com

出典

• 投稿者: @Voxyz_ai
• 投稿: @Voxyz_ai · 2026-10-16
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）