Blueprinter

作者 yofine1d6f2bf85e1367e37d1e7557eef724132ace1e26無授權條款收錄於 2026年10月9日更新於 2026年10月9日

Generate technical diagrams using HTML/CSS in Flat Engineering Blueprint style. Use when the user wants to create architecture diagrams, system diagrams, flowcharts, or technical specification sheets that look like engineering blueprints. Triggers on requests for flat diagrams, blueprint-style visualizations, or technical drawings.

僅含說明Design & Creative

AI 產生的概覽

以 HTML/CSS 產生扁平工程藍圖風格的技術圖表，包括架構圖、系統圖與流程圖。

功能: 提供一套樣式規則與 HTML/CSS 範本，用來產生「扁平工程藍圖」風格的技術圖表：單色配色、1px/2px 實線邊框、無陰影與漸層，並嚴格網格對齊。其中定義了 CSS 變數、字型選擇、連接線與標籤樣式，以及含標題列的圖表畫布結構。產出為一個可獨立呈現的 HTML 檔案。
適用情境: 適用於使用者需要架構圖、系統圖、流程圖或技術規格表，並希望呈現扁平、藍圖式視覺風格的情境。適合技術圖面或扁平化圖表視覺化需求，而非行銷風格頁面。
執行需求: 不含指令碼，僅為說明文件。產生的 HTML 透過樣式表連結引用 Google Fonts（Inter、JetBrains Mono），因此需要網路連線才能載入這些字型。

Blueprinter

Generate technical diagrams using HTML/CSS following the "Flat Engineering Blueprint" style guidelines.

Core Philosophy

Precise, Objective, High Data-Ink Ratio. The output should look like a technical specification sheet or an architectural diagram, NOT a marketing landing page.

Visual Rules

1. No Decorations

NO drop shadows
NO gradients
NO glassmorphism/blur
NO rounded buttons

2. Flat & Outlined

Use 1px or 2px solid borders for structure
Use white backgrounds for content blocks

3. Monochrome Base

Element	Color
Background	Light Gray (#f8fafc)
Canvas	White (#ffffff) with Slate Border (#cbd5e1)
Text (Main)	High contrast Black (#0f172a)
Text (Sub)	Slate Gray (#64748b)
Accent	Use BLACK or ONE semantic color (e.g., Red for Error) sparingly

4. Typography

Headings/Labels: Sans-serif (Inter/Helvetica)
Data/Paths/Code: Monospace (JetBrains Mono/Consolas)

5. Layout Structure

The diagram must be contained within a diagram-canvas (a bordered box with padding)
Header: Title + Uppercase Subtitle, separated by a solid bottom border
Grid/Flexbox alignment: Everything must be strictly aligned

6. Elements

Connectors: Thin, straight or orthogonal lines. Dashed lines for abstract relationships.
Icons: Simple stroke SVG icons (no fill or complex details)
Badges: Outlined or solid black/gray blocks. Small font size.

CSS Variable Reference

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;}

: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 Structure Template

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>      <!-- Diagram content goes here -->    </div>  </div></body></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>      <!-- Diagram content goes here -->    </div>  </div></body></html>

Usage Guidelines

Always use the CSS variables - never hardcode colors
Keep it flat - no shadows, no gradients, no blur effects
Use monospace for data - any technical values, paths, codes should use --font-mono
Align strictly - use CSS Grid or Flexbox with consistent gaps
Connect with lines - use SVG for connectors between components
Minimal icons - if icons are needed, use simple stroke-only SVGs

Example: Simple System Diagram

html

<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>

<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>

來源與署名

來源：yofine/skills位於blueprinter提交1d6f2bf

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Blueprinter

Blueprinter

Core Philosophy

Visual Rules

1. No Decorations

2. Flat & Outlined

3. Monochrome Base

4. Typography

5. Layout Structure

6. Elements

CSS Variable Reference

HTML Structure Template

Usage Guidelines

Example: Simple System Diagram

來源與署名

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design