ai-design-check

ai-design-check は、コーディングエージェントでUIを作るチーム向けのオープンソースUIチェッカーと付属のAgent Skillです。対象にしているのは、画面は動いていても、間隔の不整合、弱いアクセシビリティの手掛かり、不自然なレスポンシブ挙動、定型的な見た目が少しずつ混じるというAI支援実装の失敗パターンです。ソースコードを調べ、対応コマンドではレンダリング済みページも確認します。デザイン生成器でも、プロダクト判断の代替でもありません。

チェックする内容

• 静的なプロジェクトチェック: CLI はWebプロジェクトと対応モバイルUIコードを読み、タイポグラフィ、余白、コントロール、コピー、モーション、ローカライズ、コンポーネントの一貫性に関するルールを確認します。
• レンダリング済みページのチェック: scan は到達可能なページをChromeで開き、計算後のレイアウト、コントラスト、はみ出し、読み込み失敗、ソースだけでは確認できない可視UIパターンを調べます。
• 機械的な修正: --fix --dry-run は、既存スケールへの余白調整のように答えが一つの変更を先にプレビューします。主観的なプロダクトやコピーの判断は意図的にレビューへ残されます。
• Agentワークフロー: 同梱Skillは、計測に基づく再設計、コンテンツ維持、前後比較をAgentに案内し、コード差分だけで完了とすることを避けます。

実用的なワークフロー

クリーンなチェックアウトで npx @enmera/ai-design-check を実行します。最初にレポートを読み、--fix --dry-run を実行して提案を一件ずつ確認してから dry-run を外します。動作中アプリでは、まず機密データを含まないステージングルートをスキャンしてください。判断が必要な指摘がある場合は、画面の再設計をAgentに頼む前に、プロジェクトのビジュアルシステムと制約を渡します。変更のたびにチェッカーと既存のアクセシビリティ、ビジュアル、プロダクトテストを再実行します。

使いどころ

コーディングエージェントがReact、Vue、Svelte、HTML、SwiftUI、Jetpack Compose、Flutter、React NativeのUIを実装し、動くものの再現可能なUIガードレールが必要なときに適しています。より広いUI指針の集合である UI Skills と併用できます。エージェントがWebサイトを再構築できるかを評価する WebsiteBench とは異なり、ai-design-check は一つのプロジェクトのUI品質を検査するためのものです。

制限と安全性

ルールセットにはメンテナーのデザイン判断が反映されています。合格しても、特定の利用者に適すること、すべての状況でアクセシブルであること、回帰がないことの証明にはなりません。レンダリングスキャンはChromeでページを開くため、認証とデータ取り扱いを意図的にレビューしない限り、個人データを含む本番ページに向けないでください。保護ページにはcookieやheaderを渡せますが、shell履歴やCIログに残さないようにします。

料金と始め方

リポジトリはMITライセンスで、静的チェックにAPIキーは不要です。Agentによる再設計では、選んだモデル、ブラウザ、CI、計算資源のコストが発生し得ます。公式READMEを読み、代表的な画面一つでチェッカーを実行し、スクリーンショットとレポートをベースラインとして保存してから、チームのレビューゲートに入れる指摘を選んでください。

よくある質問

自律的なデザインツールですか？

いいえ。計測できる問題を報告し、Agent支援の修正フローを提供します。プロダクト上の決定はチームが行います。

手動レビューを置き換えられますか？

いいえ。回帰防止のガードレールとして使い、レスポンシブレイアウト、コンテンツ階層、ブランド適合性、実際の支援技術での挙動は別途レビューしてください。

まとめ

AIコーディングのワークフローで、スクリーンショットと「もっと良く見せて」という依頼以上のものが必要なら、ai-design-check は有用です。まずは小さくレビュー可能なレポートから始め、プロダクト固有の視覚・アクセシビリティ基準に合うチェックだけを採用しましょう。