# blueprinter

Generates technical diagrams and system architecture flows using plain HTML and CSS. Useful for blueprint-style specifications without design fluff.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 974 installs · ★ 154
- Author: yofine
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/yofine/skills/tree/HEAD/blueprinter/SKILL.md
- Updated: 2026-08-11
- HTML: https://affpapa.org/en/nevibecode/skills/blueprinter

## What it does

The skill instructs the agent to build technical specifications, flowcharts, and system maps in a flat blueprint format. It forbids decorative extras like gradients, blur, drop shadows, and rounded buttons. Structural components rely entirely on 1px or 2px solid borders.

Every diagram lives inside a bordered `diagram-canvas` container aligned with Flexbox or CSS Grid. UI labels rely on Inter or Helvetica, while technical values, file paths, and snippets strictly use JetBrains Mono or Consolas. Connectors between elements use simple SVG lines.

This layout will look bad in marketing pitch decks because it deliberately restricts color. The palette is strictly monochrome, permitting only a single semantic accent like red for error alerts.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add yofine/skills --skill blueprinter -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/blueprinter/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/blueprinter/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add yofine/skills --skill blueprinter -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/blueprinter/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add yofine/skills --skill blueprinter -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/blueprinter/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install yofine/skills blueprinter
```

2. **Manually: put the files in place**
- File: `.github/skills/blueprinter/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add yofine/skills --skill blueprinter -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/yofine/skills --path blueprinter
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/blueprinter/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add yofine/skills --skill blueprinter -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/yofine/skills/tree/HEAD/blueprinter/SKILL.md

## When to use it
- generate system architecture diagrams with HTML and CSS
- build flat technical flowcharts without decorative shadows
- layout component specifications using monospace data fields
- connect technical blocks with plain SVG line paths

## Example prompts
- Create an architecture diagram for our auth pipeline using blueprinter style
- Generate a system flowchart in flat HTML/CSS without shadows or rounded corners
- Build a technical specification sheet for our REST endpoints using monospace data blocks

## Similar
- [visual-explainer](https://affpapa.org/en/nevibecode/skills/visual-explainer.md) — skill · 755 installs
- [architecture-diagram](https://affpapa.org/en/nevibecode/skills/cocoon-ai-hello-at-cocoon-aico-architecture-diagram.md) — skill · 491 installs
- [architecture-diagram-creator](https://affpapa.org/en/nevibecode/skills/architecture-diagram-creator.md) — skill · 453 installs
- [diagram-design](https://affpapa.org/en/nevibecode/skills/diagram-design.md) — skill · 19600 installs
- [html-diagram](https://affpapa.org/en/nevibecode/skills/html-diagram.md) — skill · 4100 installs
- [fireworks-tech-graph](https://affpapa.org/en/nevibecode/skills/fireworks-tech-graph.md) — skill · 18000 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md