Cursor Practice Project-12: AI-Generated Illustrations Look Ugly? You Made a Mistake from Step One! Creating SVG Knowledge Cards with Cursor

Project Overview

Cursor Practice Project-12: AI-Generated Illustrations Look Ugly? You Made a Mistake from Step One! Creating SVG Knowledge Cards with Cursor

Time spent: Approximately 1.5 hours
Cursor usage: Around 2 times

Often, when we use AI tools to generate images directly, the results are unsatisfactory. This project explores the use of Cursor to create knowledge cards by specifying prompts (rule files) that transform input content into professional, aesthetically pleasing, and stylistically unified SVG knowledge cards.

More importantly—this method isn't just for creating images. Almost any content output (articles, proposals, PPTs, marketing pages) can be quickly produced using the same approach.

Today, I won’t just share how these images are made but also teach you the underlying methodology, so you can apply similar techniques to create visuals of any style in the future.

Results Showcase

The final output is an HTML file containing four SVG knowledge cards, showcasing the core steps of the AI illustration methodology. The cards feature a tech-savvy, professional visual style, including titles, key points, visual elements, and impactful quotes.

Showcase 1 Showcase 2

Prerequisites

  • Cursor
    • Version: 1.2.4
    • Cursor Rules: Cursor Rules
    • Agent: claude-4-sonnet
  • Gemini CLI Integration

Issues Encountered

  1. AI-generated SVG icons may have positioning issues, such as overlapping with text or misalignment.
    • Manual adjustments to the SVG code are still needed to fine-tune positioning.
    • Consider developing a small tool to adjust block-level elements in SVGs (only for position and size).

Key Takeaways

  1. Examples Are the Best Input: Instead of vaguely describing "beautiful," provide AI with clear, high-quality examples for "reverse analysis." This is key to achieving consistent, high-quality output.
  2. Content First, Visuals Second: Good visual presentation relies on clear content structure. Use AI to break down the logic first, then visualize—the result will naturally look better.
  3. Team Up AIs for Better Results: Leverage the strengths of different AIs in a pipeline. For example, use Claude for text analysis and structuring, and Gemini/DALL·E for visual generation to improve efficiency and quality.
  4. Prompt Templates Are Compound Assets: Structuring and templating successful prompts allows for infinite reuse, significantly boosting content creation efficiency and consistency.
  5. Cursor Project Application: Use Cursor projects to solidify rules, set inputs and outputs, and avoid searching for prompts repeatedly. It also simplifies image fine-tuning.

Detailed Project Steps

Step 1: Find High-Quality Examples for AI to "Reverse Engineer"

  1. Identify Benchmark Examples: Start by finding a knowledge card image with a visual style you admire.

  2. Query Cursor (Claude): Send the image to Cursor and use a prompt like the one below to have it analyze and generate a reusable prompt template.

    You are a professional UI designer. I want AI to generate knowledge cards similar to this one. I will provide content, and AI will break it down into cards of this style. Help me reverse-engineer this style and generate a universal prompt in Markdown format.

Reverse Engineering Example
  1. Obtain the Prompt Template: AI will return a detailed Markdown-formatted prompt template, including design specifications, content structure, visual elements, and output format. This becomes the foundation for all subsequent card generation.
# AI Knowledge Card Generation Prompt

Follow these requirements to generate knowledge card designs for my content:

## Design Specifications
- **Overall Style**: Tech-savvy, professional, modern minimalist  
- **Color Scheme**: Dark background (#1a1a1a) + teal highlights (#00d4aa) + white text  
- **Card Dimensions**: 16:9 landscape ratio, suitable for PPT presentations  

## Single Card Requirements
### Title Design
- Main Title: Chinese, bold font, top-left aligned  
- Subtitle: Uppercase English, smaller font, below main title  
- Title Colors: White or teal  

### Content Structure
- Key Points: 1-3 bullet points  
- Data Support: If data is included, present it with concise visualizations (line charts, bar graphs, trend charts, etc.)  
- Additional Notes: Brief explanatory text or impactful summary quotes  

### Visual Elements
- Background Decorations: Dot patterns, geometric lines, or grid textures  
- Data Visualizations: Minimalist-style charts  
- Highlight Elements: Use teal to emphasize key information  
- Whitespace: Maintain adequate spacing for clear information hierarchy  

### Text Standards
- Primary Text: White, easy to read  
- Emphasized Text: Teal highlights  
- Font Hierarchy: Title > Key Points > Body > Annotations  
- Mixed Chinese-English Text: Maintain consistent visual rhythm  

## Content Processing Workflow
1. **Content Analysis**: Analyze the provided content to identify core themes.  
2. **Confirmation Query**: Ask the user how many cards they want (suggested range: 3-8).  
3. **Theme Extraction**: Break down the content into the specified number of core themes.  
4. **Key Point Summarization**: Extract 2-3 key points per theme.  
5. **Visual Design**: Design corresponding visual elements for each theme.  

## Output Format
For each card, provide:  
- **Card Title** (Chinese and English)  
- **Key Points** (2-3 bullet points)  
- **Visual Element Suggestions** (chart types, decorative elements, etc.)  
- **Highlighted Text** (keywords to be emphasized in teal)  
- **Bottom Quote** (if applicable)  

## Usage Steps
1. User provides content for conversion.  
2. AI analyzes the content and asks: "Based on your content, I recommend generating X cards. How many would you like?"  
3. After user confirmation, AI generates the card designs according to the specifications.
  1. Set Cursor Project Rules: Save this template as a project rule in .cursor/rules/project-rules.mdc.
Setting Project Rules

Step 2: Use the Template to Quickly Output Structured Content

  1. Open a New Chat Window: Avoid context interference by starting a fresh conversation.
  2. Provide Content: Attach the original article or content you want to visualize and specify the image requirements.
According to the project rules, summarize @XXXXX.md (specific article, link, or image). Then create knowledge cards. Generate 4 corresponding SVG images and compile them into an HTML file. Output both English and Chinese versions. Save them in the output directory.
  1. AI Structures the Content: AI will automatically break down and refine your long-form content into a structured outline for multiple cards, each containing bilingual titles, key points, visual suggestions, and highlighted keywords.
Setting Project Rules

Step 3: Let AI Automatically Generate Visual Outputs (SVG)

  1. AI Generates Visuals: Based on the structured content from Step 2, Cursor will automatically generate visual code.
Setting Project Rules
  1. Generate and Fine-Tune: AI will produce SVG code and the final HTML file. You can preview and modify the code directly in Cursor for detailed adjustments until satisfied.
Setting Project Rules
  1. Final Output: The result is an HTML file and four corresponding SVG images, perfectly transforming the article content into high-quality visual knowledge cards.

Bonus Experiment: Use Gemini CLI to Generate Images Directly from Rules

  • Gemini CLI is a command-line tool for Gemini that can also read rules and content to generate images.
  • The results are slightly different—simpler but more cost-effective and doesn’t consume usage credits.
Setting Project Rules Setting Project Rules