← All recipes
verified // 業務効率化 / 営業

提案書制作 — HTML/CSS → Figma → PDF

30+ ページの BtoB 提案書を AI で構成 → HTML/CSS で組み → Figma で再現 → PDF 出力する最短ルート

Last updated: 2026-04-15
提案書制作 Claude Code Figma Figma MCP Recipe
// Current best
Tools
  • Claude Code (Opus 4.7) で HTML/CSS スライドテンプレ
  • humbulls スライドテンプレ 10 タイプ
  • Figma + Figma MCP
Flow
  1. 提案ヒアリング → Claude で構成案 (10 セクション)
  2. Claude で各スライドを HTML/CSS で実装 (1280×720 固定)
  3. HTML プレビューで内容と見栄えを確定
  4. Figma に手動再現 (Figma MCP で部分的に支援)
  5. Figma → PDF エクスポート → 提出
Time 30 枚で 1 日
Cost $0 (既存サブスクリプションのみ)
Notes

HTML を「正本」 として保管、 Figma はあくまで PDF 出力のための再現先。 HTML が直接 PDF にできれば Figma 工程は不要、 という改善余地あり。

// Verified attempts
Claude → Google Slides API で直接生成 REJECTED

API でレイアウト崩れ、 文字位置調整に時間、 humbulls トンマナの再現が困難

Claude → HTML/CSS → Figma 手動再現 ADOPTED

HTML を正本にすれば修正のたびに再現可能、 Figma で出力を制御

Claude → PowerPoint (pptx) 直接生成 UNVERIFIED

試していないが pptx ライブラリ経由なら可能性あり

Claude → Reveal.js / Marp で HTML プレゼン UNVERIFIED

Web 公開用には有効、 PDF 出力品質は要検証

// Learnings log
  • Google Slides API での layout 制御は AI 経由では困難、 Figma 経由に切替
  • humbulls スライドテンプレ 10 タイプを HTML で確立、 提案書はこれを組み合わせて生成