frontend-slides：コーディングエージェントでWebスライドを作る

スライドデッキが欲しくて、しかも普段からターミナルに住んでいるなら、frontend-slidesはそれを手に入れる最もすっきりした方法のひとつです。これはコーディングエージェント向けのスキルです。プレゼンアプリを開く代わりに、すでに使っているエージェントにデッキを説明するだけで、frontend-slidesがあなたのアイデアをWebページとして組み上げたスライドに変えてくれます——本物のHTMLとCSSで、ブラウザからそのまま発表できます。

同種のなかで最も人気の選択肢でもあります。25kのGitHub starとMITライセンスを備えたfrontend-slidesは、増え続けるClaude PPTスキルの棚の最上段に位置しています。本記事では、それが何なのか、インストールとプロンプトの与え方、得意なことと止まるところ、この分野の他のスキルとの比較、そして一つのデッキが継続的な仕事の塊になったときに本格的なワークスペースがどこで役立つのかを解説します。

frontend-slidesとは

frontend-slidesはスキルです——あなたのコーディングエージェント（Claude Code、Codex、Cursorなど）がタスクの途中で読み込み、一つのことをうまくこなすためにパッケージ化された指示のセットです。ここでのその一つのこととは、プレゼンテーションを作ることです。エージェントがすでに持つフロントエンドスキルを借りて、それをスライドに向けます。あなたがデッキを平易な言葉で説明すると、エージェントがクリーンでモダンなWebページを1スライド1枚で書き上げ、あなたはそれをブラウザでめくっていきます。

出力は設計からしてWebネイティブです。各スライドがHTMLとCSSなので、完全な制御が手に入ります——カスタムレイアウト、本物のタイポグラフィ、グラデーション、トランジション、埋め込みチャートなど、ブラウザが描画できるものは何でも。制作と保守はZara Zhang氏によるもので、MITでオープンソース、そして他のスキルと同じくモデルキーは持ち込み方式です。あなたがAPIキーを用意し、スキルが職人技を提供します。

どう動くのか

ループは短く、ほとんど会話で進みます。

1. スキルをインストールする——frontend-slidesをコーディングエージェントのスキルディレクトリにクローンまたは追加します（リポジトリにセットアップ手順があります）。モデルキーは自分で用意します。
2. デッキを説明する——トピック、対象読者、トーン、おおよそのスライド枚数をエージェントにプロンプトで伝えます。ブリーフが具体的なほど、組み上がる構成もよくなります。
3. 組ませる——エージェントがスライドをWebページとして生成し、発表のためにブラウザで開きます。
4. 反復する——平易な言葉で修正を依頼し（「導入を引き締めて」「スライド3を2カラムの比較に」「もっと暖色のパレットに」）、再レンダリングします。ただのCSSなので、どこでも直接手で編集することもできます。
5. 発表またはエクスポート——ブラウザから発表するか、共有用にPDFへエクスポートします。

得意なこと（そして正直な限界）

frontend-slidesが最も輝くのは、Webネイティブなスライドと、その見た目への完全な制御が欲しいときです。HTMLとCSSに慣れているなら、あなたとデザインのあいだには何も入りません——どのスライドもこじ開けて手で変え、デッキ全体をgitでバージョン管理し、複数のデッキでコンポーネントを再利用できます。開発者にとってはそこがすべての魅力です。独自形式のファイルではなく、コードベースのように振る舞うスライドなのです。

正直な限界は、その強みの裏返しです。出力はWebページであって.pptxではありません——だから組織がネイティブ図形付きの編集可能なPowerPointを必要とするなら、これはその道具ではありません（それを狙うスキルは下のスコアカードを参照）。快適さの下限もあります。HTMLとCSSから遠ざかるほど、「完全な制御」は自らを売り込みにくくなります。そして、どの単一スキルとも同じく、frontend-slidesが作るのは一つのデッキです——プロジェクトをまたいでブランドを運んだり、デザインシステムを同期し続けたりはしません。鋭い単機能のツールであり、それを正直に認めています。

frontend-slidesと他のClaude PPTスキル

frontend-slidesはこのカテゴリで唯一のスキルではなく、正しい選び方は、必要な出力と、受け入れられるライセンス次第です。

