html-draft

仓库创建 2025年12月16日最近提交 8 天前SkillHot 收录 20 天前

▸ 精选理由

输出单文件、风格一致的工程图，便于分享与迭代。

▸ 风险提示

通过 CDN 拉取第三方库（Tailwind/D3），依赖外部资源

这个 Skill 做什么

生成一页平面工程蓝图风格的 HTML 技术图与流程图。

把技术架构图或流程图生成成一页独立的 HTML 蓝图风格页面，像工程图纸那样扁平严谨，方便分享或打印。适合做架构图、系统流程、spec sheet 或组件地图时用。会输出单个 HTML 文件，内置 Tailwind v4 和 D3 v7 用于布局与 SVG 绘图。

▸ 展开 SKILL.md 英文原文

Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. Generates one HTML file using Tailwind v4 (browser CDN) for layout and D3 v7 (CDN) for SVG diagrams. User-invoked only — do NOT auto-trigger. Triggers on "/html-draft", "сделай blueprint", "технический чертёж", "архитектурная схема", "инженерная схема", "blueprint diagram", "engineering blueprint", "technical spec sheet", "architecture diagram", "system flow diagram".

内容创作架构图HTML生成D3/Tailwind通用

207

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/serejaris/personal-corp-skills/main/skills/html-draft/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/serejaris/personal-corp-skills/main/skills/html-draft/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# html-draft — Flat Engineering Blueprint Diagrams

Generate one HTML page that renders a technical diagram in a strict flat-blueprint aesthetic — the look of a printed engineering specification sheet, not a marketing landing.

**Stack:** Tailwind v4 via `@tailwindcss/browser` CDN for layout + utilities, D3 v7 via jsDelivr CDN for SVG-based diagrams (nodes, connectors, layouts, animations).

**Use this when** the user wants an architecture diagram, system flow, technical spec sheet, or component map as a standalone HTML artifact (suitable for slides, reports, exports).

**Don't use this for:**
- Inline schemas inside markdown documents — use a mermaid renderer instead
- Newspaper / reading-f

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有