菜单
将 Markdown 文档转换为精美的 HTML，支持智能 ASCII 图转 SVG。适用场景：(1) 将 Markdown 转换为 HTML 用于演示或文档，(2) 将 ASCII 图（架构图/流程图/UI/时间线）转换为专业 SVG/HTML 图形，(3) 应用专业主题（紫/蓝/绿/极简）生成商务或技术文档。支持 AI 辅助的智能 SVG 转换，3 步流程实现精美图形。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Transform natural language requirements into interactive prototypes and professional documentation through a 5-stage workflow. Generate structured PRD (Mermaid flowchart + ASCII UI + element table), interactive HTML prototype (Vue3 + Tailwind + Element Plus), and complete documentation (PRD, design specs, technical docs). Use for: (1) Rapid prototyping from requirements, (2) Creating structured PRD documents, (3) Generating interactive HTML prototypes, (4) Producing design specifications, (5) Creating frontend/backend technical documentation.
自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。
编制售前方案、汇报方案、功能建议方案的专业技能。 作为外包开发服务商的售前产品经理，编制包含四大板块（项目背景、功能设计、投资预算、实施周期）的售前方案。 **触发场景**：当用户请求编制客户方案文档时使用 - "为 XX 客户编制 XX 系统建设方案" - "编写一份 XX 项目的售前提案" - "给客户领导汇报的方案文档" - "帮客户梳理需求并设计方案" **核心职责**： - 回答 4 个核心问题：Why（项目背景）、What（功能设计）、How much（投资预算）、How long（实施周期） - 明确角色边界：只负责售前方案，不做技术架构设计、内部项目规划、代码实现 **不适用场景**： - 技术架构设计（使用 architecture-design skill） - 内部项目规划（使用 internal-project-plan skill） - 具体代码实现
编制内部项目规划书，适用于云南纽智晨科技有限公司规划客户多年度项目路线图、报价参考和统一维护费用方案。
| name | converting-markdown |
| description | 将 Markdown 文档转换为精美的 HTML，支持智能 ASCII 图转 SVG。适用场景：(1) 将 Markdown 转换为 HTML 用于演示或文档，(2) 将 ASCII 图（架构图/流程图/UI/时间线）转换为专业 SVG/HTML 图形，(3) 应用专业主题（紫/蓝/绿/极简）生成商务或技术文档。支持 AI 辅助的智能 SVG 转换，3 步流程实现精美图形。 |
# 指定文件，使用默认主题（purple）
python3 scripts/convert.py document.md
# 指定文件和主题
python3 scripts/convert.py document.md --theme blue
# 列出所有可用主题
python3 scripts/convert.py --list-themes
<br>标签对于 UI 类型的 ASCII 图（弹出窗、对话框、表单等）：
❌ 禁止：
onclick、onhover 等事件处理display: none 隐藏内容<html>, <head>, <body>, <!DOCTYPE> 等标签）✅ 必须：
⚠️ HTML 片段规范：
<div>, <button>, <span>, <p>, <h1>~<h6> 等标签style 属性和 <style> 标签<html>, <head>, <body>, <!DOCTYPE> 等顶层标签<script> 标签（内联或外部脚本）和事件处理属性| Theme | Name | Colors | Use Case |
|---|---|---|---|
| purple | 紫色渐变主题 | #667eea → #764ba2 | 售前方案、商务文档 |
| blue | 蓝色科技主题 | #1890ff → #096dd9 | 技术文档、API 文档 |
| green | 绿色清新主题 | #52c41a → #389e0d | 内部报告、运营数据 |
| corporate | 企业蓝主题 | #003366 → #007bff | 正式方案、标书文档 |
| minimal | 极简灰度主题 | 灰度系 | 学术论文、正式报告 |
# 基本用法
python3 scripts/convert.py [markdown_file] [options]
# 选项：
# --theme, -t 主题名称（默认：purple）
# --list-themes, -l 列出所有可用主题
# 示例：
python3 scripts/convert.py "文档.md" # 默认紫色主题
python3 scripts/convert.py "文档.md" --theme blue # 蓝色主题
python3 scripts/convert.py "文档.md" --theme green # 绿色主题
python3 scripts/convert.py "文档.md" --theme corporate # 企业蓝主题
python3 scripts/convert.py "文档.md" --theme minimal # 极简主题
python3 scripts/convert.py --list-themes # 列出所有主题
graph TD
A[开始] --> B{用户指定文件?}
B -->|否| C[使用 AskUserQuestion 选择文件]
B -->|是| D[选择主题模板]
C --> D
D --> E{文件包含 ASCII 图?}
E -->|否| F[直接转换 HTML]
E -->|是| G{处理方式?}
G -->|保留原样| F
G -->|智能转换| H[步骤1: 生成占位符 HTML]
H --> I[步骤2: 提取占位符到 JSON]
I --> J[步骤3: AI 生成 SVG/HTML]
J --> K[步骤4: 替换占位符]
F --> L[验证输出]
K --> L
L --> M[完成]
| 步骤 | 操作 | 说明 |
|---|---|---|
| 步骤1 | 选择 Markdown 文件 | 使用 AskUserQuestion 工具 |
| 步骤2 | 选择主题 | purple/blue/green/corporate/minimal |
| 步骤3 | 处理 ASCII 图 | 保留原样 OR 智能转换（3步流程） |
| 步骤4 | 验证输出 | 检查清单见"验证规则"章节 |
执行脚本时的重要规则：
❌ 错误示例：
# 错误1：切换目录（会改变工作目录）
cd /path/to/skill && python3 scripts/convert.py document.md
# 错误2：使用相对路径（可能找不到文件）
python3 scripts/convert.py ../../document.md
✅ 正确示例：
# 方法1：使用绝对路径（推荐）
python3 /path/to/skill/scripts/convert.py /path/to/document.md --theme blue
# 方法2：先 cd 到项目目录，再执行
cd /path/to/project
python3 /path/to/skill/scripts/convert.py document.md --theme blue
执行后告知用户：
✅ 转换完成！
📄 输入文件：/path/to/document.md
📄 输出文件：/path/to/document.html
📊 文件大小：XX KB
💡 提示：HTML 文件与 Markdown 文件在同一目录
支持的 5 种图形类型：
architecture - 系统架构图flowchart - 流程图ui - UI 界面图（⚠️ 输出 HTML，不是 SVG）timeline - 时间线图diagram - 通用图如果文档包含 ASCII 图，询问用户处理方式：
python3 scripts/convert.py [file] --theme [theme]子步骤 1：生成带占位符的 HTML
AI_SVG_CONVERSION=true python3 scripts/convert.py [file] --theme [theme]
子步骤 2：提取占位符到 JSON
python3 scripts/extract_placeholders.py [file.html]
子步骤 3：AI 生成 SVG/HTML
🔴 核心要求：必须有 Task 工具时，使用多 Task 并行生成
| 方式 | 耗时（8个图） | 说明 |
|---|---|---|
| 顺序处理 | ~80秒 | AI 一个接一个生成 |
| 多 Task 并行 | ~20秒 | 多个 Task 同时工作 |
实现方式：
质量要求（每个 Task 都必须满足）：
rx="8"）font-family）[类型]-[ID]-，避免冲突）python3 scripts/replace_svg.py .cvt-caches/{document}/{session_id}/extracted.json
本技能包含以下详细参考资料，AI Agent 仅在需要时加载：
文件：references/output-specs.md
包含内容：
何时读取：
文件：references/ascii-to-svg.md
包含内容：
何时读取：
文件：references/technical-details.md
包含内容：
何时读取：
文件：references/ai-generation-specs.md
包含内容：
何时读取：
适用范围： 以下验证清单仅针对 AI Agent 生成的 SVG/HTML 代码，不适用于完整 HTML 文档。
生成代码时检查：
SVG 代码：
<svg 开头，</svg> 结尾xmlns="http://www.w3.org/2000/svg"viewBox 属性（不要用硬编码的 width/height）rx="8"）font-family）HTML 代码：
<div>, <button>, <input> 等）[类型]-[ID]-，如 ui-1-container）⚠️<script> 标签（内联或外部脚本）display:none 等隐藏内容<html>, <head>, <body>, <!DOCTYPE>）<body> 内部的代码）<style> 标签和内联 style 属性替换后检查：
# 检查是否还有未替换的占位符
grep -c "AI-SVG-PLACEHOLDER" output.html
# 输出应该为 0
| 主题 | Primary | Secondary | Background | Text |
|---|---|---|---|---|
| purple | #667eea | #764ba2 | #f8f9fa | #333333 |
| blue | #1890ff | #096dd9 | #f0f5ff | #333333 |
| green | #52c41a | #389e0d | #f6ffed | #333333 |
| corporate | #003366 | #007bff | #ffffff | #1a1a2e |
| minimal | #333333 | #666666 | #ffffff | #333333 |
# 转换单个文件
python3 scripts/convert.py document.md
# 指定主题
python3 scripts/convert.py document.md --theme blue
# 列出主题
python3 scripts/convert.py --list-themes
# 步骤1：生成占位符
AI_SVG_CONVERSION=true python3 scripts/convert.py document.md --theme purple
# 步骤2：提取占位符
python3 scripts/extract_placeholders.py document.html
# 步骤3：AI 生成 SVG/HTML 并替换
python3 scripts/replace_svg.py document.json