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