zarazhangrui

zarazhangrui/frontend-slides A skill worth trying.

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

#6: Frontend Slides Beautiful slides built like a web page. GitHub: zarazhangrui/frontend-slides t.co

睡前挖到一个宝藏，你们嘴可真严，我竟然现在才知道！！！ 都知道一手信息源要听英文播客，但生肉听不懂，机翻太抽象该怎么办？ 被 @momoai_daily 安利一个开源神项目： zarazhangrui/youtube-digest 支持中英对照，片段总览，还能一键记笔记抓取金句！ 红色是这个，蓝色是豆包的双语字幕功能，体验了一下和机翻没区别，怎么好意思放这的😡！ 不过图2豆包的视频总览功能和时间轴还挺实用，各取所需 另外天天看 Tibo 重置，终于听到他开口讲话，有种走进现实的感觉（两周前还是意气风发的T god）

@noahduck283 视频大多都有字幕，Zara Zhang也有个很好用的插件可以搭配使用嘿嘿： zarazhangrui/youtube-digest%E5%AE%83%E5%8F%AF%E4%BB%A5%E6%98%BE%E7%A4%BA%E5%8E%9F%E6%96%87%E3%80%81%E4%B8%AD%E6%96%87%E6%88%96%E5%8F%8C%E8%AF%AD%E5%AD%97%E5%B9%95%EF%BC%8C%E8%BF%98%E8%83%BD%E7%94%9F%E6%88%90 AI 概览、章节和重点引用；选中一段字幕后，可以让 AI 解释内容，并保存带时间戳的笔记。适合学英语、看课程和长期整理资料。

@zmdsb259414 这个可以，上面那个主要是可以自己上传不同的内容哈哈哈： 张咋啦（Zara）开源的 Chrome 侧边栏插件：zarazhangrui/youtube-digest%E5%AE%83%E5%8F%AF%E4%BB%A5%E6%98%BE%E7%A4%BA%E5%8E%9F%E6%96%87%E3%80%81%E4%B8%AD%E6%96%87%E6%88%96%E5%8F%8C%E8%AF%AD%E5%AD%97%E5%B9%95%EF%BC%8C%E8%BF%98%E8%83%BD%E7%94%9F%E6%88%90 AI 概览、章节和重点引用；选中一段字幕后，可以让 AI 解释内容，并保存带时间戳的笔记。适合学英语、看课程和长期整理资料。