Generate all kinds of useful infographics with Cursor/Windsur for free

Once upon a time sharing a lot of funExamples of card chart prompt wordsThe reason is very simple: the real intention of the user does not match with the sample style of the template. The reason is very simple: these card map prompt word template sample style code is generally fixed, the user's real intent and sample style does not match.

Someone has done a more general adaptation of the cue word:Card Diagram Cue Words: Graphically Display Any Conceptual Schematic with SVG , but the drawbacks are obvious:

In practice the generated illustrations may deviate significantly from the user's intent, i.e., this cue wordGeneralizability remains weak.
only if Claude in order to generate relatively complete SVG code.
Instability when introducing large amounts of context and generating infographics in multiple rounds of dialog.

As it happens:Previously introduced by Chief AI Sharing Circle:It's not the cue words that you have to learn to analyze business data using big models, it's these... , many of my friends don't understand what to do with business model names without learning the cue words.

The answer is:The cue words themselves don't allow you to generate good and useful charts using the big model; it's what kind of charts you're generating and describing them with what you know that counts!

The question is...People don't really understand how to describe in order to generate the right infographic for my simple idea, text document or data document.

Below I'm going to construct a simple set of methods to tryGenerating infographics to fit everyoneRequirement. Sorry, it's possible that the generated infographic doesn't Napkin A nice class of tools, but that's inconsequential compared to the quest for utility. The following formally into the operation of the link...

mounting

Please install Cursor or Windsur, Cursor is recommended here because it can be used with a fewspecial toolspossiblefree of chargeThe

Import Instruction Templates

This template is generated from a large model by importing a large number of flowchart examples, and the effective part of the instruction consists of three places: requirements analysis, reference library, and output template. Keep the full template for more inspiration.

