概要
デザインシステムの情報一元化、AI専用プロンプト（Agent Skill）の定義、Linterによる制約、テンプレート生成の組み合わせにより、コーディングエージェントによるUI実装の精度を向上させた事例。
詳細内容
MOSH株式会社が、AI（コーディングエージェント）によるUI実装の品質を向上させるために取り組んだ一連の施策を解説しています。主な課題は、Figma、Notion、Storybookに情報が分散していることや、AIがデザインガイドラインを無視して独自の実装を行うことでした。これを解決するために、まずStorybookのJSDocにFigma/NotionのURLを紐付けてAIが参照可能にしました。次に、Claude Code等のエージェントに「design-context」「design-review」「design-principles」といった特定の役割（Skill）を与え、実装方針の策定やガイドラインに基づいたレビューを自動化。さらに、BiomeのLinterルールをカスタマイズして不適切なスタイル指定を機械的に排除し、Plopを用いたレイアウトテンプレートの自動生成（add-routeコマンド）を導入することで、ワンショットで高品質なUIが生成できる環境を構築しました。最終的に、エンジニア以外でもプロトタイプを作成しやすく、実装へ転用しやすいフローを実現しています。