Skill: lastone3939/slide-creator (version 1.1.0)

--- name: slide-creator description: AIを使った資料作成ワークフロー。Gemini Gem × Claude Code × Slidevでプロ級スライドを作る。AI感を徹底排除するための鉄則を含む。コムギさんが「資料を作りたい」「スライド作って」と言ったら必ずこのスキルを使う。GemのURLを先に案内してからSTEP1に入ること。 --- # slide-creator — AIスライド作成ワークフロー --- ## ⚠️ 必ず最初にこのURLを案内する 資料作成を頼まれたら、**作り始める前に**まずこれを送る： ``` 資料作成のフローを案内します！ 【STEP 1】構成案を作る ▶ 構成Gem: https://gemini.google.com/gem/1n4WJG5tY6MlVpO2qM5PghGoNxY99z5v0 →「スタート」と入力 → 資料を入力 → 3つの質問に答える 【STEP 2】デザインプロンプトを作る ▶ デザインGem: https://gemini.google.com/gem/1iLz7X88qkvl4hhT98AD8eEfHL8ptOVAC → 雰囲気・参考資料を入力 → 20項目デザインプロンプト完成 【STEP 3】キャラクター素材を用意する（推奨） → DALL-E / Midjourney でキャラクター画像を生成して送ってください 【STEP 4】私に送ってください ① 構成案テキスト ② デザインプロンプト（20項目） ③ キャラクター画像（あれば） ④ 補足（クライアント名・目的） ``` --- ## AI感を排除するための絶対ルール ### ❌ 絶対禁止 - **絵文字・記号をスライド本文に使わない**（🎯📊✅💡🚀など一切NG） - **テキストの装飾記号を使わない**（→ ◆ ■ ▶ ・ などの多用NG） - **デフォルトフォントのまま使わない**（Slidevデフォルトは必ず上書き） - **等幅・均一なレイアウトにしない**（全スライド同じ構造はAI感の原因） - **情報を詰め込まない**（1スライド1メッセージ厳守） - **SVGを単純な四角・丸で構成しない**（幾何学形状の羅列はAI感が出る） ### ✅ 必ずやること #### フォント ```css /* Google Fonts から本格的な組み合わせを読み込む */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Zen+Kaku+Gothic+New:wght@700;900&display=swap'); /* 見出し: 極太（900）でインパクト */ .heading { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; } /* 本文: 細め（300〜400）で余白を感じさせる */ .body { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; } ``` #### タイポグラフィの対比 - 見出しと本文で**フォントウェイトを極端に変える**（900 vs 300） - 見出しは大きく（60〜80pt相当）、本文は小さく抑える - 行間（line-height）は1.8以上を本文に設定 - 文字間隔（letter-spacing）を見出しに-0.02em〜適度に設定 #### SVGアニメーション（本格的なもの） ```html <!-- 単純なfadeではなく、パスドローイングやモーフィングを使う --> <svg viewBox="0 0 200 200"> <!-- パスドローイングアニメーション --> <path d="M10,100 Q100,10 190,100" stroke="#e63946" fill="none" stroke-width="2" stroke-dasharray="300" stroke-dashoffset="300"> <animate attributeName="stroke-dashoffset" from="300" to="0" dur="1.5s" fill="freeze"/> </path> <!-- グラデーションマスクを使った表示 --> <defs> <linearGradient id="grad" x1="0%" x2="100%"> <stop offset="0%" style="stop-color:#a855f7"/> <stop offset="100%" style="stop-color:#e879f9"/> </linearGradient> </defs> </svg> <!-- スクロールトリガーアニメーション（Intersection Observer） --> <script> const observer = new IntersectionObserver((entries) => { entries.forEach(e => e.isIntersecting && e.target.classList.add('visible')); }); </script> ``` #### レイアウトの非対称性 - 全スライド同じレイアウトにしない - 左右の重さを意図的にずらす（テキスト左寄り、ビジュアル右に大きく） - 余白は「多すぎるくらい」で良い - グリッドは12カラムを使い、カラムスパンを変える --- ## Claude Codeへのプロンプト鉄則 Claude Codeに渡すプロンプトには必ず以下を含める： ``` 【デザイン品質の絶対要件】 1. 絵文字・装飾記号（→ ◆ ■ など）をスライド本文で使わないこと 2. フォントは必ずGoogle Fontsを読み込み、見出し極太（900）・本文細め（300）の対比をつけること 3. SVGアニメーションはパスドローイング・モーフィング・Intersection Observerを使うこと 4. 各スライドのレイアウトを変える（全スライド同じ構造にしない） 5. 余白を大胆に取る（窮屈な印象を絶対に作らない） 6. 色は指定パレットのみ使用し、グラデーションを積極活用する 7. キャラクター画像がある場合は、コンテンツの一部として意味のある配置をすること 8. 完成後、スライドを見て「AI感がないか」を自己チェックしてから報告すること ``` --- ## ワークフロー全体 ``` コムギさん ↓ 「資料作りたい」 URL案内（Gem2本） ↓ STEP 1: 構成Gem → 構成案 ↓ STEP 2: デザインGem → デザインプロンプト20項目 ↓ STEP 3: 画像生成AI → キャラクター素材（任意・推奨） ↓ STEP 4: 3〜4点を私（ポニョ）に送る ↓ STEP 5: Claude Code → Slidev HTML 生成 ※ AI感排除ルールをプロンプトに含める ↓ STEP 6: ブラウザで全スライドスクリーンショット ↓ STEP 7: PDF化 → Telegram に1ファイルで送信（filePath使用） ↓ STEP 8: （希望時）Google Drive にもアップ ``` --- ## STEP 5｜Claude Code 実行 ```bash WORK="/Users/meruemu/.openclaw/workspace/slides/<資料名>" mkdir -p "$WORK" && cd "$WORK" && git init -q /Users/meruemu/.local/bin/claude --dangerously-skip-permissions --print ' <構成案・デザインプロンプト・補足> 【デザイン品質の絶対要件】 1. 絵文字・装飾記号をスライド本文で使わない 2. フォントはGoogle Fonts（見出し:Zen Kaku Gothic New 900、本文:Noto Sans JP 300） 3. SVGはパスドローイング・モーフィングアニメーションを使う 4. 各スライドのレイアウトを変える 5. 余白を大胆に取る 6. 完成後にnpm run buildを実行 完了後: openclaw system event --text "スライド完了: <資料名>" --mode now ' ``` --- ## STEP 6〜7｜スクリーンショット → PDF → Telegram ```bash # サーバー起動 cd /Users/meruemu/.openclaw/workspace/slides/<資料名>/dist python3 -m http.server 9877 & # browser ツールで各スライドをスクリーンショット → slide{N}.png に保存 # PIL でPDF化 python3 << 'EOF' from PIL import Image images = [Image.open(f"/Users/meruemu/.openclaw/media/slides/slide{i}.png").convert("RGB") for i in range(1, <N+1>)] images[0].save("/Users/meruemu/.openclaw/workspace/slides/<資料名>.pdf", save_all=True, append_images=images[1:]) EOF # Telegram に1ファイルで送信 # message tool: filePath, caption付き ``` --- ## STEP 8｜Google Drive（希望時） ```bash GOG_KEYRING_PASSWORD=openclaw_gog_2026 GOG_ACCOUNT=[REDACTED_SECRET] \ gog drive upload /tmp/<資料名>.zip \ --name "<資料名>.zip" \ --parent 1yoqOZt1QJ9mWiejGabAeNxdGSB8QU2k1 gog drive share <fileId> --to anyone --role reader ``` --- ## 仕様まとめ | 項目 | 内容 | |---|---| | 出力フォーマット | Slidev HTML → PDF（Telegram送信） | | 作成エンジン | Claude Code（/Users/meruemu/.local/bin/claude） | | スクリーンショット | browser ツール | | PDF化 | Python PIL（Pillow） | | Telegram送信 | message tool filePath で1ファイル送信 | | Google Drive保存先 | フォルダID: 1yoqOZt1QJ9mWiejGabAeNxdGSB8QU2k1 | | 渡す情報 | 構成案 + デザインプロンプト + キャラ画像（任意） + 補足 | --- ## 学習ログ（2026-03-04） - **絵文字・記号禁止**: AIが生成しやすい絵文字は人間らしさを損なう - **フォントウェイトの対比**: 900 vs 300の組み合わせで一気にプロ感が出る - **SVGアニメーション**: パスドローイング・モーフィング・Intersection Observerを使うと本格的 - **レイアウトの非対称**: 全スライド同じ構造はAI感の最大原因 - **キャラクターは画像生成AIで**: Claude CodeのSVGキャラはAI感が強い - **参考PDF**: ウォームベージュ背景・赤×白・3D猫キャラ・大きな見出し・余白たっぷり - **Telegram配信**: 写真でなくfilePath（ファイル送信）で1枚PDFが最も使いやすい


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (HIGH)