blueprinter

Blueprinter

「Flat Engineering Blueprint」スタイルガイドラインに沿って、HTML/CSSを使用して技術図を生成します。

基本理念

精密さ、客観性、高いデータインク比率を重視します。出力は技術仕様書や建築図面のように見えるものとし、マーケティング用ランディングページのようにしてはいけません。

視覚的なルール

1. 装飾なし

• ドロップシャドウは禁止
• グラデーションは禁止
• グラスモーフィズム／ぼかしは禁止
• 角丸ボタンは禁止

2. フラットで輪郭のあるデザイン

• 構造には1pxまたは2pxの実線の境界線を使用します
• コンテンツブロックには白い背景を使用します

3. モノクロを基本とする

要素	色
背景	ライトグレー（#f8fafc）
キャンバス	白（#ffffff）、スレートの境界線（#cbd5e1）
テキスト（メイン）	高コントラストの黒（#0f172a）
テキスト（サブ）	スレートグレー（#64748b）
アクセント	黒、または意味を持つ色を1色（例：エラーには赤）だけ控えめに使用します

4. タイポグラフィ

• 見出し／ラベル：サンセリフ（Inter/Helvetica）
• データ／パス／コード：等幅（JetBrains Mono/Consolas）

5. レイアウト構造

• 図は diagram-canvas（パディング付きの境界線で囲まれたボックス）内に配置する必要があります
• ヘッダー：タイトルと大文字のサブタイトルを、実線の下罫線で区切ります
• グリッド／フレックスボックスによる配置：すべてを厳密に整列させる必要があります

6. 要素

• コネクター：細い直線または直交線を使用します。抽象的な関係には破線を使用します。
• アイコン：塗りつぶしや複雑なディテールのない、シンプルなストロークSVGアイコン
• バッジ：輪郭線付き、または黒／グレーの塗りつぶしブロック。小さいフォントサイズを使用します。

CSS変数リファレンス

:root {
  --c-bg: #f8fafc;         /* Outer Background */
  --c-canvas: #ffffff;     /* Diagram Background */
  --c-border: #cbd5e1;     /* Slate-300 */
  --c-text-main: #0f172a;  /* Slate-900 */
  --c-text-sub: #64748b;   /* Slate-500 */
  --font-ui: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

HTML構造テンプレート

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Diagram Title]</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --c-bg: #f8fafc;
      --c-canvas: #ffffff;
      --c-border: #cbd5e1;
      --c-text-main: #0f172a;
      --c-text-sub: #64748b;
      --c-accent: #dc2626;  /* Optional: for errors/warnings only */
      --font-ui: 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-ui);
      background: var(--c-bg);
      padding: 40px;
      min-height: 100vh;
    }

    .diagram-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .diagram-canvas {
      background: var(--c-canvas);
      border: 1px solid var(--c-border);
      padding: 32px;
    }

    .diagram-header {
      border-bottom: 1px solid var(--c-border);
      padding-bottom: 16px;
      margin-bottom: 24px;
    }

    .diagram-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--c-text-main);
      margin-bottom: 4px;
    }

    .diagram-subtitle {
      font-size: 11px;
      font-weight: 500;
      color: var(--c-text-sub);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Component styles */
    .component {
      border: 1px solid var(--c-border);
      padding: 16px;
      background: var(--c-canvas);
    }

    .component-label {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--c-text-sub);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .component-value {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--c-text-main);
      font-weight: 500;
    }

    /* Connector lines */
    .connector {
      stroke: var(--c-border);
      stroke-width: 1;
    }

    .connector-dashed {
      stroke: var(--c-border);
      stroke-width: 1;
      stroke-dasharray: 4 4;
    }

    /* Badges */
    .badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 2px 6px;
      border: 1px solid var(--c-border);
      color: var(--c-text-sub);
    }

    .badge-solid {
      background: var(--c-text-main);
      color: var(--c-canvas);
      border-color: var(--c-text-main);
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <div class="diagram-canvas">
      <div class="diagram-header">
        <div class="diagram-title">[Diagram Title]</div>
        <div class="diagram-subtitle">[Diagram Type / Version]</div>
      </div>
      
    </div>
  </div>
</body>
</html>

使用ガイドライン

1. CSS変数を必ず使用する - 色を直接ハードコードしないでください
2. フラットさを保つ - シャドウ、グラデーション、ぼかし効果は使用しないでください
3. データには等幅フォントを使用する - 技術的な値、パス、コードには --font-mono を使用してください
4. 厳密に整列させる - 一貫した間隔でCSS GridまたはFlexboxを使用してください
5. 線でつなぐ - コンポーネント間のコネクターにはSVGを使用してください
6. アイコンは最小限にする - アイコンが必要な場合は、ストロークのみのシンプルなSVGを使用してください

例：シンプルなシステム図

<div class="diagram-canvas">
  <div class="diagram-header">
    <div class="diagram-title">System Architecture</div>
    <div class="diagram-subtitle">v1.0 / Overview</div>
  </div>
  
  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;">
    <div class="component">
      <div class="component-label">Client</div>
      <div class="component-value">Web App</div>
    </div>
    <div class="component">
      <div class="component-label">API</div>
      <div class="component-value">REST Gateway</div>
    </div>
    <div class="component">
      <div class="component-label">Database</div>
      <div class="component-value">PostgreSQL</div>
    </div>
  </div>
</div>