¡Genera gratis todo tipo de infografías útiles con Cursor/Windsur!

Érase una vez compartir mucha diversiónEjemplo de palabras clave en una tarjetaLa razón es simple: la intención real del usuario no coincide con el estilo de muestra de la plantilla. La razón es muy simple: estos mapa de la tarjeta prompt word template sample style code es generalmente fijo, la intención real del usuario y el estilo de la muestra no coinciden.

Alguien ha hecho una adaptación más general de la palabra clave:Card Diagram Cue Words: presente gráficamente cualquier esquema conceptual con SVG pero los inconvenientes son evidentes:

• Las ilustraciones generadas en el uso real pueden desviarse significativamente de la intención del usuario, es decir, esta palabra claveLa generalizabilidad sigue siendo baja.
• sólo si Claude para generar un código SVG relativamente completo.
• Inestable al introducir mucho contexto y generar infografías en múltiples rondas de diálogo.

Pues sí:Presentado anteriormente por Chief AI Sharing Circle:No son las palabras clave las que hay que aprender para el análisis de datos empresariales mediante grandes modelos, pero estas... muchos de mis amigos no entienden qué hacer con los nombres de los modelos de negocio sin aprender las palabras clave.

La respuesta es:Las palabras clave en sí mismas no te permiten generar diagramas buenos y útiles utilizando el Gran Modelo; lo que importa es qué tipo de diagramas quieres generar y describirlos con lo que sabes.

La pregunta es...La gente no entiende muy bien cómo describir para generar la infografía adecuada para mi simple idea, documento de texto o documento de datos.

A continuación voy a construir un conjunto sencillo de métodos para probarGenerar infografías para todosRequisito. Lo sentimos, es posible que la infografía generada no Servilleta Una hermosa herramienta en una clase por sí misma, pero eso es intrascendente en comparación con la búsqueda de la practicidad. Lo siguiente formalmente en el funcionamiento del enlace...

montaje

Por favor, instale Cursor o Windsur, Cursor se recomienda aquí porque se puede utilizar con unos pocosMedios especialesposibleUso gratuito.

Importar plantillas de instrucciones

Esta plantilla se genera a partir de un gran modelo importando un gran número de ejemplos de diagramas de flujo, y la parte efectiva de la instrucción consta de tres lugares: análisis de requisitos, biblioteca de referencia y plantilla de salida. Conserve la plantilla completa para obtener más inspiración.

# 使用大模型生成专业信息图的提示词指南

## 一、需求分析与图表选择

### 1. 需求分析模板
```
请分析用户提出的需求，猜测用户真实意图并推荐最佳图表类型：

1. 内容分析：
- 核心概念：[描述核心内容]
- 数据特征：[数值/分类/时序/层级/关系/分布/概率]
- 展示重点：[趋势/对比/分布/构成/关联/转化/分群/预测]
- 分析维度：[单维度/二维/多维/时序/空间]
- 模型类型：[描述性/预测性/决策性/分析性]

2. 受众分析：
- 目标用户：[决策者/分析师/客户/其他]
- 专业程度：[专业/半专业/普通]
- 使用场景：[报告/演示/分析/教学]
- 展示方式：[静态展示/简单交互]

3. 技术选型：
- 图表类型：
* 基础图表：[折线/柱状/饼图/散点图]
* 复合图表：[漏斗图/雷达图/树图]
* 分析图表：[矩阵图/热力图/箱线图]
* 结构图表：[流程图/思维导图/组织图]
* 统计图表：[直方图/概率图/回归图]

- 图表库选择：
* 简单流程图 → Mermaid.js
* 基础统计图 → Chart.js
* 商业图表 → ECharts基础版
* 专业分析 → Plotly

- 展示方式：
* 单图展示：突出单一重点
* 多图组合：展示多维关系
* 静态展示：固定数据展示

4. 图表建议：
- 主要图表：[推荐的主图表类型]
- 辅助图表：[补充的图表类型]
- 布局方式：[图表布局建议]
- 配色方案：[配色建议]
```

### 2. 图表类型推荐矩阵

