slidevjs

Claude Code のスライド作成スキル5つ＋スキルなしで、同じ原稿から資料を作り比べた Claude Code でスライドを作るスキル（Agent Skills）を5つ選び、「スキルを使わない場合」も加えた6条件で、同じテキスト原稿から5枚の資料を作りました。出力された PDF をページごとに並べて比べた結果をまとめます。 ! 結論 見た目の差は思ったより小さく、スキルなしでも見劣りしなかった 差が出たのは「編集できる PPTX を出せるか」と「機械で検査する仕組みがあるか」の2点。両方を満たすスキルはなかった 日本語の折り返しやフォントの扱いは、どのスキルも手薄だった 比べた6つの条件 条件 組み方 PDF / PPTX の作り方 編集できる PPTX 自動チェック consulting-pptx-skill 約80項目の設計規約を読み、自由記述の HTML テンプレートで組む Chrome で PDF ×（別の38型パイプラインなら可） check_deck.py（規約違反）と check_layout.mjs（はみ出し）で FAIL 0 まで直す slidev（公式スキル skills/slidev） Markdown に HTML と Vue の部品を混ぜる。棒グラフは Vue の部品を自作 slidev export ○（pptx-editable。4枚目の矢羽根の見出しだけ画像） なし mckinsey-slides HTML で組む pptx スキルの html2pptx ○（グラフも表も PowerPoint の部品のまま） html2pptx のはみ出し検証のみ frontend-slides 1つの HTML ファイル。プリセット「Swiss Modern」 Playwright で PDF ×（PDF もスライドの画像） なし marp-slides 22本の見本デッキを参考に Marp の Markdown＋HTML。既定の黒地＋オレンジ Marp CLI ×（スライドごとに画像） なし スキルなし HTML と SVG を手で書く Chrome で PDF × なし（目視で3回確認） mckinsey-slides は入手元が分かりませんでした。本文は、note で広まった「マッキンゼー風スライド」プロンプトと同じ文言を含んでいます。 費用とライセンス 6条件とも、スキル本体と変換ツールにお金はかかりません。画像生成などの有料の外部 API も使っていません 必要なのは Claude Code を使える Claude の有料プラン（または API の利用料）だけです ライセンス consulting-pptx-skill・slidev・frontend-slides：MIT marp-slides：README に MIT と記載（LICENSE ファイルはなし） mckinsey-slides：入手元もライセンスも不明。変換に使う pptx スキルは Anthropic の利用規約の範囲で使える 変換ツール：Marp CLI（MIT）、Slidev（MIT）、Playwright（Apache-2.0）、PptxGenJS（MIT） 比較の条件 共通の入力は、レイアウトの指示を含まないテキストだけの原稿「架空の中堅製造業A社 受注処理への生成AI導入提案」（数値はすべて架空） 原稿は5つの節（現状・課題・対策案の比較・ロードマップ・提言）で、1節を1枚にした5枚構成、表紙なし 各条件は手順書（SKILL.md）どおりに、同時に並行して作った。原稿の事実と数値は足し引きしていない marp-slides と slidev は後から追加した条件で、ほかの条件と同じ指示で作った frontend-slides は、ユーザーへの質問の答え（読ませる資料・高密度）を先に渡し、スタイル見本を3案作る工程は省いた 1枚目：推移のグラフ 全条件が「月間件数」と「1件あたりの処理時間」の2系列を、縦軸0から描いた mckinsey-slides は棒と折れ線の複合グラフ1つ、ほかの5条件は上下2段 slidev は件数も処理時間も棒グラフで描き、右に数値の枠を並べた frontend-slides は最新月を赤で強調し、倍率の数字を大きく見せた marp-slides は黒地のダッシュボード風で、グラフの横に「820→1,120件」などの数値カードを並べた 2枚目：構成比 consulting-pptx-skill 以外の5条件が「25分を比率どおりに分けた横帯＋76%の括弧」という同じ答えにたどり着いた consulting-pptx-skill だけは、規約に従って帯グラフ付きの表にした 3枚目：対策案の比較 全条件が「観点×3案」の表で、推奨案の列を色で目立たせた consulting-pptx-skill は観点ごとに勝っている案を強調した（外部委託案が勝つ観点も示す） frontend-slides・marp-slides・スキルなしは、純効果を金額に比例した横棒で添えた 4枚目：ロードマップ consulting-pptx-skill・mckinsey-slides・frontend-slides は「段階×観点（作業・担当・判断の基準）」の表 slidev は矢羽根形の段階見出し＋段階ごとのカード、marp-slides は時間軸の帯＋段階ごとのカード、スキルなしはガント図 判断の基準を枠や色で強調した点は、ほぼ全条件で共通 5枚目：提言 全条件が「期待効果の数値＋次の一手3つ」の構成 consulting-pptx-skill・slidev・marp-slides は下部の余白が目立った 分かったこと 見た目の差は思ったより小さい 同じ原稿から、どの条件でも整った5枚ができました。スキルなしでも見劣りしませんでした。一番目を引くのは黒地の marp-slides ですが、印刷や会議室での投影には向きません。 差が出たのは「出力形式」と「検査の仕組み」 編集できる PPTX を出せたのは mckinsey-slides と slidev です。規約違反を機械で検出して FAIL 0 まで直せたのは consulting-pptx-skill だけでした。この2つを両立する条件はありませんでした。 日本語の扱いはどのスキルも手薄 和文フォントの指定がない、1文字だけ次の行に落ちる折り返しを手で直す、という作業がほぼ全条件で発生しました。 グラフ部品を持つスキルは少ない グラフは多くの条件で SVG を自作していました。marp-slides は見本に SVG グラフがあるぶん組み立ては速いですが、中身は手書きの SVG で同じです。 つまずいたところ slidev：最初に起動しなかった 入れた版の依存関係が合わず（markdown-it の版違い）、版を固定して直しました。スキルは開発者のプレゼン向けで、業務資料の組み方の指示はありません。 marp-slides：手順の抜けで手戻りが多かった 次の3点は手順書に書かれておらず、自分で補いました。 HTML を有効にする --html オプションが手順にない 標準入力待ちで marp が止まる 内容の少ないスライドが縦の中央に寄る 用途別のおすすめ やりたいこと おすすめ PowerPoint で編集して渡す mckinsey-slides 規約の機械検査で品質をそろえる consulting-pptx-skill Web で配る・画面共有で見せる frontend-slides 画面映えするダッシュボード風にしたい marp-slides Markdown で書きつつ編集できる PPTX も欲しい slidev 1回限りの資料 スキルなしでも十分 この記事は、note に書いた記事を Zenn 向けにまとめ直したものです。 note.com

🤯 用 Markdown 写 PPT：Slidev。写完自动排版，代码块带高亮还能现场改，导出 PDF 或部署成链接都行。讲技术的人省掉调版式。 slidevjs/slidev