Frontend Slides

Claude Code で作る zero-dependency HTML プレゼンテーションスキル — by @zarazhangrui

1 — 概要
What is it?

Frontend Slides は、デザイン知識がなくても美しい HTML スライドデッキを作れる Claude Code スキル。 「言葉で好みを伝える」のではなく、生成した 3 種類のビジュアルプレビューを見て選ぶ「Show, don't tell」アプローチが最大の特徴。 出力はすべて 単一 HTML ファイル で、npm・ビルドツール・フレームワーク不要。

0依存パッケージ
12スタイルプリセット
PPT変換対応
1HTML ファイル出力
主な機能
  • Zero Dependencies — 単一 HTML ファイル。CSS / JS はすべてインライン。10 年後も動く。
  • Visual Style Discovery — 好みを言語化できなくてOK。3 種プレビューから選ぶだけ。
  • PPT Conversion — 既存の .pptx を Web スライドへ変換。画像・テキスト・ノート保持。
  • Anti-AI-Slop — 12 種すべてが「よくある紫グラデ on white」を意図的に排除した個性的デザイン。
  • Inline Editing — ブラウザ上でテキストを直接編集して localStorage に自動保存（オプション）。
Viewport Fitting は絶対ルール — すべてのスライドは height: 100dvh; overflow: hidden で完全に収まる。スクロールは発生しない。コンテンツが溢れる場合は自動的に複数スライドへ分割。
2 — スタイルプリセット一覧
Dark テーマ
Bold Signal
Confident / Archivo Black + Space Grotesk
Electric Studio
Professional split-panel / Manrope
Creative Voltage
Energetic retro-modern / Syne + Space Mono
Dark Botanical
Elegant serif / Cormorant + IBM Plex Sans
Light テーマ
Notebook Tabs
Editorial / Bodoni Moda + DM Sans
Pastel Geometry
Friendly / Plus Jakarta Sans
Split Pastel
Playful split / Outfit
Vintage Editorial
Witty serif / Fraunces + Work Sans
Specialty テーマ
Neon Cyber
Futuristic / Clash Display + Satoshi
Terminal Green
Hacker aesthetic / JetBrains Mono
Swiss Modern
Bauhaus / Archivo + Nunito
Paper & Ink
Literary / Cormorant Garamond + Source Serif 4
3 — ワークフロー
3 つのモード
モード用途
Mode A — New Presentationスクラッチから新規作成。Phase 1〜5 を順に進む。
Mode B — PPT Conversion.pptx を Web スライドへ変換。Phase 4 から開始。
Mode C — Enhancement既存 HTML プレゼンを強化・修正。Viewport Fitting を優先確認。
新規作成フロー（Mode A）
Phase 1
Content Discovery
目的・スライド枚数・既存コンテンツ有無・インライン編集の要否を一括質問。画像がある場合はスキャン＆評価してスライド構成を共同設計。
Phase 2
Style Discovery
「どんな気分にしたいか」を選んだ後、3 種類のスタイルプレビューを自動生成してブラウザで表示。好きなものを選ぶだけ。
Phase 3
Generate
viewport-base.css を全量インクルードした完全自己完結 HTML を生成。clamp() で全サイズをレスポンシブ対応。コメントも丁寧に。
Phase 4
PPT Conversion
python-pptx で PPTX からテキスト・画像・ノートを抽出し、選択したスタイルで HTML 化。
Phase 5
Delivery
ブラウザで自動オープン。ファイルパス・ナビ操作方法・カスタマイズ方法（:root 変数）を案内。
Cleanup
Temp Files
.claude-design/slide-previews/ の一時プレビューを削除してクリーンに。
Slide Density Limits
スライドタイプ最大コンテンツ量
Title見出し 1 + サブタイトル 1 + タグライン（任意）
Content見出し 1 + 箇条書き 4〜6 件、または段落 2 つまで
Feature Grid見出し 1 + カード 6 枚（2×3 or 3×2）
Code見出し 1 + コード 8〜10 行
Quote引用文 3 行以内 + 出典
Image見出し 1 + 画像 1 枚（max 60vh）
4 — ファイル構成（Progressive Disclosure）
ファイル一覧

OpenAI の "harness engineering" 原則に基づく 必要な時だけ読む 設計。メインの SKILL.md は約 180 行のマップのみ。

ファイル役割読むタイミング
SKILL.mdコアワークフロー・ルール常時（スキル起動時）
STYLE_PRESETS.md12 種のビジュアルプリセット定義Phase 2（スタイル選択時）
viewport-base.css必須レスポンシブ CSS（全量インクルード）Phase 3（生成時）
html-template.mdHTML 構造・JS 機能・コード品質基準Phase 3（生成時）
animation-patterns.mdCSS / JS アニメーション参照集Phase 3（生成時）
scripts/extract-pptx.pyPPTX コンテンツ抽出スクリプトPhase 4（PPT 変換時）
Viewport Fitting の注意点 — CSS の否定は calc(-1 * clamp(...)) を使う。-clamp() のように関数名の前に - を直接つけるとブラウザが黙って無視する（エラーなし）。

例: right: calc(-1 * clamp(28px, 3.5vw, 44px));
5 — インストールと使い方
インストール

Claude Code のスキルディレクトリにコピーするか、直接リポジトリをクローン:

# スキルディレクトリに手動コピー
mkdir -p ~/.claude/skills/frontend-slides/scripts
cp SKILL.md STYLE_PRESETS.md viewport-base.css \
   html-template.md animation-patterns.md \
   ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py \
   ~/.claude/skills/frontend-slides/scripts/

# または直接クローン
git clone https://github.com/zarazhangrui/frontend-slides.git \
  ~/.claude/skills/frontend-slides
使い方

Claude Code のプロンプトで /frontend-slides を呼び出すだけ:

# 新規プレゼン作成
/frontend-slides
> "AI スタートアップのピッチデッキを作りたい"

# PPTX の変換
/frontend-slides
> "presentation.pptx を Web スライドに変換して"

PPT 変換の前提

  • Python + python-pptx が必要: pip install python-pptx
公式