#### a) 商业分析模型图表映射
```
1. 用户行为分析
- AARRR模型 → 漏斗图（多层次渐变色，突出转化过程）
* Acquisition（获取）- 蓝色顶层
* Activation（激活）- 绿色第二层
* Retention（留存）- 黄色第三层
* Revenue（收入）- 橙色第四层
* Referral（推荐）- 红色底层
- RFM模型 → 矩阵热力图
* 横轴：购买频率(F)
* 纵轴：最近购买时间(R)
* 颜色深浅：购买金额(M)
* 客户分群：不同颜色区域
- 聚类分析 → 散点图 + 颜色分组

2. 战略分析
- PEST分析 → 四象限饼图
* Political（政治）- 灰色象限
* Economic（经济）- 橙色象限
* Social（社会）- 蓝色象限
* Technological（技术）- 黄色象限
- 5W2H分析 → 放射状思维导图
* 中心主题 + 7个维度节点
* 使用不同颜色区分各维度
* What/Why/Where/When/Who/How/HowMuch

3. 决策分析
- 决策树模型 → 层级树状图
* 节点表示决策点
* 分支表示可选方案
* 叶子节点表示结果
- 时间序列分析 → 折线图 + 趋势线
* 主曲线展示实际数据
* 虚线表示预测趋势
* 波动区间显示置信度

4. 效果分析
- 帕累托图 → 组合柱线图
* 柱状图表示个体数值
* 折线图表示累计百分比
- 转化漏斗 → S形曲线图
* X轴表示时间/阶段
* Y轴表示转化率
* 曲线形状反映转化特征
```

#### b) 数据特征与图表映射
```
1. 时序数据
- 趋势展示 → 折线图/面积图
- 周期分析 → 环形图/螺旋图
- 累计变化 → 堆叠面积图

2. 分类数据
- 分布对比 → 柱状图/条形图
- 构成分析 → 饼图/环形图
- 层级关系 → 树图/旭日图

3. 关系数据
- 相关性 → 散点图/气泡图
- 网络关系 → 关系图/桑基图
- 层次结构 → 树状图/组织图

4. 地理数据
- 区域分布 → 地图/热力图
- 空间关系 → 路径图/流向图

5. 多维数据
- 属性对比 → 雷达图/平行坐标图
- 矩阵分析 → 热力图/矩阵图
```

### 3. 图表组合模式
```
1. 层次结构模式
- 主图 + 子图
- 概览 + 明细
- 汇总 + 分解

2. 多维度模式
- 时间 + 空间
- 结构 + 趋势
- 分布 + 关系

3. 比较分析模式
- 预期 + 实际
- 同比 + 环比
- 占比 + 排名

4. 因果分析模式
- 原因 + 结果
- 投入 + 产出
- 成本 + 收益
```

## 二、图表生成规范

### 1. 设计原则

```javascript
// 1. 视觉原则
const visualPrinciples = {
hierarchy: {
primary: '核心信息突出',
secondary: '支撑信息层次',
auxiliary: '辅助信息弱化'
},
layout: {
balance: '页面视觉平衡',
whitespace: '留白空间控制'
},
readability: {
contrast: '对比度适中',
spacing: '间距合理',
alignment: '对齐规范'
}
}

// 2. 展示原则
const displayPrinciples = {
clarity: {
title: '标题清晰',
label: '标签可读',
legend: '图例明确'
},
simplicity: {
data: '数据精简',
style: '样式克制',
color: '配色协调'
}
}

// 3. 适配原则
const adaptivePrinciples = {
responsive: {
layout: '基础布局适配',
content: '内容自适应'
},
performance: {
loading: '加载优化',
rendering: '渲染优化'
}
}
```

### 2. 基础配置框架

```javascript
const baseConfig = {
// 1. 布局配置
layout: {
container: {
width: '100%',
maxWidth: '1200px',
padding: '20px',
margin: '0 auto'
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px'
}
},

// 2. 主题配置
theme: {
colors: {
primary: '#primary-color',
secondary: '#secondary-color',
background: '#background-color',
text: '#text-color'
},
typography: {
fontSize: {
sm: '14px',
md: '16px',
lg: '20px'
},
fontWeight: {
regular: 400,
bold: 700
}
}
}
}
```

### 3. 图表生成策略

