神威 第三世代 スライド生成(プロンプト版)
神威の簡易的なガイドページを作りました 第三世代版です
現在公式さんで簡単操作ガイドを作成されているとのことで繋ぎガイドです
1. 第三世代にアクセスしてログイン
こちら↓
2. 一旦、トップページのテキスト欄にtestと入れてページ遷移
「test」と入力してテンプレートのyamlのみ生成
現在初期設定されているAPIは(多分)日本語の言語理解力の良さとパフォーマンスのバランスからClaude HAIKUが設定されているのですが、生成するコンテンツやタイミングによってAPIレート制限で全出力がされないことがあります。Anthropicに制限解除の依頼中らしいので一旦はgeminiなどを選択しなおした方がスムーズに行きます
3. gemini or gpt4oを選択
好きなLLMを選択して要望入力後に送信ボタンをクリック
私はなんとなくgemini-2.0-flash-expを選択しています
4. 要望するとstructure.yamlが生成される
簡易な要望でもがっつり要望でもokですが今回はちゃんと要望します
この時点ではあくまでディレクトリ構造だけが生成されて中身は空っぽです
structure.yamlのみ中身に記載があります
タイミングによって生成量が少ないことがあるのでその場合はOpenAI関連を利用したり、「もう一回」とチャットするか、リロードしてやり直せます、言うことを聞かない時はtopページからやり直す
・出力が全然なく途中で終わっている
・スライドの依頼なのにセクション区切りにmarp記法の ---で区切られていない(ただし背景黒で—が目立たないこともある)
・ディレクトリにmarpが当たってしまいファイル名として解釈されていないなど
5. 試しに屋久杉を説明するスライドで依頼
スライド生成の場合、ある程度プロンプトを固めた方が成功しやすいです
marpフォーマットで、画像を右側に入れたり、背景の全画面に入れたりする場合、下記のようなプロンプトになります
ゴール、仕様、スタイルを分けて依頼するとやりやすいはず
・section.default、section.darkのような指定で簡易cssを当てられる
・---のハイフン三つでセクションが区切られるので明記する
・ディレクトリ構造はコントロール可能
●ゴール
・日本の屋久杉の良さを詳細に説明するスライド生成
●仕様
・スライドをmarpで作成
・1枚のファイルを5つのセクションで区切る
・セクションは[---]で区切る
・スライドのデザインはモダンで洗練されたUIに フォントはNotoSansJp
・スライドのスタイルも最初に指定
・画像も5枚生成でセクションごとに埋め込む
・画像テイストは日本の屋久杉の写真、屋久杉を使ったテーブルなどもあり、img.HEIC photo realistic
・ディレクトリ構造は ./index.marp ./images/*.jpg
・structure.yaml以外のjsやenvなどは不要
●スタイル
レイアウトはセクションごとに以下スタイルで交互に生成、余計なmeta情報は不要
section.default { background-color: #fff; }
section.dark { background-color: #000; color: #fff; }
section.dark h1,section.dark h2,section.dark h3{color: #fff;}
 背景色は黒、文字色は白
<!-- class: dark -->
 背景色は白、文字は認識できる色
<!-- class: default -->
詳細
---
<!-- class: dark -->
# 屋久杉の利用
## 木材としての価値
- 屋久杉の木材
- 屋久杉の利用例
- 屋久杉の価値
---
---
<!-- class: default -->
# 屋久杉の保護
## 環境保護の重要性
- 屋久杉の保護活動
- 環境保護の重要性
- 未来への継承
---
6. 実装を押して生成する
画像はプログレスバーが出なくても大丈夫
7. 保存を押してダウンロード
index.marpをクリックすると生成されたmarpが確認できます。画像がmarpに反映されていなくても気にしないでOKなので保存を押してデータをダウンロードします
8. Marp for VS Codeをインストール
事前にマークダウンプレビュー用のCursorの拡張機能「Marp for VS Code」をインストールします。VS Codeという名前ですがCursorでも利用できます。
9. Cursorで調整
srcフォルダの中身をCursorで確認します。
画像のダウンロードでerrorが出ることがあるのでその場合は神威本体から直接ドラッグして持ってきます。
index.marpの拡張子を.mdにすることでプレビューできるようになります。
10. プレビューの確認
画像全面レイアウトと2カラムレイアウトで生成されています
サッカーに変えて依頼したものはこちら
supabaseのRLSに変えて依頼したものはこちら
プロンプト
●ゴール
・supabaseのRLSのメリットを詳細に説明するスライド生成
●仕様
・スライドをmarpで作成
・1枚のファイルを5つのセクションで区切る
・セクションは[---]で区切る
・スライドのデザインはモダンで洗練されたUIに フォントはNotoSansJp
・スライドのスタイルも最初に指定
・画像も5枚生成でセクションごとに埋め込む
・画像テイストはインターネットやデータやグラフなどダークを基調に光る電子やグラフなど未来的なイメージで内容を変えつつ一貫性は保って
・ディレクトリ構造は ./index.marp ./images/*.jpg
・structure.yaml以外のjsやenvなどは不要
●スタイル
レイアウトはセクションごとに以下スタイルで交互に生成、余計なmeta情報は不要
section.default { background-color: #fff; }
section.dark { background-color: #000; color: #fff; }
section.dark h1,section.dark h2,section.dark h3{color: #fff;}
 背景色は黒、文字色は白
<!-- class: dark -->
 背景色は白、文字は認識できる色
<!-- class: default -->
Discussion