html-line-svg - 创建可访问的语义框线 SVG
将源内容提炼为语义框线图并实现为响应式 SVG，同时生成可复用提示词、可选 Mermaid 规格和 PNG 预览。
标签
更新于: 2026-10-12该技能可以做什么
- 提取语义对象与关系
- 使用 Mermaid 规格关系
- 生成可访问响应式 SVG
- 生成可复用框线提示词
- 渲染浏览器 PNG 预览
- 验证 SVG 结构与几何
- 将 SVG 嵌入 HTML 布局
- 检查连线可追踪性
输入
- 源内容
- 相邻内容
- 现有图片或草图
- 现有 HTML 与 CSS
- 可用布局空间
- 项目设计规范
- 设计 token
- 目标画布或视口
- 上层工作流要求
输出
- 可编辑内联或独立 SVG
- 浏览器渲染的 PNG 预览
- 可复用线框图生成提示词
- Mermaid 关系结构规格
- 交付摘要
- 验证结果
- 更新后的 HTML
要求
- HTML 与 CSS 环境
- 支持 SVG 的浏览器
- Node.js 验证运行环境
- Chromium 或 Chrome 渲染器
- 读写目标文件的权限
- 使用 Mermaid 时的 Mermaid 渲染器
- 项目构建与验证命令