自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。
npx skills add https://github.com/jkzleond/skills-techco-proposals --skill svg-beautifierCopy and paste this command into Claude Code to install the skill
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.
将 Markdown 文档转换为精美的 HTML，支持智能 ASCII 图转 SVG。适用场景：(1) 将 Markdown 转换为 HTML 用于演示或文档，(2) 将 ASCII 图（架构图/流程图/UI/时间线）转换为专业 SVG/HTML 图形，(3) 应用专业主题（紫/蓝/绿/极简）生成商务或技术文档。支持 AI 辅助的智能 SVG 转换，3 步流程实现精美图形。
编制售前方案、汇报方案、功能建议方案的专业技能。 作为外包开发服务商的售前产品经理，编制包含四大板块（项目背景、功能设计、投资预算、实施周期）的售前方案。 **触发场景**：当用户请求编制客户方案文档时使用 - "为 XX 客户编制 XX 系统建设方案" - "编写一份 XX 项目的售前提案" - "给客户领导汇报的方案文档" - "帮客户梳理需求并设计方案" **核心职责**： - 回答 4 个核心问题：Why（项目背景）、What（功能设计）、How much（投资预算）、How long（实施周期） - 明确角色边界：只负责售前方案，不做技术架构设计、内部项目规划、代码实现 **不适用场景**： - 技术架构设计（使用 architecture-design skill） - 内部项目规划（使用 internal-project-plan skill） - 具体代码实现
编制内部项目规划书，适用于云南纽智晨科技有限公司规划客户多年度项目路线图、报价参考和统一维护费用方案。
| name | svg-beautifier |
| description | 自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。 |
<defs> 并在其中配置标准阴影 (feDropShadow) 和渐变。12px-16px。rect 高亮条）。marker-end 的自定义箭头，并对次要逻辑使用 stroke-dasharray。PingFang SC, Microsoft YaHei, Arial 字体堆栈，主标题 font-weight: 600。AI 在生成代码时应始终包含以下定义（颜色值请读取 CONFIG.yaml）：
<defs>
<!-- 标准阴影 -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.1" />
</filter>
<!-- 标准箭头 -->
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="{{brand.primary}}" />
</marker>
</defs>
具体图形类型的实现细节请参阅：
references/chart-styles.md (柱状图、折线图、饼图)references/flowchart-patterns.md (逻辑流、系统层级)AI 扫描文档，寻找 <svg> 标签或带有 ```ascii 标记的代码块。
读取 CONFIG.yaml 中的全局变量，替换 Skill 中的 {{PRIMARY_COLOR}} 等占位符。
根据图形类型生成对应的美化 SVG 代码。
检查生成的 SVG 是否包含 xmlns, viewBox，以及是否满足 references/ 中的质量清单。
<defs> 中的阴影与渐变定义？rx 圆角？marker-end？CONFIG.yaml 中的变量？[!TIP] 优秀的 SVG 美化不仅仅是添加颜色，更是通过
defs建立一套可复用的视觉组件库。