Design.mdファイル一つでAIコーディングツールのデザイン負債を解消する
makedream٨ مايو ٢٠٢٦
0
Computing/SoftwareRelated Video
5:36AIのUIがパッとしない…？ これで解決 (DESIGN.md)
Better Stack
Comments (0)
Log in to leave a comment
No posts yet
makedream5:36makedream5:36Better Stack
Log in to leave a comment
No posts yet
AIコーディングツールにプロンプトを数回投げれば、それらしいページが出来上がります。問題はその次です。新しく生成されたボタンの角丸が隣のページと異なっていたり、ブランドカラーの彩度が微妙にズレていたりします。開発スピードは速いものの、出来栄えは粗末です。AIは文脈を知らなければ、最も一般的な「平均値」を出すからです。この問題を解決するには、プロジェクトのルートに Design.md を配置し、AIに対して厳格な制約条件を強制する必要があります。
AIに「洗練された青色」を使ってほしいと伝えるのは時間の無駄です。AIは形容詞ではなく、正規化されたデータを糧に動きます。デザインシステムをプリミティブ（Primitive）、セマンティック（Semantic）、コンポーネント（Component）の3層に分けて定義してください。
blue-500: #3B82F6 のように絶対的な値を宣言します。bg-primary: var(--blue-500) のように機能的な役割を付与します。[category]-[property]-[modifier] 形式を強制し、 $color-background-hover のような名前を使わせます。2025年のUIコラボレーション事例研究によると、このように構造化されたトークンを使用したチームは、UIバグの発生率を1スプリントあたり14件から4件に削減しました。AIがカラーコードではなく「機能」を見てクラスを選択し始めれば、デザイン修正時間の70%が削減されます。Tailwind CSSを使用しているなら、これらのトークンを tailwind.config.js と一対一でマッピングするようAIに命令してください。
AIは自由度が高ければ高いほど、的外れな選択をします。ページごとにバラバラな余白を防ぐには、仕様書に数値をテーブル形式で流し込む必要があります。
| 属性 | 数値 | 適用ルール |
|---|---|---|
| ボタンの角丸 | 8px | rounded-lg 固定、恣意的な変更禁止 |
| セクション間隔 | 64px | すべての主要セクション間の垂直間隔 |
| 最大幅 | 1280px | メインコンテンツの中央揃え限界線 |
間隔の単位を8pxの倍数に制限し、カードのパディングを24pxに固定してください。特に「アンチパターン」セクションを作るのが効果的です。「一画面にCTAボタンを3個以上配置しないこと」「影の代わりに1pxのボーダーを使うこと」といった禁止条項を設ければ、AIは誤答候補をあらかじめ排除してから作業を開始します。このシンプルな表一つで、手動修正の回数が半分以下に減ります。
機能ごとに口調が異なり、アイコンのスタイルが混ざっていると、アプリが安っぽく見えます。ブランドペルソナを Design.md に明記してください。成功メッセージを「アップデート完了」にするか、「準備完了！」にするか、あらかじめ決めておく必要があります。
アイコンについては、以下のプロトコルに従います。
stroke-width を1.5pxに固定します。ダークモードも同様です。単に色を反転させるだけでは可読性が損なわれます。Googleマテリアルデザインのガイドラインが推奨するように、背景には純粋な黒の代わりに濃いグレー（#121212）を使うよう明記し、コントラスト比を に維持するという公式を入れておけば、アクセシビリティのバグを自ら回避してくれます。
仕様書を立派に書いても、AIが読まなければ意味がありません。 .cursor/rules/ ディレクトリにUI専用のルールを作成し、すべての作業の前に必ず Design.md を参照するよう強制してください。2025年の開発データによると、このルーチンを導入したチームは、機能開発時間を平均12.5時間から8.1時間へと短縮しました。
これで、開発者はコードを直すのではなく、文書の数値を調整するだけでサービス全体の印象を変えられるようになります。デザインは「感覚」の領域ではなく「精密なエンジニアリング」の領域であってこそ、スピードが上がります。最初30分のドキュメント化作業が、その後の数十時間の無駄な試行錯誤を防いでくれるのです。