一键在 Manus 中运行任何 Skill

开始使用

svg-beautifier

自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。

在 Manus 中运行

概览

自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。

安装命令

npx skills add https://github.com/jkzleond/skills-techco-proposals --skill svg-beautifier

复制此命令并粘贴到 Claude Code 中以安装该技能

来源

jkzleond/skills-techco-proposals

星标0

分支0

更新时间2026年2月9日 03:30

文件资源管理器

4 个文件

SKILL.md

readonly

name	svg-beautifier
description	自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。

SVG 美化技能 (SVG Beautifier)

🎯 核心原则 (Core Principles)

层次感 (Hierarchy): 必须定义 <defs> 并在其中配置标准阴影 (feDropShadow) 和渐变。
UI 质感 (Texture):
- 容器: 矩形圆角固定为 12px-16px。
- 装饰: 节点侧边应有进度条或图标提示（如 rect 高亮条）。
动态性 (Dynamics): 连接线优先使用 marker-end 的自定义箭头，并对次要逻辑使用 stroke-dasharray。
字体规范: 强制使用 PingFang SC, Microsoft YaHei, Arial 字体堆栈，主标题 font-weight: 600。

🔧 技术标准 (Technical Standards)

必备滤镜与标记

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 交互流程

步骤 1：定位目标图表

AI 扫描文档，寻找 <svg> 标签或带有 ```ascii 标记的代码块。

步骤 2：读取品牌配置

读取 CONFIG.yaml 中的全局变量，替换 Skill 中的 {{PRIMARY_COLOR}} 等占位符。

步骤 3：生成美化方案

根据图形类型生成对应的美化 SVG 代码。

如果是 ASCII: 先识别结构，再生成 SVG。
如果是 SVG: 提取核心元素，重新套用现代样式模板。

步骤 4：验证并应用

检查生成的 SVG 是否包含 xmlns, viewBox，以及是否满足 references/ 中的质量清单。

📋 检查清单 (Checklist)

是否正确引入了 <defs> 中的阴影与渐变定义？
所有矩形节点是否应用了 rx 圆角？
线条终点是否正确关联了 marker-end？
颜色方案是否完全同步于 CONFIG.yaml 中的变量？
文本层级（字体大小、粗细）是否符合视觉重心原则？

[!TIP] 优秀的 SVG 美化不仅仅是添加颜色，更是通过 defs 建立一套可复用的视觉组件库。

同仓库更多 Skills

同仓库

fast-prototype

jkzleond/skills-techco-proposals

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.

2026-02-110

converting-markdown

jkzleond/skills-techco-proposals

将 Markdown 文档转换为精美的 HTML，支持智能 ASCII 图转 SVG。适用场景：(1) 将 Markdown 转换为 HTML 用于演示或文档，(2) 将 ASCII 图（架构图/流程图/UI/时间线）转换为专业 SVG/HTML 图形，(3) 应用专业主题（紫/蓝/绿/极简）生成商务或技术文档。支持 AI 辅助的智能 SVG 转换，3 步流程实现精美图形。

2026-02-090

presales-proposal

jkzleond/skills-techco-proposals

编制售前方案、汇报方案、功能建议方案的专业技能。作为外包开发服务商的售前产品经理，编制包含四大板块（项目背景、功能设计、投资预算、实施周期）的售前方案。 **触发场景**：当用户请求编制客户方案文档时使用 - "为 XX 客户编制 XX 系统建设方案" - "编写一份 XX 项目的售前提案" - "给客户领导汇报的方案文档" - "帮客户梳理需求并设计方案" **核心职责**： - 回答 4 个核心问题：Why（项目背景）、What（功能设计）、How much（投资预算）、How long（实施周期） - 明确角色边界：只负责售前方案，不做技术架构设计、内部项目规划、代码实现 **不适用场景**： - 技术架构设计（使用 architecture-design skill） - 内部项目规划（使用 internal-project-plan skill） - 具体代码实现

2026-02-090

internal-project-plan

jkzleond/skills-techco-proposals

编制内部项目规划书，适用于云南纽智晨科技有限公司规划客户多年度项目路线图、报价参考和统一维护费用方案。

2026-02-050

来源

jkzleond

jkzleond/skills-techco-proposals

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

网页开发工程师计算机与数学类职业15-1254L4

name	svg-beautifier
description	自动将 HTML/Markdown 中的基础 SVG 或 ASCII 图转换为具有现代 UI 风格（渐变、阴影、圆角）的专业图表。

SVG 美化技能 (SVG Beautifier)

🎯 核心原则 (Core Principles)

层次感 (Hierarchy): 必须定义 <defs> 并在其中配置标准阴影 (feDropShadow) 和渐变。
UI 质感 (Texture):
- 容器: 矩形圆角固定为 12px-16px。
- 装饰: 节点侧边应有进度条或图标提示（如 rect 高亮条）。
动态性 (Dynamics): 连接线优先使用 marker-end 的自定义箭头，并对次要逻辑使用 stroke-dasharray。
字体规范: 强制使用 PingFang SC, Microsoft YaHei, Arial 字体堆栈，主标题 font-weight: 600。

🔧 技术标准 (Technical Standards)

必备滤镜与标记

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 交互流程

步骤 1：定位目标图表

AI 扫描文档，寻找 <svg> 标签或带有 ```ascii 标记的代码块。

步骤 2：读取品牌配置

读取 CONFIG.yaml 中的全局变量，替换 Skill 中的 {{PRIMARY_COLOR}} 等占位符。

步骤 3：生成美化方案

根据图形类型生成对应的美化 SVG 代码。

如果是 ASCII: 先识别结构，再生成 SVG。
如果是 SVG: 提取核心元素，重新套用现代样式模板。

步骤 4：验证并应用

检查生成的 SVG 是否包含 xmlns, viewBox，以及是否满足 references/ 中的质量清单。

📋 检查清单 (Checklist)

是否正确引入了 <defs> 中的阴影与渐变定义？
所有矩形节点是否应用了 rx 圆角？
线条终点是否正确关联了 marker-end？
颜色方案是否完全同步于 CONFIG.yaml 中的变量？
文本层级（字体大小、粗细）是否符合视觉重心原则？

[!TIP] 优秀的 SVG 美化不仅仅是添加颜色，更是通过 defs 建立一套可复用的视觉组件库。