はじめに：そのAI開発、「ノリ」になっていませんか？

AIに「いい感じの管理画面を作って」と指示し、出力されたコードをそのまま貼り付ける。そんな「バイブコーディング（ノリによる開発）」は、個人のプロトタイプ作成には最適ですが、プロの現場やチーム開発では限界を迎えています。
出力のたびにデザインが変わり、コードには一貫性がなく、既存のブランドルールは無視される。この「AIデザインの暴走」を食い止め、AIを「優秀な専属デザイナー」へと変える鍵が、デザインシステムとAIスキルの融合にあります。

1. 「AIっぽさ」の正体は、ルールの欠如である

なぜAIが生成するUIは、どこか使いにくく、装飾が過剰な「AIっぽさ」を纏うのでしょうか。議論の中で明らかになったのは、AIには「文脈（コンテキスト）と制約」が足りないという事実です。

• 人間の心理: なぜこの余白が安心感を与えるのか、AIは理解していません。
• 定義の不在: 「かっこいい」という曖昧な言葉は、AIの学習データにある「平均的な派手さ」に変換されてしまいます。

これを解決するのが、GoogleのMaterial DesignやAppleのHIGのような、色・スペーシング・フォントサイズを定義した「デザインシステム」のコード化です。

2. 新概念「NovaFrame」：AIを専門職にする

今回の議論で提示された「NovaFrame」という手法では、AIを全知全能のエージェント（司令塔）として扱うのではなく、特定のタスクに特化した「スキル（専門職）」として定義します。
具体的には、プロジェクト内に .claude/Skills/skill.md を設置し、以下の情報をAIに叩き込みます。

• 技術スタックの固定: Next.js + Tailwind CSS。特にTailwindは命名規則の揺れを排除するため、AIとの親和性が極めて高いのが特徴です。
• セマンティックトークンの徹底: 「#FF0000」を直接指定させるのではなく、「color-error」という変数（トークン）を使わせるよう厳命します。
• フレーム（枠）の事前定義: 画面の基本構造（ヘッダー、サイドバー、パディング）をパターン化し、AIには「どのフレームを使うか」を選ばせるステップを設けます。

💡 【実演】このワークフローを、実際の画面でお見せします

「実際にどれくらいの精度でUIが出るのか見てみたい」
そう思われた方のために、この「Claude Skills」を活用した開発フローを実演するウェビナーを開催することになりました。

▼ウェビナー概要 【セッション1】UIデザインシステムを用いた、AI駆動のUI標準化について

• 内容: 独自のデザインシステム（Skill.md）をAIに読み込ませ、ブランドルールを遵守した高品質なUIを生成する様子をデモ形式で解説します。「AIっぽさ」を脱却する瞬間を、ぜひリアルタイムでご覧ください。
• 日時: 1/9(金)
• 参加費: 無料
• 詳細・申込: https://hexabase.connpass.com/event/379614/

記事だけでは伝えきれない「生成スピード」と「精度の高さ」を、ぜひ体感してください。

3. チーム開発でコンフリクトを起こさないために

AI駆動の開発をチームで行う際、最大の敵は「各メンバーのプロンプトの差によるデザインの乖離」です。これを防ぐために、以下のワークフローが提案されました。

1. シングルソース: Figma上のデザイン変数（プリミティブ）とコード上の変数を1対1で一致させる。
2. スキルの共有: チーム全員が同じ skill.md を参照し、AIに「このプロジェクト専用のデザイナー」として振る舞わせる。
3. 新規作成の制限: AIに「勝手に新しいコンポーネントを作るな」という制約を与える。既存のライブラリ（Atomic Designに基づいたAtoms, Molecules等）を組み合わせて構築させることで、品質を統制します。

4. 「ガードレール」としてのAIレビュー

生成して終わりではありません。議論では、セキュリティ、QA（品質保証）、アクセシビリティなど、10種類以上の「専門家エージェント」による自動レビューの重要性も語られました。

• セキュリティ: 脆弱性のあるコードを見つけたら「クリティカル」として修正を命じる。
• QA: 要件定義を満たしているか、テストカバレッジが十分かをチェックする。
• デザイナー: 人間が最後に微調整（ブラッシュアップ）を行い、AIの出したベースをプロの品質まで引き上げる。

まとめ：AIは「丸投げ」から「飼い慣らす」ものへ

「AIに作らせる」時代は終わり、「AIにルールを与えて、意図通りに動かす」時代が始まっています。 デザインシステムをAIの「思考の枠組み（スキル）」としてインストールすることで、開発スピードとプロ品質のUIは、初めて両立します。
バイブコーディングを卒業し、デザインシステムという「意思」をAIに吹き込む。これこそが、次世代のUI標準化の姿です。