ツール	出力	ライセンス	最適な用途
frontend-slides	HTML Webスライド	MIT	Webネイティブなデッキ、完全なCSS制御
guizang-ppt-skill	HTML（エディトリアル）	AGPL-3.0	作り込まれた、デザイン性の高いデッキ
dashiAI	編集可能なプレゼンテーション	AGPL-3.0	非開発者が編集できる出力
Open Design	ブランド準拠の編集可能なデッキ＋テンプレート	Apache-2.0	デザインシステムに紐づき、ワークスペース内にあるデッキ

洗練されたエディトリアルな見た目が欲しいなら、比較対象になる兄弟分はguizang-ppt-skillです。成果物が非開発者にとって編集可能なままである必要があるなら、dashiAIがそのために作られています。frontend-slidesが勝つのは、デッキそのものを、あなたが完全に所有するWebページにしたいときです。

Open Designが役立つ場面

frontend-slidesは、ターミナル内のデッキには素晴らしい単機能スキルです。しかしスキルはスクリプトです——プロジェクトをまたいでブランドを運んだり、出力を本物のワークスペースで編集可能なまま保ったり、デッキを他のデザイン作業と連携させたりはしません。

Open Designは、スキルの一段上のレイヤーです。すでに使っているコーディングエージェントの外側に位置する、オープンソース（Apache-2.0）でローカルファースト、キー持ち込み方式のAgent-Native Design Workspaceです。あなたがデッキを説明すると、エージェントがデザインシステムに沿って編集可能なデッキを生成します——だから毎回白紙から始めるのではなく、常にブランドに調和します——さらにOpen Designは、ファーストパーティのHTMLデッキテンプレートをプラグインライブラリで提供しています。これはfrontend-slidesと同じ発想に、居場所を与えたものです。あなたのファイル、あなたのブランド、編集可能で、ずっとあなたのもの。今日コーディングエージェントでスライドを作っているなら、Open DesignがClaude Codeとどう連携するかをご覧ください。

コマンドラインから手早くWebネイティブなデッキが欲しいときはfrontend-slidesを。デッキがブランドに調和し、編集可能で、より大きなデザイン作業の一部である必要があるときはワークスペースに手を伸ばしてください。

FAQ

frontend-slidesは無料ですか？ はい。MITライセンスでオープンソースであり、無料で使えます——モデルのAPIキーは自分で用意します。MITは寛容なので、商用利用にも向いています。

frontend-slidesはどう使いますか？ スキルをコーディングエージェントのスキルディレクトリにインストールし、デッキ（トピック、対象読者、長さ）を説明します。エージェントがスライドをWebページとして組み上げます。平易な言葉で反復し、ブラウザから発表します。

frontend-slidesはPowerPointにエクスポートできますか？ いいえ——ブラウザで発表するWebスライド（HTML/CSS）を生成し、共有用にPDFへエクスポートできます。ネイティブ図形付きの編集可能な.pptxが必要なら、frontend-slidesではなく、その出力のために作られたスキルを見てください。

frontend-slidesは誰に最適ですか？ Webネイティブなスライドと完全なCSS制御が欲しい開発者——Webプラットフォーム上で快適に暮らし、プレゼンアプリを開くよりデッキをgitでバージョン管理したい人たちです。

スキルとデザインワークスペース、どちらを使うべき？ frontend-slidesのようなスキルは、手早い一度きりのデッキに理想的です。Open DesignのようなAgent-Native Design Workspaceは、ブランドに調和し編集可能なデッキを、他のデザイン作業と並べて扱う必要があるときにより適しています。

まとめ

frontend-slidesは、コーディングエージェントでスライドを作る方法として最も多くのstarを集めており、その評価は妥当です。Webネイティブなデッキ、完全なCSS制御、MITライセンス、そのすべてがあなたのいつものターミナルから動きます。手早くブラウザ優先のデッキが欲しくて、HTMLとCSSに慣れているなら、インストールしてどんどんプロンプトを。一つのデッキが、編集可能なまま保たれデザインシステムに紐づく必要のある、継続的でブランド準拠の仕事へと変わったとき——そこがAgent-Native Design Workspaceの引き継ぐ場面です。