検証方法

同じプロンプトを使って、DESIGN.mdのなし/ありでそれぞれUIを生成させました。生成されたHTMLをPlaywrightでスクリーンショットし、視覚的な差異を比較しています。

検証した3パターンは以下の通りです。

1. ダッシュボード — KPIカード3枚 + プロジェクト一覧テーブル
2. お問い合わせフォーム — 入力フォーム + 送信ボタン
3. 料金テーブル — 3プラン比較カード

はてなベースの既存Webサイト（hatenabase.jp）のCSSから値を抽出し、以下のDESIGN.mdを作成しました。

---
version: "alpha"
name: "Hatenabase Design System"
colors:
  primary: "#2A5772"
  on-primary: "#FFFFFF"
  background: "#F2F2F2"
  surface: "#FFFFFF"
  text-primary: "#545454"
  divider: "#E4EAEB"
  cta: "#f0b90b"
  cta-text: "#2A5772"
typography:
  heading:
    fontFamily: "Jost"
    fontWeight: 600
  body:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "16px"
rounded:
  sm: "4px"
  md: "8px"
---

## Colors
- Primary (#2A5772): ヘッダー、見出し用。背景全面には使わない
- CTA (#f0b90b): ボタンのみ。テキスト色は #2A5772
- テーブルヘッダー背景: #E4EAEB

## Do's and Don'ts
- Don't: border-radius 12px以上にしない
- Don't: グラデーションを使わない

プロンプト「社内プロジェクト管理ダッシュボードを作成。進行中プロジェクト数・完了タスク数・対応待ち件数のKPIカード、最近のプロジェクト一覧テーブルを含める」

Before（DESIGN.mdなし）

DESIGN.mdなし — ヘッダーにグラデーション(blue→indigo)、border-radius 16px、強いシャドウ(0 8px 30px)、テーブルヘッダーが紫系

After（DESIGN.md適用）

DESIGN.md適用 — ヘッダー#2A5772（グラデーションなし）、border-radius 8px、軽いシャドウ(0 2px 10px)、テーブルヘッダー#E4EAEB、CTAボタン#f0b90b

プロンプト「お問い合わせフォームを作成。名前・会社名・メール・問い合わせ種別(select)・内容(textarea)・送信ボタンを含める」

Before（DESIGN.mdなし）

DESIGN.mdなし — 送信ボタンに紫のグラデーション、input border-radius 12px、focus時にindigo系のリング、カード角丸20px

After（DESIGN.md適用）

DESIGN.md適用 — 送信ボタンが#f0b90b、ラベルが#2A5772、input border-radius 4px、focus時に#2A5772のリング、h2にborder-bottom

プロンプト「料金プランページを作成。スターター(¥9,800/月)・ビジネス(¥29,800/月・おすすめ)・エンタープライズ(要相談)の3プラン比較」

Before（DESIGN.mdなし）

DESIGN.mdなし — 価格表示が紫(#6366f1)、おすすめバッジに紫グラデーション、カード角丸20px、背景にグラデーション

After（DESIGN.md適用）

DESIGN.md適用 — 価格表示が#2A5772、おすすめバッジがフラット、カード角丸8px、CTAボタンが#f0b90b、背景グラデーション排除

DESIGN.mdは万能ではありません。今回の検証で見つかった課題を正直に共有します。

結論 — 主要なブランド要素（カラー・フォント・角丸・グラデーション禁止）は3パターンすべてで正しく反映されました。シャドウ値の微妙なブレがある程度で、実用上は十分な精度です。

まずはカラー3色だけで始める

primary, background, text-primaryの3色だけ定義するだけでも、AIの出力品質は大幅に改善します。今回の検証でも、もっともインパクトが大きかったのはカラー指定でした。

Do’s and Don’tsが最も効く

「グラデーションを使わない」「border-radiusは8px以下」のように禁止事項を明示すると、AIが余計な装飾を追加しなくなります。今回の3パターンすべてで、Do’s/Don’tsの効果がもっとも安定していました。

既存CSSから値を抽出する

すでにWebサイトがあるなら、そのCSSからカラーコードやフォント指定を抜き出すのが最も確実です。ゼロから考える必要はありません。

テンプレートを活用する

GitHubの「awesome-design-md」には69種類、designmd.appには423種類以上のテンプレートが公開されています。自社のテイストに近いものをベースにカスタマイズするのが効率的です。

DESIGN.mdを使った3パターンの検証で、主要なブランド要素は安定して反映されることが確認できました。一方で、シャドウ値の微妙なブレやレスポンシブ対応の限界など、現時点での制約もあります。

それでも、プロンプトに毎回カラーコードをコピペする生活が終わるだけで十分価値があります。まずはカラー3色 + Do’s/Don’ts 2項目のミニマムなDESIGN.mdから始めてみてください。