Menu

Individual skill

html-line-svg

0upvotes

将文字、截图、手绘或“小黑”插图、已有 HTML 关系图提炼为有教学语义的极简框线图；关系密集型图可先用 Mermaid 编写可执行的关系结构规格，再实现为可访问、响应式的内联 SVG，并同步输出可复用的线框图生成提示词。用于 HTML Presentation、课程页和网页卡片中的对比图、架构图、流程图、界面或接口图、Agent 协作图与状态关系图；当用户要求“语义框线图”“线框插图”“把插图改成 SVG”“生成线框图提示词”“在卡片里画 GUI/LUI、Agent、任务或系统关系”，或要求沿用 course-design 的 STYLE_DNA 设计教学插图时使用。不用于照片、装饰海报、复杂数据图表、情绪型手绘插画或直接编辑二进制 PPTX。

skills/html-line-svg/SKILL.md

Read pinned source

Source commit e5ba66cac91c857dce254dc6b6195d52201068d8

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Not checked yet
Last checked
Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
203
Repository last updated
Aug 26, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# HTML 语义框线 SVG

把原内容中的对象、关系、状态与阅读顺序，重新编码为克制的技术文档式框线图。先保证图能准确复述教学判断，再处理构图与 SVG 细节；不要把原插图机械描摹成矢量轮廓。每次交付同时生成一份自包含的线框图提示词，使同一语义设计能够被复用、复核和继续迭代。

## 开始前

1. 读取目标内容、相邻内容、现有图片或草图、承载它的 HTML/CSS 和可用空间。
2. 在 `course-design` 中工作时，读取根目录 `AGENTS.md`、`docs/design/STYLE_DNA.md`、目标页面使用的设计 token 与更具体的目录规范。
3. 由其他 skill 调用时，回到调用它的上层工作流：遵守上层 skill 规定的事实来源、源文件、素材登记、追溯记录、生成物和验证范围，不固定绑定 `tailor-html-to-slide`、`ppt-like-html` 或任何单一载体。独立调用时，遵守目标项目与目标文件所在目录的规则。
4. 保护原结论、概念边界、方向、状态与数量。无法从材料确认的关系不要画成箭头。

## 工作流

### 1. 写语义规格与可选 Mermaid 关系结构
Back to top