Consulting Slide Generator
コンサルファーム品質のスライド図解をHTML+Tailwindで生成する。
生成ワークフロー
Step 1: スライドタイプを特定
ソリューションフロー |
assets/templates/solution.html |
| matrix | 2x2マトリクス |
assets/templates/matrix.html |
| compare | 比較・Do/Don't |
assets/templates/compare.html |
| process | プロセスフロー |
assets/templates/process.html |
Step 2: テンプレートを読み込み、内容を置換
Step 3: HTMLを保存
CODEBLOCK0
Step 4: PNGに変換
CODEBLOCK1
デザイン原則
詳細は references/design-principles.md を参照。
必須ルール
- 1. 12カラムグリッド -
grid-cols-12 で構成 - 3レベル階層 - Eyebrow → Title → Body
- 2-3色配色 - Navy + Accent (Red/Green/Gold)
- 意図的な余白 - 詰め込まない
- 数字は大きく -
text-5xl font-black + プログレスバー
配色
CODEBLOCK2
フォント
- - Noto Sans JP (Google Fonts CDN)
- ウェイト: 300, 400, 500, 700, 900
スライドタイプ別ガイド
Problem（課題提起）
- - 左: メッセージ / 右: 数字+プログレスバー
- 推定値には注釈
Solution（ソリューション）
- - ステップ横並び（5段階）
- Navy→Greenグラデーション
- 下部に効果3カラム
Matrix（2x2）
Compare（比較）
Process（プロセス）
出力仕様
- - 解像度: 1200 x 675 px
- フォーマット: HTML → PNG
咨询幻灯片生成器
使用HTML+Tailwind生成咨询公司品质的幻灯片图解。
生成工作流程
步骤1：确定幻灯片类型
解决方案流程 |
assets/templates/solution.html |
| matrix | 2x2矩阵 |
assets/templates/matrix.html |
| compare | 比较·Do/Dont |
assets/templates/compare.html |
| process | 流程 |
assets/templates/process.html |
步骤2：加载模板，替换内容
步骤3：保存HTML
slides/<项目名称>/<幻灯片名称>.html
步骤4：转换为PNG
bash
bash scripts/html2png.sh input.html output.png
设计原则
详情请参考 references/design-principles.md。
必须遵守的规则
- 1. 12列网格 - 使用 grid-cols-12 构成
- 3级层次结构 - 副标题 → 标题 → 正文
- 2-3色配色 - 海军蓝 + 强调色（红/绿/金）
- 有意的留白 - 不要填满
- 数字要放大 - text-5xl font-black + 进度条
配色方案
海军蓝: #0f172a, #1e293b, #334155
红色: #dc2626
绿色: #059669
金色: #ca8a04
字体
- - Noto Sans JP（Google Fonts CDN）
- 字重: 300, 400, 500, 700, 900
各幻灯片类型指南
Problem（提出问题）
- - 左侧：信息 / 右侧：数字+进度条
- 估算值需添加注释
Solution（解决方案）
- - 步骤横向排列（5个阶段）
- 海军蓝→绿色渐变
- 底部显示3列效果
Matrix（2x2矩阵）
Compare（比较）
Process（流程）
输出规格
- - 分辨率: 1200 x 675 px
- 格式: HTML → PNG
