| name | book-cover-designer |
| description | Zenn の本のカバー画像（cover.png・500×700）をミニマルなデザインで生成・差し替えする。SVG を組み立てて PNG に変換し、M PLUS Rounded 1c Light のタイトルに柔らかいグロー、淡いグラデーション背景（テーマ選択可）、装丁向けの文節改行を適用する。本の表紙を作る・付ける・作り直すとき、カバー画像が無い本に表紙を用意するときに使う。 |
| allowed-tools | Bash Read |
ブックカバーデザイナー
Zenn の本（books/<slug>/）のカバー画像 cover.png（500×700）を生成する。SVG を組み立て、@resvg/resvg-js で PNG にラスタライズする。
デザイン方針（ミニマル・装丁向け）
- サイズは 500×700px（Zenn 推奨の表紙サイズ）。
- フォントは M PLUS Rounded 1c Light（weight 300）。ファイル指定でロードし、システムフォントに依存しない。
- 背景は淡いパステルのグラデーション（下記テーマから選ぶ）。文字が映えるよう適度に色を立てる。
- タイトルは左寄せ・大きめ。白い柔らかなグロー（ハロー）を重ねて背景から浮かせる。
- 改行は文節・助詞の境目で折る（装丁らしい改行）。禁則処理を行う。
| で改行位置を手動指定できる。
- サブタイトルは 1 行に収まるよう自動で縮小する。著者は右下に置く。
テーマ（背景グラデーションの例）
次のテーマは出発点の 例 である。実際に作るときは、本のトピックや雰囲気に合う配色を AskUserQuestion（質問ツール）でユーザに確認する。既存テーマから選ぶか、希望に応じて scripts/generate.mjs の THEMES に新しい配色を追加する。
| theme | 配色・形状 |
|---|
lavender | ラベンダー→ピンクの放射 |
aurora | スカイブルー＋ミントの放射（寒色・爽やか） |
sunset | ピーチ→ローズ→ラベンダーの暖色対角 |
cornerglow | ティール↔インディゴの対角コーナーグロー |
peach | クリーム＋ピーチの暖色 |
monoblue | 単色ブルーの上下グラデ |
手順
-
タイトル・サブタイトル・著者を決める。タイトルは本タイトルの主部（— より前）、サブタイトルは副題を使うとよい。
-
改行位置を | で指定する。文節・助詞の切れ目で 2〜3 行に分けると装丁が整う。
- 例:
mise による|開発環境の|一元管理ガイド
- 例:
Android アプリ|Google Play|公開ガイド（英字の製品名は行をまたがせない）
-
配色を決める。AskUserQuestion（質問ツール）で、本の内容や雰囲気に合う配色をユーザに確認する。上記テーマは例なので、そのまま使ってよいか、別の色やトーンが良いかを尋ねる。回答に応じて既存テーマを選ぶか、THEMES に新しい配色を追加する。
-
依存を用意する（初回のみ）。M PLUS Rounded 1c Light は初回実行時に自動ダウンロードする。
cd ${CLAUDE_SKILL_DIR}/scripts && npm install
-
生成する。
node ${CLAUDE_SKILL_DIR}/scripts/generate.mjs \
--title "mise による|開発環境の|一元管理ガイド" \
--subtitle "複数言語・ツールから env・タスク・CI まで" \
--author "seijikohara" \
--theme aurora \
--out books/mise-dev-environment-guide/cover.png
--out は本のディレクトリ直下（config.yaml と同じ階層）の cover.png にする。Zenn はそのファイル名・配置を表紙として認識する。--keep-svg を付けると、同じ場所に編集用の .svg も書き出す。
-
確認する。cover.png が 500×700 であること、タイトルが枠内に収まり、グローが見え、改行が自然かを Read で画像を開いて目視する。
調整
- グローの強さ・色は
scripts/generate.mjs の GLOW（titleStd・titleRepeat・color）で変える。
- グラデーションの配色・形状は同ファイルの
THEMES で編集する。base と各 layers（放射 radial / 線形 linear）の色を変えるか、新しいテーマを追加する。
- 文字色は各テーマの
ink で変える。
注意
- 背景が白に近すぎると白いグローが埋もれる。グローを効かせるには、テーマの色を適度に濃くする。
- 長いタイトルは
| で手動改行すると、貪欲な折り返しより装丁が整う。
- 出力先を本ディレクトリ直下にしないと、Zenn が表紙として認識しない。
- 実装の詳細（テキスト計測・DP による折り返し・禁則処理・SVG 構築）は
scripts/generate.mjs を参照する。