```javascript
// 1. 数据分析策略
function analyzeDataStrategy(data) {
return {
// 数据特征分析
characteristics: {
type: '数据类型',
scale: '数据规模',
dimensions: '维度数量'
},

// 展示需求分析
requirements: {
purpose: '展示目的',
audience: '目标受众'
}
}
}

// 2. 图表选择策略
function selectChartStrategy(analysis) {
return {
// 图表类型选择
chartType: {
primary: '主要图表类型',
secondary: '辅助图表类型'
},

// 布局方案
layout: {
structure: '整体结构',
arrangement: '元素排列'
}
}
}

// 3. 样式映射策略
function styleMapStrategy(chartConfig) {
return {
// 视觉编码
visual: {
color: '颜色方案',
shape: '形状系统'
},

// 响应式规则
responsive: {
layout: '基础布局'
}
}
}
```

### 4. 适配方案

```javascript
const adaptiveStrategy = {
// 1. 场景适配
scenario: {
presentation: {
style: '演示风格'
},
analysis: {
depth: '分析深度'
}
},

// 2. 设备适配
device: {
desktop: {
layout: '桌面布局'
},
mobile: {
layout: '移动布局'
}
}
}
```

## 三、输出规范

### 1. HTML基础模板
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${TITLE}</title>
<script src="${CHART_LIB_URL}"></script>
</head>
<body>
<div class="chart-container">
<h1 class="chart-title">${TITLE}</h1>
<div id="chart"></div>
</div>
</body>
</html>
```

### 2. 变量说明
```javascript
// 1. 基础变量
const templateVars = {
// 1.1 图表库导入
CHART_LIB_IMPORTS: {
echarts: '<script src="https://cdn.jsdelivr.net/npm/echarts@latest"></script>',
d3: '<script src="https://cdn.jsdelivr.net/npm/d3@latest"></script>',
chartjs: '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>',
mermaid: '<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>'
},

// 1.2 容器结构
CHART_CONTAINER: {
basic: '<div id="${CHART_ID}"></div>',
withWrapper: `
<div class="chart-wrapper">
<div id="${CHART_ID}"></div>
</div>
`,
withHeader: `
<div class="chart-wrapper">
<header>
<h1>${TITLE}</h1>
<div class="description">${DESCRIPTION}</div>
</header>
<div id="${CHART_ID}"></div>
</div>
`
},

// 1.3 样式变量
STYLE_VARS: {
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
fonts: 'system-ui, -apple-system, "Microsoft YaHei", sans-serif',
sizes: {
mobile: '100%',
tablet: '90%',
desktop: '1200px'
}
}
};

// 2. 图表初始化脚本模板
const chartInitTemplates = {
// 2.1 基础初始化
basic: `
document.addEventListener('DOMContentLoaded', function() {
${CHART_INIT_CODE}
});
`,

// 2.2 带错误处理
withErrorHandling: `
document.addEventListener('DOMContentLoaded', function() {
try {
${CHART_INIT_CODE}
} catch (error) {
console.error('图表渲染失败:', error);
${ERROR_HANDLING_CODE}
}
});
`,

// 2.3 带响应式支持
withResponsive: `
document.addEventListener('DOMContentLoaded', function() {
try {
${CHART_INIT_CODE}
window.addEventListener('resize', function() {
${RESIZE_HANDLING_CODE}
});
} catch (error) {
console.error('图表渲染失败:', error);
${ERROR_HANDLING_CODE}
}
});
`
};

// 3. 样式模板
const styleTemplates = {
// 3.1 基础样式
basic: `
body { margin: 0; padding: 15px; }
#${CHART_ID} { width: 100%; height: ${HEIGHT}px; }
`,

// 3.2 响应式样式
responsive: `
@media screen and (max-width: 768px) {
${MOBILE_STYLES}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
${TABLET_STYLES}
}
@media screen and (min-width: 1025px) {
${DESKTOP_STYLES}
}
`
};
```

### 3. 使用说明
```javascript
// 1. 基础用法
const basicUsage = {
// 1.1 选择图表库
selectLib(chartType) {
return templateVars.CHART_LIB_IMPORTS[chartType];
},

// 1.2 选择容器
selectContainer(type, params) {
return templateVars.CHART_CONTAINER[type]
.replace('${CHART_ID}', params.chartId)
.replace('${TITLE}', params.title)
.replace('${DESCRIPTION}', params.description);
},

// 1.3 选择初始化模板
selectInitTemplate(type) {
return chartInitTemplates[type];
}
};

