Создавайте всевозможные полезные инфографики с помощью Cursor/Windsur бесплатно!

Когда-то давно, когда было очень веселоПример слов-подсказок для картотекиПричина проста: реальное намерение пользователя не совпадает с образцом стиля шаблона. Причина очень проста: эти карты подсказки слова шаблон образец стиль код, как правило, фиксированный, реальные намерения пользователя и образец стиля не совпадают.

Кто-то сделал более общую адаптацию слова "подсказка":Карточная диаграмма Cue Words: графическое представление любой концептуальной схемы с помощью SVG Но недостатки очевидны:

• Иллюстрации, созданные при реальном использовании, могут значительно отличаться от намерений пользователя, то есть это слово-подсказкаОбщая применимость остается низкой.
• только если Клод чтобы сгенерировать относительно полный код SVG.
• Нестабильность при введении большого количества контекста и создании инфографики в ходе нескольких раундов диалога.

Как это бывает:Ранее представленный Chief AI Sharing Circle:Это не те слова, которые вам нужно выучить для анализа бизнес-данных с помощью больших моделей, но эти... Многие из моих друзей не понимают, что делать с названиями бизнес-моделей, не выучив слова для подсказки.

Ответ:Сами по себе слова-подсказки не позволят вам создать хорошие и полезные диаграммы с помощью Большой модели; важно то, какие диаграммы вы хотите создать и описать их с помощью того, что вы знаете!

Вопрос в том, что...Люди не очень понимают, как описать, чтобы создать правильную инфографику для моей простой идеи, текстового документа или документа с данными.

Ниже я собираюсь построить простой набор методов, чтобы попробоватьСоздание инфографики на любой вкусТребование. Извините, возможно, что созданная инфографика не Салфетка Красивый инструмент в своем классе, но это несущественно по сравнению со стремлением к практичности. Ниже приводится формальное описание работы звена...

монтаж

Пожалуйста, установите Курсор или Windsur, здесь рекомендуется использовать Cursor, потому что его можно использовать с несколькимиСпециальные средствавозможноБесплатное использование.

Импорт шаблонов инструкций

Этот шаблон создан на основе большой модели путем импорта большого количества примеров блок-схем, а эффективная часть инструкции состоит из трех мест: анализ требований, библиотека ссылок и шаблон вывода. Сохраните полный шаблон для большего вдохновения.

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

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

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

Используя Cursor в качестве примера, создайте help.cursorrules файл, затем скопируйте и вставьте приведенные выше слова подсказки и сохраните.

пользоваться

Правильное обращение к файлу описания подсказок и включение режима агента

1. Бесконтекстная генерация инфографики

пользоваться Аналитика бизнес-данных с помощью больших моделей В методе генерации "RFM-модели" RFM-модель очень показательна, так как разумное представление инфографики должно быть более трехмерным, чтобы отразить взаимосвязь между тремя R, F, M. Первая попытка без цели:

Поскольку мой запрос был направлен на генерацию "примеров", он был больше ориентирован на демонстрацию основных понятий и не строил аналитических диаграмм, которые мы имели в виду, что также было проблемой на этапе размышлений агента. Мы могли бы прервать ход мыслей агента и попросить другой метод генерации, чего я не сделал.

К этому моменту преимущества решения уже продемонстрированы, аналогичный процесс сложно выполнить с помощью других инструментов и моделей, и конечной точкой создания инфографики должно стать обращение к богатым библиотекам.

Затем я загрузил 3D-иллюстрацию RFM и попросил сгенерировать ее в соответствии с моим изображением:

Кстати, в этот раз вопрос о наложении стилей можно снова запросить на модификацию, и дальнейшая оптимизация здесь проводиться не будет.

Изменить задачу: не показывайте здесь процесс работы, просто посмотрите на эффект, инструкция такова: сгенерировать блок-схему предприятия WeChat авторизованного входа, для технического развития.

2. Создание инфографики с учетом контекста

сопоставимо Салфетка Вы можете импортировать статьи для создания инфографики, но вы можете использовать это решение для создания нескольких инфографик на основе различного контента в статье, простая демонстрация: (очистите предыдущую запись диалога и сгенерированные изображения перед демонстрацией)

Начните с загрузки длинной статьи и сохранения ее в формате text.md:

Входные инструкции: проанализируйте фокус статьи text.md, выберите 2 основные проблемы статьи и постройте диаграмму. (все еще требуется свободная игра для больших моделей)

На этот раз была сгенерирована блок-схема, но в ней были недостатки: статья была слишком длинной, и логика описания контента была проблематичной; только человек может уточнить полную блок-схему путем угадывания, и понятно, что большая модель, естественно, не может сгенерировать очень полную схему.

В последнем примере мы вводим набор данных и добавляем к ним финансовый контент, чтобы посмотреть, насколько хорошо он представляет анализ данных:

PS: Наша цель - не анализ данных, а визуальное представление результатов анализа данных. На самом деле, от анализа большого количества данных до представления информации можно перейти за один шаг, опираясь на возможности агента по планированию задач (например, введя агента, который может анализировать данные). MCP услуги), этот вопрос подробно не рассматривается.

Были построены три диаграммы:

1. обзор компании

2. Финансовое сравнение

3. конкурентное преимущество

окончательный

Эти ИИ IDE могут вызывать "инструменты", как правило, это Клайн Ссылка на MCP содержится в команде. В дополнение к существующим подсказкам, если вы хотите провести глубокий анализ данных перед отображением графиков, вы можете попросить Cursor развернуть среду python, затем создать сценарий анализа для приведенного вами примера данных, а затем указать в конце шаблона команды следующее утверждение: "При анализе данных попробуйте выполнить сценарий XXX.py". Возможности безграничны!