Cursor実践プロジェクト-12-AI生成の挿絵が醜い？最初のステップから間違っているからです！CursorでSVG知識カードを生成

プロジェクト説明

cursorプロジェクト実践-12-AI生成の挿絵が醜い？最初のステップから間違っているからです！CursorでSVG知識カードを生成

所要時間：約1.5時間

Cursor使用回数：2回程度

AIツールで直接画像を生成すると、期待通りの結果が得られないことがよくあります。このプロジェクトでは、Cursorを使って知識カードを生成する方法を探求し、プロンプト（ルールファイル）を指定して、入力内容を要約・変換し、プロフェッショナルで美しくスタイル統一されたSVG知識カードを作成します。

さらに重要なのは——この方法は画像作成だけでなく、ほぼすべてのコンテンツ出力（記事、企画、PPT、マーケティングページ）に同じ方法で迅速に完成させられることです。

そこで今回はこの画像の作り方だけでなく、根本的な方法もお教えします。今後すべてのスタイルの画像に同様の方法を適用できます。

成果展示

最終的にHTMLファイルが生成され、4つのSVG知識カードが埋め込まれています。AI挿絵メソッドの核心的なステップを展示しています。カードはテクノロジー感とプロフェッショナルなビジュアルスタイルを持ち、タイトル、核心ポイント、ビジュアル要素、キーフレーズを含んでいます。

事前準備

Cursor
- バージョン：1.2.4
- cursor rules : Cursor Rules
- agent: claude-4-sonnet
Gemini CLI 統合

問題記録

AIが生成したsvgアイコンの位置に問題があり、文字と重なったりずれたりしやすい
- svgコードを手動で修正し、位置を調整する必要がある
- svg内のブロック要素の位置とサイズを調整する小型ツールの作成を検討可能

使用上の心得

実例が最良の入力: 「美しい」という曖昧な表現よりも、AIに明確な優れた実例を与えて「逆解析」させることで、高品質で安定した出力を得られます。
コンテンツ優先、視覚はその後: 良い視覚的表現は明確なコンテンツ構造に依存します。まずAIでコンテンツロジックを分解し、その後視覚化することで、自然と美しい図が作成できます。
AIは「チームで戦う」: 異なるAIの強みを活用して流れ作業を行います。例えば、Claudeでテキスト分析と構造化を行い、Gemini/Dalleで視覚生成を行うと、効率と効果が向上します。
プロンプトテンプレートは複利資産: 一度成功したプロンプトを構造化・テンプレート化することで、将来何度でも再利用でき、コンテンツ作成の効率と一貫性が大幅に向上します。
cursorプロジェクト応用: cursorプロジェクトを使用してルールを固定化し、入力と出力を設定することで、毎回プロンプトを探す必要がなくなります。同時に画像の微調整も容易になります。

プロジェクト詳細手順

ステップ1：優れた実例を見つけ、AIに「逆解析」させる

対照実例を見つける: まず、視覚スタイルが非常に優れている知識カード画像を見つけます。
Cursor(Claude)に質問: この画像をCursorに送信し、以下のようなプロンプトを使用して、再利用可能なプロンプトテンプレートを分析・生成させます。

あなたはプロのUIデザイナーです。私はAIにこのような知識カードを生成してほしいです。私が内容を送信すると、AIがこのスタイルのカードに分解生成します。このスタイルを逆解析し、Markdown形式で汎用的なプロンプトを生成してください。

プロンプトテンプレート取得: AIは詳細なMarkdown形式のプロンプトテンプレートを返します。デザイン規範、コンテンツ構造、ビジュアル要素、出力形式などが含まれます。これが後続のすべてのカード生成の基礎となります。

# AI知識カード生成プロンプト

以下の要件に従って、提供された内容から知識カードデザインを生成してください：

## デザイン規範

-**全体スタイル**：テクノロジー感、プロフェッショナル、モダンでミニマル
-**配色方案**：ダーク背景（#1a1a1a）+ シアン緑ハイライト（#00d4aa）+ 白文字
-**カードサイズ**：16:9横長比率、PPT展示に適した

