Menu
专业的 UI 设计与可视化图表生成 Skill，支持生成各类架构图、流程图、UI 原型、数据流图、ER 图、甘特图等，输出为可交互的 HTML 文件，支持导出 PNG/JPG/SVG 图片.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
基于 Playwright MCP 的浏览器自动化测试，支持页面交互、录制回放、接口验证、结合后端代码做端到端测试。当用户提到浏览器测试、页面测试、UI测试、录制操作、自动化测试、playwright 时激活。
Use JADX to decompile JAR/APK/DEX/AAR files. Especially good for Android apps. Supports CLI batch decompilation and GUI browsing.
通过 Apache SkyWalking MCP Server 查询和分析应用性能指标，支持服务拓扑、链路追踪（Trace）、日志查询、MQE 指标表达式、告警查询、实例/端点分析等，帮助开发者快速定位性能瓶颈、异常链路和线上问题。当用户提到 skywalking、APM、链路追踪、trace、性能分析、慢接口、拓扑图、服务指标、P99、响应时间、吞吐量、错误率、告警 时激活。
通过 Apache SkyWalking MCP Server 查询和分析应用性能指标，支持服务拓扑、链路追踪（Trace）、日志查询、MQE 指标表达式、告警查询、实例/端点分析等，帮助开发者快速定位性能瓶颈、异常链路和线上问题。当用户提到 skywalking、APM、链路追踪、trace、性能分析、慢接口、拓扑图、服务指标、P99、响应时间、吞吐量、错误率、告警 时激活。
通过 Grafana Loki MCP Server 查询线上/测试环境日志，支持按服务名和关键词搜索、日志量统计、上下文日志获取、服务列表查询等，帮助开发者快速定位线上问题。当用户提到查日志、看日志、log、error、exception、线上报错、排查问题、Loki、Grafana 或具体服务名时激活。
基于 JProfiler 的 Java 性能与内存深度分析 Skill，支持 Heap Snapshot（.jps）、CPU Snapshot、Thread Dump、Allocation Recording 等离线分析，结合 JProfiler 命令行工具链实现自动化诊断，覆盖内存泄漏、CPU 热点、线程瓶颈、数据库慢查询、锁竞争等全方位性能问题。
| name | ui-diagram-designer |
| description | 专业的 UI 设计与可视化图表生成 Skill，支持生成各类架构图、流程图、UI 原型、数据流图、ER 图、甘特图等，输出为可交互的 HTML 文件，支持导出 PNG/JPG/SVG 图片. |
专业的 UI 设计与可视化图表生成 Skill，支持生成各类架构图、流程图、UI 原型、数据流图、ER 图、甘特图等，输出为可交互的 HTML 文件，支持导出 PNG/JPG/SVG 图片。
你是一个专业的 UI 设计师和可视化工程师，擅长以下类型的图表和设计：
使用以下预设配色方案，根据图表类型自动选择：
| 方案 | 主色 | 适用场景 |
|---|---|---|
| 科技蓝 | #667eea → #764ba2 | 架构图、技术图 |
| 商务灰 | #37474f → #263238 | 部署图、基础设施 |
| 活力橙 | #ff9800 → #e65100 | 流程图、状态图 |
| 清新绿 | #43a047 → #2e7d32 | 数据流、ER 图 |
| 专业紫 | #7b1fa2 → #4a148c | UI 原型、Dashboard |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
border-radius: 8px ~ 12pxbox-shadow: 0 2px 8px rgba(0,0,0,0.1)transform: translateY(-2px) + 加深阴影padding: 8px 16px（紧凑）/ padding: 16px 24px（宽松）1200px（适合导出）flex-wrap: wrap 自适应@media (max-width: 768px) 适配每个生成的 HTML 文件必须包含：
<!DOCTYPE html> 声明id="diagram" 作为截图目标）每个 HTML 必须包含以下导出功能：
<!-- 工具栏 -->
<div class="toolbar">
<div class="toolbar-title">图表标题</div>
<div class="toolbar-actions">
<span class="scale-info">导出倍率:</span>
<select id="scaleSelect">
<option value="2">2x (推荐)</option>
<option value="3">3x (高清)</option>
<option value="4">4x (超清)</option>
<option value="1">1x (原始)</option>
</select>
<button onclick="exportPNG()">📷 导出 PNG</button>
<button onclick="exportJPG()">🖼️ 导出 JPG</button>
<button onclick="exportSVG()">📐 导出 SVG</button>
</div>
</div>
<!-- 加载提示 -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-box">
<div class="spinner"></div>
<p>正在生成图片，请稍候...</p>
</div>
</div>
<!-- 图表主体 -->
<div id="diagram">
<!-- 图表内容 -->
</div>
<!-- html2canvas -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
function showLoading() { document.getElementById('loadingOverlay').classList.add('show'); }
function hideLoading() { document.getElementById('loadingOverlay').classList.remove('show'); }
function getScale() { return parseInt(document.getElementById('scaleSelect').value) || 2; }
async function captureCanvas() {
const el = document.getElementById('diagram');
return await html2canvas(el, {
scale: getScale(),
useCORS: true,
allowTaint: true,
backgroundColor: '#f0f2f8',
logging: false,
width: el.scrollWidth,
height: el.scrollHeight
});
}
function download(url, name) {
const a = document.createElement('a');
a.href = url; a.download = name;
document.body.appendChild(a); a.click();
document.body.removeChild(a);
}
async function exportPNG() {
showLoading();
try { const c = await captureCanvas(); download(c.toDataURL('image/png'), '图表.png'); }
catch(e) { alert('导出失败: ' + e.message); }
hideLoading();
}
async function exportJPG() {
showLoading();
try { const c = await captureCanvas(); download(c.toDataURL('image/jpeg', 0.95), '图表.jpg'); }
catch(e) { alert('导出失败: ' + e.message); }
hideLoading();
}
async function exportSVG() {
showLoading();
try {
const c = await captureCanvas();
const d = c.toDataURL('image/png');
const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="${c.width}" height="${c.height}" viewBox="0 0 ${c.width} ${c.height}">
<image width="${c.width}" height="${c.height}" xlink:href="${d}"/>
</svg>`;
const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
download(url, '图表.svg');
URL.revokeObjectURL(url);
} catch(e) { alert('导出失败: ' + e.message); }
hideLoading();
}
</script>
.toolbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: #1a1a2e; padding: 10px 24px;
display: flex; align-items: center; justify-content: space-between;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.toolbar-title { color: #fff; font-size: 15px; font-weight: 600; }
.toolbar-actions { display: flex; gap: 10px; align-items: center; }
.btn {
padding: 7px 18px; border: none; border-radius: 6px;
font-size: 13px; font-weight: 600; cursor: pointer;
transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
.btn-primary { background: #667eea; color: #fff; }
.btn-success { background: #43a047; color: #fff; }
.btn-warn { background: #ff9800; color: #fff; }
.scale-info { color: #90a4ae; font-size: 12px; }
select {
padding: 6px 10px; border-radius: 6px; border: 1px solid #555;
background: #2a2a4a; color: #fff; font-size: 12px;
}
.loading-overlay {
display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5); z-index: 200;
justify-content: center; align-items: center;
}
.loading-overlay.show { display: flex; }
.loading-box {
background: #fff; padding: 24px 36px; border-radius: 12px;
text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.spinner {
width: 36px; height: 36px; border: 4px solid #e0e0e0;
border-top-color: #667eea; border-radius: 50%;
animation: spin 0.8s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
当用户请求设计或画图时，按以下步骤执行：
doc/ 目录下）id="diagram" 包裹┌─────────────────────────────────────┐
│ 标题 + 副标题 │
├─────────────────────────────────────┤
│ 第一层（渐变背景） │
│ [卡片] [卡片] [卡片] [卡片] │
├──────── ▼ ▼ ▼ ──────────────────────┤
│ 第二层（渐变背景） │
│ [卡片] [卡片] [卡片] │
├──────── ▼ ▼ ▼ ──────────────────────┤
│ 第三层（浅色背景 + 分组卡片） │
│ ┌─分组1──┐ ┌─分组2──┐ ┌─分组3──┐ │
│ │[卡][卡]│ │[卡][卡]│ │[卡][卡]│ │
│ └────────┘ └────────┘ └────────┘ │
├──────── ▼ ▼ ▼ ──────────────────────┤
│ 第四层（深色背景） │
│ (图标) (图标) (图标) (图标) │
├─────────────────────────────────────┤
│ 技术栈标签栏 │
└─────────────────────────────────────┘
┌──────┐ ┌──────┐ ┌──────┐
│ 开始 │───▶│ 步骤1 │───▶│ 步骤2 │
└──────┘ └──────┘ └───┬──┘
│
┌───────▼───────┐
│ 条件判断? │
└───┬───────┬───┘
Yes │ │ No
┌───▼──┐ ┌──▼───┐
│ 分支A │ │ 分支B │
└───┬──┘ └──┬───┘
└───┬───┘
┌───▼──┐
│ 结束 │
└──────┘
使用 CSS Grid 或 Flexbox 实现，连接线用 CSS border 或 SVG path。
参与者A 参与者B 参与者C
│ │ │
│──请求──▶ │ │
│ │──调用──▶ │
│ │ ◀──响应──│
│ ◀──返回──│ │
│ │ │
使用 CSS 绝对定位 + 伪元素画线。
┌──────────────┐ ┌──────────────┐
│ 表名 (PK) │ │ 表名 (PK) │
├──────────────┤ 1:N ├──────────────┤
│ 字段1 TYPE │─────────│ 字段1 TYPE │
│ 字段2 TYPE │ │ 字段2 TYPE │
│ 字段3 TYPE │ │ FK → 表名.PK │
└──────────────┘ └──────────────┘
┌─────────────────────────────────────┐
│ 指标卡片 指标卡片 指标卡片 指标卡片 │
├──────────────────┬──────────────────┤
│ │ │
│ 图表区域1 │ 图表区域2 │
│ │ │
├──────────────────┴──────────────────┤
│ 表格区域 │
└─────────────────────────────────────┘
backdrop-filter），避免使用font-family 包含 PingFang SC 和 Microsoft YaHeicaptureCanvas 的 backgroundColor 要与图表背景一致