「Vibe coding」でAIが書いたUIが
毎回同じに見える本当の理由
「バイブコーディング」は、雰囲気を言葉で説明してモデルに実装させる開発スタイルだ。速度は本物で、もう後戻りはしない。問題は、出力されたUIが毎回「生成された感じ」に見えることだ。同じ書体の極大サイズ、同じグラデーション、同じ3カードのグリッド。ux-skillは、バイブの下に敷くルールレイヤとして、マージ前にその既定値を捕まえる。
「Vibe coding」とは結局なんなのか
この言葉は2026年2月のXのスレッドで半分冗談として広まり、4月にはVCのエッセイの表紙に載った。真面目に定義し直すと、「意図を自然言語で書き、モデルが実装を形にし、人間の仕事はタイピングからレビューへ移る」開発スタイルだ。Andrej Karpathyの最初の定式化は、はっきりこう言っていた——あなたはコードを書かない、コードを操縦するのだ、と。
フロントエンドの仕事では、このバイブは非常に切れ味がいい。一回のプロンプトでヒーロー、ナビ、サインアップが動く形で出てくる。CursorやClaude Codeのセッションでは、アイデアから動くページまでのラウンドトリップは、いまや時間ではなく分で測られる。
そのトレードオフは、センスだ。モデルには自前の好みがある——2021〜2024年の狭いスタートアップランディング美学に偏重した学習データから焼き付けられた好みだ。押し返す何かがなければ、バイブはいつも同じ場所に着地する。
AIの「指紋」、ひとつの段落で説明する
ボディフェイスが88〜96ピクセル前後のディスプレイサイズに引き伸ばされている。インディゴからバイオレットを通って青の終端まで広がる多段階グラデーションが白の上に乗っている。ヒーローの下に同一のカードが3つ、3カラムグリッドで並ぶ——小さなアイコン、一語のタイトル、一文のサブタイトル。プロダクト固有の名詞が入るべき場所にプレースホルダーのコピーが入っている。Windowsの ClearType で破綻するヘアラインの100ウェイト本文。すべてのセクションのすべての直接子要素に同じフェードインアップが付いている。
個別に見れば、どれも間違いではない。指紋になるのは「組み合わせ」だ。1つを見て肩をすくめる。同じ折りに4つ見えた時点で、どのツールが生成したか分かる。
バイブコーディングは速度をくれた。既定値は、すべてのサイトを同じに見せる原因になる。
プロンプトだけで解決できない理由
とっさの対処は、プロンプトにテキストを足すことだ。「既定のグラデーションを使うな」「セリフのディスプレイフェースを使え」「同一カードを3つ並べるな」。これは1画面では効く。次のプロンプトでは忘れる。プロンプトだけのステアリングは確率的で、コンテキスト長とともに減衰する。
必要なのは決定論的な床——モデルが書いた後で毎回走り、ループの中にLLMを置かないチェックだ。これがux-skillが埋めるギャップだ。レコメンダーが先にモデルの選択肢を絞り、リンターが、既定値がすり抜けたときにモデルを罰する。
ux-skillがバイブの流れに入る位置
パッケージは単体のPythonモジュールで、インストール経路は3つ——Claude Codeプラグイン、pip install uxskill、またはnpx uxskill。導入後、エンジンは17のIDEで動く22のコマンドを公開する。よく使う4つでバイブのループを端から端までカバーできる。
| ステップ | コマンド | 役割 | 出力 |
|---|---|---|---|
| 1. ブリーフ | ux discover | 10項目の強制問診——プロジェクト種別、対象、トーン、必須、禁忌、参照。 | .ux/last-discovery.json |
| 2. システム | ux recommend | 998件のカタログに対して並列5検索——業界、スタイル、パレット、書体、モーション——をマージして1つのシステムに統合。 | tokens.css · manifest.json |
| 3. 生成 | 任意のバイブコーディングツール | Cursor、Claude Code、Cline、Codex、Windsurf、Aider——プロンプトを発したものが、そのトークンに対して書く。 | リポジトリ内のコンポーネントコード |
| 4. ゲート | ux lint | 生成コードに対して100の決定論的正規表現ルール。LLMコストはゼロ。highまたはcritical所見が出た時点で非ゼロ終了。 | JSON所見 · CI失敗 |
ブリーフは2分。レコメンダーは2023年のMacBook Airで3秒以下。リント本体は200ファイルのNext.jsリポジトリでウォーム時90ミリ秒。これらのどのステップも、サードパーティAPIへのトークン課金を要求しない。インストール後、ループ全体がオフライン稼働可能だ。
ブリーフは強制機能
バイブコーディングで最も大きな効きを持つたった1手は、最初のプロンプトを書く前にブリーフを書くこと。モデルは制約を必要とし、人間は委任する前に選択肢と向き合う必要がある。
ux discoverはインタラクティブなプロンプトで、10のフィールドを順に問う。順序は固定——プロジェクト種別、対象、主目的、3〜5語のトーン、必須、禁忌リスト、ブランドの参照、密度、モーション予算、アクセシビリティの床。実際に効くのは「禁忌」フィールドだ。ここで、避けたい既定値を名指しする。
$ ux discover [project_type] landing [audience] 日本のスタートアップ向けB2B SaaS、社員10〜50名 [primary_goal] デモ予約 [tone] precise, calm, confident, technical [must_have] WCAG AA、44px タッチ領域 [forbidden] 本文書体のディスプレイ転用、3カードの均等並び、 白上の広域グラデーション、ヘアライン100ウェイト、 全要素へのフェードインアップ [references] Stripe (clarity), Linear (density), Arc [density] comfortable [motion] subtle, scroll-triggered, no autoplay # .ux/last-discovery.json に保存
以降のコマンドはこのファイルを読む。レコメンダーは禁忌リストを使ってパレットとモーションプリセットの候補を絞り、リンターは必須リストを使ってデフォルトのしきい値を引き上げる。
100ルールの中身、ひとつの段落で
現在のリントカタログは100エントリで、v2.0.0時点の35から増えた。各ルールは正規表現と、重大度(low、medium、high、critical)、カテゴリ(Typography、Color、Layout、Content、Motion、A11y、Quality、Visual、Performance)、一行の理由、一行の修正提案を持つ。
最も重大度の高いエントリは、AIの指紋に直接マップする——本文書体のディスプレイ転用、白上の広域グラデーション、3カード均等パターン、プレースホルダー名のリーク、絵文字アイコンのスタンプ、見出しのマーケティング動詞、インラインスタイル属性、ヒーロー画像の alt 欠落、ピンチズームを止めるビューポートタグ。どれもLLM呼び出しを必要としない。すべてミリ秒単位で動く。
完全な分類はAIデザイン指紋リストに、エンジニアリングの解説は正規表現リンターの記事にある。同じエンジン、2つの角度。
エディタの中で何が変わるか
Claude Code、Cursor、Windsurf、Cline、Continue、Codex、Aider、Roo Codeのいずれかにux-skillを入れると、ワークフローは次の流れになる。
- プロンプトを書く。モデルにはデザインシステムが文脈として渡っている(各IDEは
tokens.css+manifest.jsonと、エンジンが書き出したIDE別ルールファイル——.cursorrules、CLAUDE.md、.windsurfrules——を読む)。 - モデルは既定値ではなく、ブランド固有のトークンでコードを書く。
- ファイルを保存する。pre-commitフックがリントを実行する。差分にhighの所見が含まれていれば、コミットはルールID、行、修正提案とともに中止される。
- モデルに修正を頼む。コンテキストウィンドウにはルールIDが入っている。修正は数秒で着く。
- 次のコミットは通る。
頭の中で出力と自分のセンスを比較する手動レビュー工程はもうない。センスはブリーフ、システム、リントに住む。あなたはバイブモードに留まり、レールがバイブを溝に落とさないように支える。
純粋なプロンプトステアリングとの正直な比較
| 方式 | ルールの所在 | チェック単価 | 1000行後のドリフト |
|---|---|---|---|
| プロンプトのみ | .mdの指示ブロック | 0 | 高 · 文脈減衰 |
| LLMジャッジ(CI) | ClaudeまたはGPTのプロンプト | ~$0.04/プッシュ | 中 · 非決定的 |
| 独自ESLintプラグイン | JS AST ルール | ~200ms | 低 · ただし自作 |
| ux-skill lint | 100の正規表現 · 998件カタログ | ~90ms | 低 · 決定論的 |
正規表現が捕まえるのは構造的指紋、センスではない。
リントが「このセクションのリズムは違う」「コピーが冷たく読める」と判定することはない。それはレビューの仕事だ。正規表現が確実に捕まえるのは、リテラルなトークン、クラス名、16進値、DOMの形を持つすべての指紋——つまりAIの既定値の大半だ。なぜならモデルは毎回同じアーティファクトに手を伸ばすからだ。
リントの上にセンスのパスを置きたければ、同じパッケージに/ux-critiqueが同梱されていて、エディタ内で要求時に動く。これを意図的にCIで走らせないのは、CIが決定論的な床のためにある場所だからだ。
CursorとClaude Codeへの具体的な接続
Cursorはリポジトリルートの.cursorrulesと、その下の.cursor/rules/*.mdcを読む。Claude CodeはリポジトリルートのCLAUDE.mdと、プロジェクトスコープの~/.claude/projects/<hash>/CLAUDE.mdを読む。ux-skillは同じ推奨から両方を書く。真実の源は1つ(.ux/design-system/MASTER.md)、派生物が3つ(Cursor、Claude Code、素のtokens.css)だ。
手順書: Cursorへの導入、 Windsurfへの導入、 GitHub Copilotへの導入、 Zedへの導入。
バイブは速度。ルールは床。
2026年の興味深い議論は、バイブコーディングが勝つかどうかではない——千行以下のタスクではすでに勝っている。興味深い議論は、その出力がインターネット上のあらゆる他のバイブコーディングのページと同じに見え続けるか、それともチームが床を敷くかだ。
ux-skillはその床だ。100ルール、998件のカタログエントリ、110のブランド仕様、22のコマンド、17のIDE、エンジン下の75のテスト。MITライセンス。テレメトリなし。レコメンダーがモデルの中央値を引き上げ、リンターが床を定める。バイブはあなたのものだ。
関連記事
- AIデザイン指紋リスト — 分類学そのもの。
- AIコーディング向け正規表現リンター — エンジニアリングの内側。
- バイブコーディングは本物——だがAIは同じ既定値を出す — 英語版。
- Claude Code向けアンチAIスロップツール — 正直なランキング。