概要
AIエージェントによる開発で発生しがちなデザインの不整合(スロップ)を防ぐため、コンポーネントの「設計意図」を明文化し、自動化されたチェックとログ記録を導入する実践的なフレームワークの解説。
詳細内容
AI(LLMやエージェント)を活用した開発では、コード生成速度は飛躍的に向上した一方で、デザインシステムのルールを無視した「その場しのぎの不整合なコード」が混入しやすくなっています。本書では、この問題を解決するためにEvil Martiansが考案した、AIフレンドリーなデザインシステム運用のための8つの戦略を紹介しています。
主なポイントは以下の通りです:
- **ワークフローの分離**: デザインシステムを改善する「craft」と、それを使って画面を構築する「use」のパスを分け、エージェントの目的を明確にします。
- **コンポーネント・コントラクト**: AIが理解できるよう、実装コードだけでなく「どのような時に使うべきか(When to use)」という設計意図をMarkdownで記述します。
- **インベントリ(目録)の提供**: エージェントが既存の部品を見落として新しい部品を捏造しないよう、インデックスファイルを用意します。
- **決定論的チェックの外部化**: 色の指定ミスなどの機械的なルールはAIに任せず、Linter(design-lint)やスクリプトで自動的に強制します。
- **制御された例外処理**: やむを得ない例外には、理由の記述を必須とする専用のprops(designSystemException)を設け、後に人間がレビューできるように可視化します。
このフレームワークを導入することで、AIのスピードを活かしつつ、長期的な製品の整合性と保守性を維持することが可能になります。