Coding

blueprinter

Try it

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

What it does

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

The skill document

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

Related skills

Productivity

Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.

by Iván854 installs69 stars

cli-creator

Official

Generate a durable, composable CLI for Codex from API docs, OpenAPI specs, curl, SDKs, web apps, or scripts.

by OpenAI27.5k stars

aspnet-core

Official

Build ASP.NET Core apps using current Microsoft guidance for app model, host pipeline, and framework-idiomatic features.

by OpenAI27.5k stars

skill-creator

Official

Create, refine, and benchmark agent skills end-to-end with built-in eval loops and description tuning.

by Anthropic177.2k stars

figma-use

Official

Reference for executing JavaScript in Figma files via the use_figma MCP, covering API rules and incremental workflow.

by OpenAI27.5k stars

More from yofine

Browse all skills

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

by yofine2 installs1 stars

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

by yofine1 installs

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

by yofine1 installs