Générez toutes sortes d'infographies utiles avec Cursor/Windsur gratuitement !

Il était une fois de partager beaucoup de plaisirExemples de mots-guides pour les tableaux de cartesLa raison en est simple : l'intention réelle de l'utilisateur ne correspond pas au style du modèle. La raison en est très simple : le code de style de l'échantillon de ce modèle de carte est généralement fixe, l'intention réelle de l'utilisateur et le style de l'échantillon ne correspondent pas.

Quelqu'un a procédé à une adaptation plus générale du mot de repère :Card Diagram Cue Words : présentez graphiquement n'importe quel schéma conceptuel à l'aide de SVG mais les inconvénients sont évidents :

• Les illustrations générées lors de l'utilisation réelle peuvent s'écarter considérablement de l'intention de l'utilisateur, c'est-à-dire de ce mot indicateur.La généralisation reste faible.
• seulement si Claude afin de générer un code SVG relativement complet.
• Instable lors de l'introduction d'un grand nombre de contextes et de la création d'infographies dans le cadre de plusieurs cycles de dialogue.

C'est ce qui s'est passé :Précédemment présenté par Chief AI Sharing Circle :Ce ne sont pas les mots clés que vous devez apprendre pour l'analyse des données d'entreprise à l'aide de grands modèles, mais ces... En effet, beaucoup de mes amis ne comprennent pas ce qu'il faut faire avec les noms des modèles d'entreprise sans apprendre les mots clés.

La réponse est oui :Les mots-clés eux-mêmes ne vous permettent pas de générer de bons diagrammes utiles à l'aide du Grand Modèle ; c'est le type de diagrammes que vous voulez générer et les décrire avec ce que vous savez qui importe !

La question est de savoir...Les gens ne comprennent pas vraiment comment décrire pour générer la bonne infographie pour ma simple idée, mon document texte ou mon document de données.

Ci-dessous, je vais construire un ensemble simple de méthodes à essayerGénérer des infographies pour tousExigence. Désolé, il est possible que l'infographie générée ne réponde pas aux critères suivants Serviette Un bel outil dans une classe à part, mais c'est sans importance par rapport à la recherche de l'aspect pratique. Ce qui suit concerne formellement le fonctionnement du lien...

montage

Veuillez installer Curseur ou Windsur, Cursor est recommandé ici parce qu'il peut être utilisé avec quelquesMoyens spéciauxpossibleUtilisation gratuite.

Importer des modèles d'instruction

Ce modèle est généré à partir d'un grand modèle en important un grand nombre d'exemples d'organigrammes, et la partie efficace de l'instruction consiste en trois éléments : l'analyse des besoins, la bibliothèque de référence et le modèle de sortie. Conservez le modèle complet pour plus d'inspiration.

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

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

### 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文件结果符合预期。

En utilisant le curseur comme exemple, créez un fichier help.cursorrules puis copiez et collez les mots de l'invite ci-dessus et enregistrez.

utiliser

Référencement correct du fichier de description de l'invite et activation du mode agent

1) Génération d'infographies sans contexte

utiliser L'analyse des données d'entreprise avec les grands modèles Dans la méthode de génération du "modèle RFM", le modèle RFM est très représentatif, car une présentation raisonnable de l'infographie devrait être plus tridimensionnelle, afin de refléter la relation entre les trois éléments R, F, M. Première tentative sans objectif :

Ma demande étant de générer des "exemples", elle était plus orientée vers la démonstration des concepts de base, et ne construisait pas les diagrammes d'analyse que nous avions à l'esprit, ce qui posait également un problème lors de la phase de réflexion de l'agent. Nous aurions pu interrompre la réflexion de l'agent et lui demander une autre méthode de génération, ce que je n'ai pas fait.

À ce stade, les avantages de la solution ont été démontrés, le même processus est difficile à réaliser avec d'autres outils et modèles, et l'objectif final de la génération d'infographies devrait être de se référer à des bibliothèques riches.

Ensuite, j'ai téléchargé une illustration 3D du RFM et j'ai demandé à ce qu'elle soit générée selon mon image :

D'ailleurs, cette fois-ci, la question du chevauchement des styles peut à nouveau faire l'objet d'une demande de modification, et aucune autre optimisation ne sera effectuée ici.

Modifier une tâche : ne pas montrer le processus d'opération ici, juste regarder l'effet, l'instruction est : générer un organigramme de la connexion autorisée WeChat de l'entreprise, pour le développement technique.

2. la génération contextualisée d'infographies

comparable Serviette Vous pouvez importer des articles pour générer des infographies, mais vous pouvez utiliser cette solution pour générer plusieurs infographies basées sur différents contenus dans l'article, une démo simple : (effacez l'enregistrement de dialogue précédent et les images générées avant la démo)

Commencez par télécharger un article long et enregistrez-le sous le nom de text.md :

Instructions de saisie : analyser l'objet de l'article text.md, choisir 2 questions centrales de l'article et générer un graphique. (nécessite encore un jeu libre pour les grands modèles)

Cette fois, un organigramme a été généré, avec des inconvénients : l'article était trop long et la logique de la description du contenu elle-même était problématique ; seuls les humains peuvent affiner un organigramme complet en devinant, et il est compréhensible qu'un modèle de grande taille ne puisse naturellement pas générer un organigramme très complet.

Le dernier exemple nous permet de saisir un ensemble de données et d'y ajouter un contenu financier pour voir si l'analyse des données est bien présentée :

PS : Notre objectif n'est pas l'analyse des données, mais la présentation visuelle des résultats de l'analyse des données. En fait, de l'analyse de grandes quantités de données à la présentation des informations, en s'appuyant sur la capacité de planification des tâches de l'agent, il est possible de procéder en une seule étape (par exemple, en introduisant un logiciel d'analyse de données, un logiciel de gestion des données ou un logiciel de gestion des données). MCP ), cette question n'est pas abordée en profondeur.

Trois graphiques ont été générés :

1. aperçu de l'entreprise

2. comparaison financière

3. l'avantage concurrentiel

ultime

Chacun de ces IDE d'IA peut appeler des "outils", typiquement le Cline Le MCP est référencé dans la commande. En plus des invites existantes, si vous souhaitez analyser les données en profondeur avant d'afficher les graphiques, vous pouvez demander au curseur de déployer un environnement python, puis de créer un script d'analyse pour l'exemple de données que vous avez donné, et ensuite donner une déclaration à la fin du modèle de commande qui dit : Lors de l'analyse des données, essayez d'exécuter le script XXX.py. Les possibilités sont infinies !