## 単一カード要件
### タイトルデザイン

- メインタイトル：中国語、太字、左上配置
- サブタイトル：英語大文字、小さいフォント、メインタイトル下
- タイトル色：白またはシアン緑

### コンテンツ構造
- 核心ポイント：1-3つのキー情報、箇条書きで表示
- データサポート：データがある場合、簡潔な可視化チャート（折れ線、棒、トレンド図など）で表示
- 補足説明：短い解説文またはキーフレーズ要約

### ビジュアル要素
- 背景装飾：ドットパターン、幾何学線またはグリッドテクスチャ
- データチャート：ミニマルスタイルの可視化要素
- ハイライト要素：シアン緑で重点情報を強調
- 余白処理：適切な余白を保ち、情報階層を明確に

### 文字規範
- 主要文字：白、読みやすく
- 強調文字：シアン緑でハイライト
- フォント階層：タイトル>重点>本文>注釈
- 中英混在：統一された視覚的リズムを保持

## コンテンツ処理フロー
1.**コンテンツ分析**：まず提供内容を分析し、核心テーマ数を識別
2.**確認質問**：ユーザーに生成希望枚数を確認（推奨範囲：3-8枚）
3.**テーマ抽出**：内容を対応数の核心テーマに分解
4.**要点要約**：各テーマから2-3つのキーポイントを抽出
5.**ビジュアルデザイン**：各テーマに対応するビジュアル要素を設計

## 出力形式各カードに対して：
-**カードタイトル**（中英）
-**核心要点**（2-3箇条書き）
-**ビジュアル要素提案**（チャートタイプ、装飾要素など）
-**重点文字**（シアン緑ハイライトが必要なキーワード）
-**下部キーフレーズ**（該当する場合）

## 使用手順
1. ユーザーが変換したいコンテンツを提供
2. AIが内容を分析し「あなたの内容に基づき、X枚のカード生成を提案します。何枚生成しますか？」と確認
3. ユーザーが枚数を確認後、AIが規範に従って対応カードデザインを生成

cursorプロジェクトルール設定: このテンプレートをプロジェクトルール .cursor/rules/project-rules.mdcに設定します。

第二步：テンプレートを使用して迅速に構造化されたコンテンツを出力

新しいダイアログウィンドウを開く: 上下文の干渉を避けるために、新しいダイアログウィンドウを開きます。
コンテンツを提供: 視覚化したい原始文章やコンテンツを添付し、具体的な画像要件を提示します。

プロジェクトルールに従って、@XXXXX.md（具体的な文章、またはリンク、画像など）を要約してください。その後、知識カードを作成します。4枚の対応するsvg画像を生成し、1つのhtmlに統合し、英語版と中国語版の2つのバージョンを出力します。outputディレクトリに配置します。

AIがコンテンツを構造化: AIはテンプレートの要件に従って、長文コンテンツを自動的に分解、抽出し、複数のカードの構造化された大綱に整理します。各カードには、中英タイトル、キー要点、視覚提案、ハイライトキーワードなどが含まれています。

第三ステップ：AIが自動的に視覚化出力（SVG）を生成

AIが視覚化コードを自動生成: 第二ステップで生成された構造化コンテンツに基づいて、cursorが視覚化コードを自動的に生成します。

生成と微調整: AIはSVGコードを含む画像と最終的なHTMLファイルを生成します。Cursorで直接コードを預覽し、細部を微調整し、満足するまで繰り返すことができます。

最終出力: 最終的に、1つのhtmlと4枚の対応するsvg画像ファイルが得られ、記事コンテンツを高品質な視覚知識カードに変換しました。

追加の実験：GeminiCLIを使用してルールから直接画像を生成

GeminiCLIはGeminiのコマンドラインツールであり、ルールとコンテンツから直接画像を生成します。
効果は少し異なりますが、よりシンプルです。しかし、より安価で、使用回数を節約できます