blueprinter — Claude Code skill: what it does, how to install
Generates technical diagrams and system architecture flows using plain HTML and CSS. Useful for blueprint-style specifications without design fluff.
npx skills add yofine/skills --skill blueprinter -a claude-codeWhat blueprinter 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.
What it helps with
- 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 for the agent
- 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
How to install blueprinter
1Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a claude-code2Manually: put the files in place
~/.claude/skills/blueprinter/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/blueprinter/
1Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a codex2Manually: put the files in place
.agents/skills/blueprinter/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a cursor2Manually: put the files in place
.cursor/skills/blueprinter/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install yofine/skills blueprinter2Manually: put the files in place
.github/skills/blueprinter/SKILL.md1Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a gemini-cli2Platform CLI
gemini skills install https://github.com/yofine/skills --path blueprinterManually: put the files in place
.devin/skills/blueprinter/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add yofine/skills --skill blueprinter -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about blueprinter
How to install blueprinter in Claude Code?
Run npx skills add yofine/skills --skill blueprinter -a claude-code in your terminal.
What does blueprinter do?
It writes self-contained HTML and CSS files for technical diagrams. Output files look like engineering blueprints rather than marketing graphics.
Which colors and fonts does blueprinter enforce?
The palette uses #f8fafc for outer backgrounds, #ffffff for canvas areas, and #cbd5e1 for borders. Labels use Inter, while data fields use JetBrains Mono.
