编程

blueprinter

试用

Generate technical diagrams using HTML/CSS in Flat Engineering Blueprint style. Use when the user wants to create architecture diagrams, system diagrams, flo...

它能做什么

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

技能文档

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

ElementColor
BackgroundLight Gray (#f8fafc)
CanvasWhite (#ffffff) with Slate Border (#cbd5e1)
Text (Main)High contrast Black (#0f172a)
Text (Sub)Slate Gray (#64748b)
AccentUse 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

: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

<!DOCTYPE html>


  
  
  [Diagram Title]
  
  


  
    
      
        [Diagram Title]
        [Diagram Type / Version]
      
      <!-- Diagram content goes here -->

Usage Guidelines

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

Example: Simple System Diagram


  
    System Architecture
    v1.0 / Overview
  
  
  
    
      Client
      Web App
    
    
      API
      REST Gateway
    
    
      Database
      PostgreSQL

相关技能

Productivity

诊断生产力系统反复失效的根因，给出最小干预——容量测算、瓶颈定位、可靠的本地记录。

作者 Iván854 次安装69 星标

得到大脑（原 Get 笔记）

按用户明确指令，在得到大脑（Get笔记）中保存、搜索并管理笔记与知识库。

作者 iswalle763 次安装66 星标

figma-use

官方

为 use_figma 强制 Figma 插件 API 规范:颜色范围、字体加载、原子执行、必须返回节点 ID。

作者 OpenAI27.5k 星标

skill-creator

官方

通过"起草—测试—评估"循环创建新技能，或迭代改进已有技能。

作者 Anthropic177.3k 星标

cli-creator

官方

基于 API 文档、SDK、curl 示例或现有脚本，生成可在任意仓库运行的耐久型 Codex CLI。

作者 OpenAI27.5k 星标

aspnet-core

官方

按当前微软文档化做法，选择 ASP.NET Core 应用模型并落地功能实现。

作者 OpenAI27.5k 星标

yofine 的更多技能

浏览全部技能

Design System Hub

Create and operate a local Design System Hub that stores multiple design systems, generates complete entries from screenshots, URLs, or written style descriptions, and exposes browsable documentation, live mocks, copied tokens, DESIGN.md, standalone HTML, and JSON APIs. Use when the user asks to ini

作者 yofine2 次安装1 星标

arXiv Decision Intelligence

Search arXiv and, when needed, verify external academic sources to update field beliefs and one primary decision through testable propositions, capability frontiers, explicitly labeled mechanism models, technical options, transition theses, five-dimensional maturity, leading indicators, and a restra

作者 yofine1 次安装

Ten Defeats

Use when Codex is asked to plan, design, implement, modify, refactor, debug, test, review, verify, or complete non-trivial software work; use Computer Use or operate a browser, desktop UI, or live app; coordinate multiple tools; or delegate to agents. This skill MUST also be used when success depend

作者 yofine1 次安装