blueprinter 是做什麼的？
使用 HTML/CSS 產生平面工程藍圖風格的技術圖表。當使用者想要建立架構圖、系統圖、流程圖或類似工程藍圖的技術規格表時使用。觸發於請求平面圖表、藍圖風格的視覺化或技術圖紙時。
使用 HTML/CSS 生成平面工程藍圖風格的技術圖表。當使用者想要建立架構圖、系統圖、流程圖或類似工程藍圖的技術規格表時使用。觸發於請求平面圖表、藍圖風格的視覺化或技術圖紙時。
此技能利用 HTML 與 CSS 來生成具有「工程藍圖」風格的技術圖表，非常適合開發者與工程師在需要繪製架構圖、系統圖、流程圖或技術規格圖說時使用。它的主要優勢在於產出風格統一、視覺清晰的平面式圖表，讓技術文件看起來更專業且易於理解。支援的平台包括 Claude Code 或其他可執行 HTML/CSS 渲染的 AI 代理工具。其運作方式是根據使用者的文字描述或需求，自動產生對應的 HTML/CSS 程式碼，並將其轉換為藍圖風格的視覺化輸出，無需手動繪圖軟體即可快速得到高品質的技術圖紙。
npx skills add https://github.com/yofine/skills/tree/main/skills/blueprinterInstalled? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
使用 HTML/CSS 產生平面工程藍圖風格的技術圖表。當使用者想要建立架構圖、系統圖、流程圖或類似工程藍圖的技術規格表時使用。觸發於請求平面圖表、藍圖風格的視覺化或技術圖紙時。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.