# Cue word guide for generating professional infographics using big models
## I. Needs Analysis and Chart Selection
### 1. Requirements analysis template
```.
Please analyze the requirements presented by the user, guess the real intention of the user and recommend the best type of diagram:
1. content analysis:
- Core concept: [describe core content].
- Data Characteristics: [Value/Classification/Timing/Hierarchy/Relationship/Distribution/Probability].
- Display focus: [Trend/comparison/distribution/composition/association/transformation/segmentation/projection].
- Analysis dimensions: [single dimension / two-dimensional / multi-dimensional / time-series / spatial]
- Model type: [descriptive/predictive/decision making/analytical]
2. audience analysis:
- Target Users: [Decision Makers/Analysts/Customers/Others]
- Degree of specialization: [professional/semi-professional/general]
- Scenarios of use: [Reporting/Demonstration/Analysis/Teaching]
- Presentation: [Static Display/Simple Interaction]
3. Technology Selection:
- Chart type:
* Basic Charts: [Line / Bar / Pie Chart / Scatter Chart]
* Composite charts: [Funnel chart / Radar chart / Tree diagrams]
* Analytical Charts: [Matrix Chart/Heat Map/Box Line Chart]
* Structural charts: [Flowchart/Mind map/Organization chart]
* Statistical charts: [histograms/probability plots/regression charts]
- Chart Library Options:
* Simple flowcharts → Mermaid.js
* Basic statistical charts → Chart.js
* Business Charts → ECharts Basic
* Professional Analytics → Plotly
- Presentation styles:
* Single chart presentation: highlighting a single focus
* Multi-chart combination: show multi-dimensional relationship
* Static display: fixed data display
4. Chart recommendations:
- Primary Chart: [Recommended primary chart type].
- Auxiliary Charts: [Additional Chart Types].
- Layout: [Chart Layout Suggestions].
- Color scheme: [Color scheme suggestion].
``
### 2. Chart Type Recommendation Matrix
##### a) Business Analysis Model Chart Mapping
```
1. User Behavior Analysis
- AARRR Model → Funnel Chart (multi-level gradient colors to highlight the conversion process)
* Acquisition - blue top level
* Activation - green second layer
* Retention - third layer in yellow
* Revenue - fourth layer in orange
* Referral - red bottom layer
- RFM Model → Matrix Heat Map
* Horizontal Axis: Frequency of Purchase (F)
* Vertical Axis: Last Purchase Time (R)
* Color shades: purchase amount (M)
* Customer segmentation: different color regions
- Cluster Analysis → Scatterplot + Color Grouping
2. Strategic Analysis
- PEST Analysis → Quadrant Pie Chart
* Political - gray quadrant
* Economic - orange quadrant
* Social - blue quadrant
* Technological - yellow quadrant
- 5W2H Analysis → Radiographic Thinking Maps
* Central theme + 7 dimensional nodes
* Use different colors to differentiate the dimensions
* What/Why/Where/When/Who/How/HowMuch
3. Decision Analysis
- Decision Tree Model → Hierarchical Tree Diagram
* Nodes represent decision points
* Branches represent options
* Leaf nodes represent results
- Time series analysis → line graphs + trend lines
* Main curve shows actual data
* Dashed lines show forecast trends
* Volatility intervals show confidence levels
4. Effectiveness analysis
- Pareto charts → Combined bar charts
* Bar graphs show individual values
* Line graphs show cumulative percentages
- Conversion funnel → S-shaped graph
* X-axis shows time/phase
* Y-axis shows conversion rate
* Curve shape reflects conversion characteristics
``
##### b) Data Characterization and Chart Mapping
```
1. Time series data
- Trend display → line/area chart
- Cycle analysis → ring/spiral chart
- Cumulative change → Stacked Area Chart
2. Categorized Data
- Distribution Comparison → Bar/Beam Chart
- Compositional analysis → Pie Chart/Ring Chart
- Hierarchical relationships → Tree/Rising Sun Chart
3. Relational data
- Correlation → Scatterplot/Bubble Chart
- Network Relationships → Relationship Diagram / Sankey Diagram
- Hierarchical structure → Tree diagram/Organization chart
4. geographic data
- Regional distribution → map/heat map
- Spatial relationships → Path map/Flow map
5. Multidimensional data
- Attribute comparison → Radar map/parallel coordinate map
- Matrix analysis → heat maps/matrix diagrams
```
### 3. chart combination mode
```
1. Hierarchy Mode
- Main Chart + Subcharts
- Overview + Detail
- Summary + Decomposition
2. Multi-dimensional model
- Time + Space
- Structure + Trends
- Distribution + Relationships
3. Comparative analysis model
- Expected + Actual
- Year-on-Year + YoY
- Percentage + Ranking
4. Causal Analysis Model
- Cause + Effect
- Inputs + Outputs
- Costs + Revenues
``
## II. Chart Generation Specifications
### 1. Design Principles
``javascript
// 1. visualPrinciples
const visualPrinciples = {
hierarchy: {
primary: 'core information highlighting',
secondary: 'Supporting information hierarchy',
auxiliary: 'auxiliary information weakened'
}, layout: { primary: 'core information highlighted', secondary: 'supporting information hierarchy', auxiliary: 'auxiliary information weakened'
layout: {
balance: 'Visual balance of the page', whitespace: 'White space control', whitespace: 'White space control', whitespace: 'White space control'
whitespace: 'whitespace control'
}, readability: { readability: { whitespace: 'white space control' }
readability: {
contrast: 'Moderate contrast', spacing: 'Reasonable spacing', {
spacing: 'reasonable spacing', alignment: 'alignment specification'
alignment: 'alignment specification'
}
}
// 2. displayPrinciples
const displayPrinciples = {
clarity: {
title: 'Title is clear', label: 'Label is readable', }
label: 'labels are readable',
legend: 'legend clear'
},
simplicity: {
data: 'data-refined',
style: 'style restraint', color: 'color coordinated'
color: 'Color coordinated'
}
}
// 3. Adaptive Principles
const adaptivePrinciples = {
responsive: {
layout: 'Basic layout adaptation',
content: 'Content Adaptation'
}, performance: { 'basic layout adaption', content: 'content adaption'
performance: {
loading: 'Load optimization', rendering: 'Render optimization'
rendering: 'Rendering optimization'
}
}
```
### 2. Basic Configuration Framework
```javascript
const baseConfig = {
// 1. Layout configuration
layout: {
container: {
width: '100%', maxWidth: '1200px', {
padding: '20px', margin: '0 auto'
margin: '0 auto'
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px'
}
},
// 2. Theme Configuration
theme: {
colors: {
primary: '#primary-color', secondary: '#secondary-color', // 2.
primary: '#primary-color', secondary: '#secondary-color', background: '#background-color', // // 2.
text: '#text-color'
},
typography: {
fontSize: {
sm: '14px', md: '16px', {
md: '16px', lg: '20px'
lg: '20px'
},
fontWeight: {
regular: 400,
bold: 700
}
}
}
}
```
### 3. chart generation strategy
```javascript
// 1. Analyze Data Strategy
function analyzeDataStrategy(data) {
return {
// Data characterization
characteristics: {
type: 'data type', scale: 'data size', {
scale: 'data size', dimensions: 'number of dimensions'
dimensions: 'number of dimensions'
},
// Show requirements analysis
requirements: {
purpose: 'Purpose of the display', // audience: 'Target audience' }, // display requirements analysis
audience: 'target audience'
}
}
}
// 2. Chart selection strategy
function selectChartStrategy(analysis) {
return {
// Chart type selection
chartType: {
primary: 'Primary chart type', secondary: 'Secondary chart type', { // 'Primary chart type', 'Secondary chart type'.
secondary: 'secondary chart type'
},
// Layout scheme
layout: {
structure: 'Overall structure', arrangement: 'Element arrangement', // layout scheme: {
arrangement: 'arrangement of elements'
}
}
}
// 3. Style mapping strategy
function styleMapStrategy(chartConfig) {
return {
// Visual encoding
visual: {
color: 'color scheme',
shape: 'shape system'
},
// Responsive rules
responsive: {
layout: 'base layout'
}
}
}
```
### 4. Adaptation scheme
```javascript
const adaptiveStrategy = {
// 1. Scenario adaptation
scenario: {
presentation: {
style: 'presentation style'
}, analysis: { presentation: { style: 'presentation style' }, }
analysis: {
depth: 'Depth of analysis'
}
},
// 2. device adaptation
device: {
desktop: {
layout: 'desktop layout'
}, mobile: { layout: 'desktop layout'
mobile: {
layout: 'mobile layout'
}
}
}
```
## iii. output specification
### 1. HTML base template
```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. Variable description
``javascript
// 1. Base variables
const templateVars = {
// 1.1 Chart library import
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 Container structure
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 variables
STYLE_VARS: {
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
fonts: 'system-ui, -apple-system, "Microsoft YaHei", sans-serif',
sizes: {
mobile: '100%', tablet: '90%', '90%'
tablet: '90%', desktop: '1200px', -apple-system.
desktop: '1200px'
}
}
}.
// 2. Chart initialization script templates
const chartInitTemplates = {
// 2.1 Basic initialization
basic: `
document.addEventListener('DOMContentLoaded', function() {
${CHART_INIT_CODE}
});
`, `
// 2.2 With Error Handling
withErrorHandling: `
document.addEventListener('DOMContentLoaded', function() {
try {
${CHART_INIT_CODE}
} catch (error) {
console.error('Chart rendering failure:', error);
${ERROR_HANDLING_CODE}
}
});
`,'
// 2.3 with responsive support
withResponsive: `
document.addEventListener('DOMContentLoaded', function() {
try {
${CHART_INIT_CODE}
window.addEventListener('resize', function() {
${RESIZE_HANDLING_CODE}
}); }
} catch (error) {
console.error('Chart rendering failure:', error);
${ERROR_HANDLING_CODE}
}
});
'
};
// 3. style templates
const styleTemplates = {
// 3.1 Basic styles
basic: `
body { margin: 0; padding: 15px; }
#${CHART_ID} { width: 100%; height: ${HEIGHT}px; }
`,.
// 3.2 Responsive Styling
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. Instructions for use
``javascript
// 1. Basic usage
const basicUsage = {
// 1.1 Selecting a chart library
selectLib(chartType) {
return templateVars.CHART_LIB_IMPORTS[chartType];
},
// 1.2 Selecting the container
selectContainer(type, params) {
return templateVars.CHART_CONTAINER[type]
.replace('${CHART_ID}', params.chartId)
.replace('${TITLE}', params.title)
.replace('${DESCRIPTION}', params.description);
},
// 1.3 Selecting the initialization template
selectInitTemplate(type) {
return chartInitTemplates[type];
}
}
// 2. Extended Usage
const extendedUsage = {
// 2.1 Custom Styles
customStyle: `
${styleTemplates.basic}
${styleTemplates.responsive}
${CUSTOM_STYLES}
`, `, `.
// 2.2 Custom Interactions
customInteraction: `
${INTERACTION_CODE}
`
}
```
# Constraints
- Please strictly follow the above specifications and templates for code generation to ensure that the output HTML file result is as expected.

Using Cursor as an example, create a help.cursorrules file, then copy and paste the above prompt words and save.