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.
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 |
Initial release of Blueprinter — a skill for generating flat, blueprint-style technical diagrams in HTML/CSS.
- Supports architecture diagrams, system diagrams, flowcharts, and technical spec sheets in "Flat Engineering Blueprint" style.
- Strict visual guidelines: no shadows, gradients, or decoration; flat, monochrome, outlined components.
- Uses CSS variables for flexible theming and consistency.
- Provides HTML/CSS templates and usage instructions for rapid, standardized diagram creation.
- Includes example markup for quick adoption.
