커서/윈드서어로 모든 종류의 유용한 인포그래픽을 무료로 생성하세요!

옛날 옛적에 많은 즐거움을 공유하던 시절카드 차트 프롬프트 단어의 예사용자의 실제 의도와 템플릿의 샘플 스타일이 일치하지 않기 때문입니다. 이 카드 맵 프롬프트 단어 템플릿 샘플 스타일 코드는 일반적으로 고정되어 있으며 사용자의 실제 의도와 샘플 스타일이 일치하지 않습니다.

누군가 큐 단어를 좀 더 일반적으로 각색한 적이 있습니다:카드 다이어그램 큐 워드: SVG로 모든 개념도를 그래픽으로 표시합니다. 하지만 단점도 분명합니다:

• 실제 사용 시 생성되는 일러스트는 사용자의 의도와 크게 벗어날 수 있습니다.일반화 가능성은 여전히 낮습니다.
• 다음과 같은 경우에만 Claude 를 사용하여 비교적 완전한 SVG 코드를 생성할 수 있습니다.
• 많은 컨텍스트를 소개하고 여러 차례의 대화에서 인포그래픽을 생성할 때 불안정합니다.

그러니까요:이전에는 최고 AI 공유 서클에서 소개했습니다:빅 모델을 사용한 비즈니스 데이터 분석을 위해 배워야 할 단서 단어는 다음과 같습니다. 많은 친구들이 비즈니스 모델 이름에 대한 단서를 배우지 않고는 어떻게 해야 하는지 이해하지 못합니다.

정답은 바로빅 모델을 사용하여 훌륭하고 유용한 다이어그램을 생성하는 데 있어 중요한 것은 단서 단어 그 자체가 아니라, 어떤 종류의 다이어그램을 생성하고 알고 있는 내용을 사용하여 설명할 것인가입니다!

문제는...사람들은 간단한 아이디어, 텍스트 문서 또는 데이터 문서에 적합한 인포그래픽을 생성하기 위해 어떻게 설명해야 하는지 잘 모릅니다.

아래에서 간단한 메서드 세트를 구성하여 시도해 보겠습니다.모두에게 적합한 인포그래픽 생성요구 사항. 죄송합니다. 생성된 인포그래픽이 다음과 같이 표시되지 않을 수 있습니다. 냅킨 그 자체로 수업에서 아름다운 도구이지만 실용성을 추구하는 것에 비하면 중요하지 않습니다. 링크의 작동에 대해 공식적으로 다음과 같이 설명합니다...

마운팅

설치하세요 커서 또는 Windsur와 함께 사용할 수 있으므로 여기서는 커서를 권장합니다.특별한 수단가능무료 사용.

인스트럭션 템플릿 가져오기

이 템플릿은 많은 플로차트 예제를 가져와서 큰 모델에서 생성된 것으로, 지침의 효과적인 부분은 요구사항 분석, 참조 라이브러리, 출력 템플릿의 세 곳으로 구성되어 있습니다. 더 많은 영감을 얻으려면 전체 템플릿을 보관하세요.

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

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

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

커서를 예로 들어, 커서를 사용하여 help.cursorrules 파일을 열고 위의 안내 문구를 복사하여 붙여넣고 저장합니다.

활용

프롬프트 설명 파일을 올바르게 참조하고 상담원 모드 켜기

1. 맥락에 구애받지 않는 인포그래픽 생성

활용 빅 모델을 사용한 비즈니스 데이터 분석 인포그래픽의 합리적인 표현은 R, F, M 세 가지의 관계를 반영하기 위해 보다 입체적이어야 하기 때문에 RFM 모델은 매우 대표적인 방법입니다. 목표가 없는 첫 번째 시도:

제가 요청한 것은 '예시'를 생성하는 것이었기 때문에 핵심 개념을 설명하는 데 더 중점을 두었고, 에이전트의 사고 단계에서 문제가 되었던 분석 다이어그램을 구성하지 않았습니다. 에이전트의 사고 과정을 중단하고 다른 생성 방법을 요청할 수도 있었지만 그렇게 하지 않았습니다.

이 시점까지 솔루션의 장점이 입증되었고, 다른 도구와 모델로는 동일한 프로세스를 수행하기 어려우며, 인포그래픽 생성의 최종 지점은 풍부한 라이브러리를 참조하는 것이어야 합니다.

다음으로 3D RFM 일러스트를 업로드하고 제 이미지에 맞게 생성해 달라고 요청했습니다:

참고로 이번 스타일 중복 문제는 수정을 위해 다시 요청할 수 있으며, 여기서 더 이상의 최적화는 수행되지 않습니다.

작업 변경: 여기에 작업 프로세스를 표시하지 말고 효과만 보세요. 지침은 기술 개발을 위해 엔터프라이즈 WeChat 인증 로그인의 순서도를 생성하는 것입니다.

2. 상황에 맞는 인포그래픽 생성

비교 가능 냅킨 기사를 가져와서 인포그래픽을 생성할 수도 있지만, 이 솔루션을 사용하여 기사의 다양한 콘텐츠를 기반으로 여러 개의 인포그래픽을 생성할 수 있습니다(간단한 데모: 데모 전에 이전 대화 기록 및 생성된 이미지 지우기).

긴 글을 업로드하고 text.md로 저장하는 것으로 시작하세요:

입력 지침: 기사 text.md의 초점을 분석하고, 기사의 핵심 이슈 2개를 골라 차트를 생성합니다. (대형 모델의 경우 여전히 무료 플레이가 필요합니다.)

이번에는 흐름도가 생성되었는데 단점이 있었고, 기사가 너무 길고, 내용 자체가 문제의 논리를 설명하고, 인간 만이 추측하여 완전한 흐름도를 다듬을 수 있으며, 큰 모델이 자연스럽게 매우 완벽한 차트를 생성 할 수 없다는 것을 이해할 수 있습니다.

마지막 예제에서는 데이터 집합을 입력하고 일부 재무 콘텐츠를 혼합하여 데이터 분석이 얼마나 잘 표시되는지 살펴봅니다:

추신: 우리의 목표는 데이터 분석이 아니라 데이터 분석 결과를 시각적으로 보여주는 것입니다. 사실 대량의 데이터 분석부터 정보 프레젠테이션까지 에이전트의 작업 계획 기능(예: 데이터 분석이 가능한 에이전트 도입)에 의존하면 실제로 한 단계로 완료할 수 있습니다. MCP 서비스)에 대해서는 이 문제에 대해 자세히 설명하지 않습니다.

세 개의 차트가 생성되었습니다:

1. 회사 개요

2. 재무 비교

3. 경쟁 우위

궁극

이러한 각 AI IDE는 일반적으로 "도구"라고 부르는 Cline MCP는 명령에서 참조됩니다. 기존 프롬프트 외에도 차트를 표시하기 전에 심층적인 데이터를 분석하려면 커서에 파이썬 환경을 배포하도록 요청한 다음 제공한 데이터 예제에 대한 분석 스크립트를 만든 다음 명령 템플릿 끝에 '데이터를 분석할 때 XXX.py 스크립트를 실행해 보세요'라는 문구를 추가할 수 있습니다. 가능성은 무궁무진합니다!