Menü
专业的 UI 设计与可视化图表生成 Skill，支持生成各类架构图、流程图、UI 原型、数据流图、ER 图、甘特图等，输出为可交互的 HTML 文件，支持导出 PNG/JPG/SVG 图片.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
基于 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 要与图表背景一致