mcpField
E
editorial-dot-cover

editorial-dot-cover

github.com/pluviobyteデザイン・UI1.7k169 回インストール5 週間前に更新
リポジトリ

editorial-dot-cover について

編集的なデザインのカバーを作成するスキルです。中国語と英語の文字を正確に配置し、スクリプトで編集可能なSVGを生成します。対応レンダラーがあればPNGも出力し、紙の質感とドット状の図案を用います。

主な機能

  1. 01編集可能なSVGカバーの作成
  2. 02スクリプトによるPNG出力
  3. 03中国語の文字と句読点を保持
  4. 04キャンバスサイズとフォントの調整
  5. 05紙の質感とドット図案

活用シーン

  1. 01記事用の編集デザインカバー制作
  2. 02中国語見出し入りカバーの作成
  3. 03SVGとPNGを併せて納品する場面

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pluviobyte/rnskill --skill editorial-dot-cover

インストール後、Claude Code で/editorial-dot-coverを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
style-reference.svg
scripts/
render_cover.py

詳細

エディトリアル・ドットカバー

ベクターから、タイポグラフィを正確に再現したカバーを作成します。中国語のテキストや句読点を正確に保つため、画像生成よりも同梱のレンダラーを優先してください。

必須入力

リクエストまたは現在のプロジェクトから、次の値を解決してください。

  • label:Codex + Hyperframes: のような、短い英語のツール名/ラベル
  • title:簡潔な中国語の見出しを1つ
  • output:SVGとPNGの出力先パス

デフォルトは 3168 × 1267(約 2.5:1)です。ユーザーからラベルが指定されていない場合は、短いツール名/トピック名のラベルを導き出してください。タイトル自体を安全に推測できない場合に限り、質問してください。

レンダリング

次を実行します。

python3 <skill-dir>/scripts/render_cover.py \
  --label "Codex + Hyperframes:" \
  --title "拆解抖音爆款·吃上自媒体这碗饭!" \
  --output "/absolute/path/cover.svg" \
  --png "/absolute/path/cover.png"

異なる横長比率が指定された場合にのみ、--width と --height を使用してください。ユーザーがフォントを指定した場合は、--font-en または --font-cn を使用してください。すべてのパラメーターを確認するには、--help を実行してください。

混在する言語のフォントメトリクスにより自動調整が不正確な場合は、アートディレクションで指定するピクセルサイズとして --label-size または --title-size を使用してください。どちらかを上書きした後も、必要なテキストとアイコンの間隔を維持してください。

忠実度を確認する際は、視覚的な比較対象としてのみ assets/style-reference.png を使用してください。サンプルのピクセルをコピーせず、スクリプトから新しいカバーを生成してください。

スクリプトは編集可能なSVGを信頼できる唯一のソースとして保持し、インストール済みのChromium系ブラウザーまたは rsvg-convert を使ってPNGをレンダリングします。どちらのレンダラーもない場合は、SVGを納品し、PNGのレンダリングが未完了であることを報告してください。

スタイルの仕様

次の特徴を維持してください。

  • #D6D0C5 に近い温かみのあるグレーの紙の背景。控えめな粒子感と、弱い中央のグロー/ビネットを加えます。
  • #050505 に近い、ほぼ黒の前景。指定がない限り、アクセントカラーを追加しないでください。
  • キャンバスの約68~72%を占める、左揃えのテキストブロック。
  • 右側に配置した、キャンバスの約18~20%を占めるドットのフィルムと拡大鏡のシンボル。
  • 英語の行には、太いスラブセリフ体を使用します。Roboto Slab Black を優先し、使用できない場合は Rockwell または太めのセリフ体を使用します。
  • 中国語の行には、非常に太いディスプレイサンセリフ体を使用します。ライセンス済みでインストールされているディスプレイ書体を優先し、使用できない場合は Source Han Sans SC Heavy または PingFang SC Heavy を使用します。
  • 詰めた字間、コンパクトな行間、大きく空けた上下の余白。
  • 見出し内に間を作るには · または : を使い、ユーザーが指定した末尾の句読点はそのまま維持します。
  • 絵文字は、丸いドットの線を使ったベクターとして描画します。ラスター形式の既製アイコンで代用しないでください。

ポートレート、ステッカー、目に見える色の変化があるグラデーション、バッジ、ドロップシャドウ、装飾的なコピーは追加しないでください。ビジュアルアイデンティティは、タイポグラフィ、余白、紙の質感、ドットの絵文字で表現します。

レイアウトの判断基準

  • 読みやすく、アイコンの手前に収まる場合は、中国語の見出しを1行に保ってください。
  • 長い見出しの場合は、まず表現を簡潔にします。文言を変更できない場合は、意図的な改行を1か所入れ、グループ全体を垂直方向に再センタリングしてください。
  • テキストと絵文字の間には、キャンバス幅の少なくとも4%の間隔を確保してください。
  • 英語のラベルと中国語の見出しが競合する場合は、中国語の見出しを縮小する前に英語のラベルを短くしてください。
  • 1.8:1 より狭い比率では、スタイルを維持しつつ、アイコンをテキストの下または右側に移動してもかまいません。文字が不自然に細く見えるほどタイトルを圧縮しないでください。

品質チェック

納品前に、次を確認してください。

  1. PNGを実寸と25%の縮尺で開きます。
  2. すべての中国語の文字と句読点が、指定されたテキストと一致していることを確認します。
  3. 文字、ドットの線、拡大鏡の持ち手が切れていないことを確認します。
  4. 見出しが最初に目に留まり、アイコンが副次的な要素になっていることを確認します。
  5. 背景のテクスチャは、よく見たときにだけ分かり、目立つノイズになっていないことを確認します。
  6. SVGが編集可能であり、PNGの寸法が仕様と一致していることを確認します。

縮小表示でドットのシンボルがつぶれる場合は、ドットの間隔または線幅を大きくして、再レンダリングしてください。

コメント