デュアルモニターでコードを確認しながら作業するエンジニア
技術解説

AIエージェントに渡す前に「設計の制約」を仕込む

目次を見る

AIコーディングエージェントに「CRM画面を作って」と依頼すると何が起きるか。同じセッション内でも、画面ごとにスペーシングが異なり、サイドバーの挙動が食い違い、テーブルの実装が別々のアプローチになることがある。これはエージェントの能力の問題ではなく、「制約の不在」が引き起こす現象だ。

DesignFoundationProは、SwiftUI向けの商用コンポーネントライブラリで、29個のブロック・47画面・18種のナビゲーションシェル・9個の動作するコンポジション例を提供する。シード記事が「コードを約87%削減できる」と主張する根拠は、認証・オンボーディング・ダッシュボードといった繰り返し実装されがちな画面群を、あらかじめ設計済みの部品として提供する点にある。

AIエージェントと「ガードレール」の関係

AIコーディングエージェント(LLMをバックエンドに持ち、コードを自律的に生成・編集するツール群、たとえばGitHub CopilotのAgent ModeやCursorのComposerなど)は、コンテキストが与えられなければ毎回ゼロから選択を行う。同一プロジェクト内でも、セッションをまたいだり、別の画面を生成させたりすると、微妙に異なるパターンが混入する。

この問題への一つのアプローチが、コンポーネントライブラリを「エージェントが参照すべき唯一の正解」として位置づけることだ。エージェントに対して「このライブラリのDFAdaptiveShellを使え」と指示すれば、ナビゲーション構造の選択肢はライブラリが持つ実装に絞られる。エージェントが独自にsplit view状態やcollapse動作を実装しようとする余地を、指示によって塞ぐわけだ。

これはプロンプト設計の観点から見ると「スコープの制限」に相当する。「何を作るか」だけでなく「どこから作るか」を明示するプロンプトは、出力の一貫性を高める。たとえばCursorのルールファイル(.cursor/rules)に「ナビゲーションは必ずDFAdaptiveShellを使うこと」と記述しておけば、エージェントが自作のTabViewを生成し始めるリスクを減らせる。

テーマエンジンがもたらすデザイントークンの統一

デザイントークン(色・タイポグラフィ・スペーシングなどの設計値を変数として管理する仕組み)は、AIが生成するコードの「ばらつき」を抑える上でも機能する。

DesignFoundationProはDFThemeという環境値ベースのテーマエンジンを持ち、`.dfTheme(.workspace)`を一度指定すれば配下のすべてのコンポーネントが同じトークンを参照する。SwiftUIのEnvironmentの仕組み(親ビューから子ビューへ暗黙的に値が伝播する機構)を使うため、個々のコンポーネント呼び出し時にスタイルを渡す必要がない。

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      MyRootView()
        .dfTheme(.workspace)
    }
  }
}

ただし記事が注意点として挙げているのは、DFCRMRootViewなどのコンポジションルートは内部で`.workspace`を直接ハードコードしているため、上流からテーマを上書きしても届かないケースがある点だ。エージェントにカスタムブランドのCRM画面を生成させるよう指示する場合、この制約をプロンプトに含めておかないと、エージェントはambient overrideが機能すると誤って仮定したコードを生成する可能性がある。

ライブラリを前提にした開発ワークフローの組み立て方

DesignFoundationProはMITライセンスのFoundationパッケージの上に乗る商用拡張で、個人ライセンスが149ドル・チームライセンス(5人まで)が449ドル(買い切り)という価格体系を取る。MacOSアプリの「DFPlayground」で購入前にすべてのブロック・画面・シェルをプレビューできる構成は、エージェントに渡すコンテキストとしても利用しやすい。

AI駆動開発のワークフローでこの種のライブラリを活用する場合、以下の観点が参考になる。

  • エージェントへのシステムプロンプトまたはルールファイルに「利用可能なシェル・ブロックの一覧と用途」を記述しておく
  • コンポジションルートのテーマ制約など「エージェントが踏みやすい落とし穴」をルールとして明示しておく
  • ライブラリのSwift Package Manager依存関係をあらかじめ設定し、エージェントがパッケージ追加ステップを省略できる状態にしておく

日本のSwiftUI開発現場では、Xcode CloudやFastlaneとのCI/CD連携が一般的だが、コンポーネントライブラリをSPM(Swift Package Manager)で管理する構成であれば、エージェントが生成したコードをそのままパイプラインに乗せやすい。

AIエージェントの生成物の品質は、与えられた制約の精度に比例する。「何を作るべきか」ではなく「何を使って作るべきか」をあらかじめ定義しておくことが、エージェント出力の一貫性を担保する最も実践的な手段の一つだ。

参考

Stop Rebuilding Auth, Onboarding, and Dashboards: DesignFoundationPro

この記事について: 本記事は AI を活用して作成し、forva AI 編集部が内容を確認・監修しています。

AI 駆動開発のご相談は forva AI へ。まずはお気軽にどうぞ。