// 2. 扩展用法
const extendedUsage = {
// 2.1 自定义样式
customStyle: `
${styleTemplates.basic}
${styleTemplates.responsive}
${CUSTOM_STYLES}
`,

// 2.2 自定义交互
customInteraction: `
${INTERACTION_CODE}
`
};
```

# 约束
- 请严格按照上述规范和模板进行代码生成，确保输出HTML文件结果符合预期。

Utilizando Cursor como ejemplo, cree un help.cursorrules y, a continuación, copie y pegue las palabras de aviso anteriores y guarde.

utilizar

Referenciar correctamente el archivo de descripción del aviso y activar el modo agente.

1. Generación de infografías sin contexto

utilizar Análisis de datos empresariales con Big Models En el método para generar "modelo RFM", modelo RFM es muy representativo, como una presentación razonable de la infografía debe ser más tridimensional, para reflejar la relación entre la R, F, M tres. El primer intento sin objetivo:

Como mi petición era generar "ejemplos", estaba más orientada a demostrar los conceptos básicos, y no construía los diagramas de análisis que teníamos en mente, lo que también era un problema durante la fase de reflexión del Agente. Podríamos haber interrumpido el hilo de pensamiento del Agente y haberle pedido otro método de generación, cosa que no hice.

Llegados a este punto, las ventajas de la solución han quedado demostradas, el mismo proceso es difícil de realizar con otras herramientas y modelos, y el punto final de la generación de infografías debería ser la remisión a bibliotecas enriquecidas.

A continuación, cargué una ilustración RFM en 3D y pedí que se generara de acuerdo con mi imagen:

Por cierto, esta vez, el tema de la superposición de estilos se puede solicitar de nuevo para su modificación, y aquí no se hará ninguna optimización adicional.

Cambiar una tarea: no mostrar el proceso de operación aquí, sólo mirar el efecto, la instrucción es: para generar un diagrama de flujo de la empresa WeChat inicio de sesión autorizado, para el desarrollo técnico.

2. Generación contextualizada de infografías

comparable Servilleta Puede importar artículos para generar infografías, pero puede utilizar esta solución para generar múltiples infografías basadas en diferentes contenidos del artículo, una demostración sencilla: (borrar el registro de diálogo anterior y las imágenes generadas antes de la demostración)

Empieza por subir un artículo largo y guardarlo como text.md:

Instrucciones de entrada: analice el enfoque del artículo text.md, elija 2 temas centrales del artículo y genere un gráfico. (aún requiere juego libre para modelos grandes)

Esta vez, se generó un diagrama de flujo, y hubo inconvenientes, el artículo era demasiado largo, el propio contenido describía la lógica del problema, sólo los seres humanos pueden refinar el diagrama de flujo completo adivinando, y es comprensible que el gran modelo naturalmente no pueda generar un diagrama muy perfecto.

El último ejemplo nos permite introducir un conjunto de datos y mezclar algo de contenido financiero para ver lo bien que presenta el análisis de datos:

PD: Nuestro objetivo no es el análisis de datos, sino la presentación visual de los resultados del análisis de datos. De hecho, desde el análisis de grandes cantidades de datos hasta la presentación de la información, confiando en las capacidades de planificación de tareas del agente, en realidad puede hacerse en un solo paso (por ejemplo, introduciendo un agente que pueda analizar los datos). MCP servicios), esta cuestión no se trata en profundidad.

Se generaron tres gráficos:

1. Presentación de la empresa

2. Comparación financiera

3. Ventaja competitiva

lo último en

Estos IDE de IA pueden llamar a "herramientas", normalmente el Cline El MCP está referenciado en el comando. Además de las indicaciones existentes, si desea analizar datos en profundidad antes de mostrar los gráficos, puede pedir a cursor que despliegue un entorno python, cree un script de análisis para el ejemplo de datos que ha dado y, a continuación, incluya una declaración al final de la plantilla de comandos que diga: Cuando analice los datos, intente ejecutar el script XXX.py. ¡Las posibilidades son infinitas!