Community画像github.com

ゴールデンスペース

余白、比例、階層、文字、色を意図してポスター、SNS画像、イラスト、図、アイコンを組み、実際のSVGまたはラスターファイルを渡す。

ゴールデンスペース とは?

ポスター、キービジュアル、アイコン、図が欲しいときに使う。余白、比例、階層、色の制約を作りながら掛け、仕上がりを見直す。納品は編集できるSVGかPNG、JPEG、WebPであり、プロンプトや講評で終わらない。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guardyanz/golden-space/tree/HEAD/skills/golden-space

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Golden Space

依頼されたビジュアル成果物を、意図的な構成で作成し、可能な限り編集可能なソースを提供します。指示書の内容、ブランド、メディア、寸法、スタイルを尊重します。ポスターや画像の作成を依頼された場合、デザインアドバイス、計画、画像生成プロンプトで止まらず、実際の成果物を生成します。

成果物の選択と提供

  • ユーザーが指定した形式(編集可能なSVG、またはPNG、JPEG、WebPなどのラスター)で提供します。これらは代替の最終出力であり、両方を提供する必要はありません。形式が指定されていない場合、ベクターに適したアートワークにはSVG、写真や絵画的な作品にはラスターを選択します。必要に応じてその選択を簡潔に説明します。
  • ベクターに適したポスター、ソーシャルグラフィック、フラットイラスト、図、アイコンの場合、デフォルトで完全な .svg ファイルを作成し保存します。ユーザーがわざわざSVGを要求する必要はありません。レンダリングが利用可能な場合は、編集可能なマスターを置き換えずにPNGプレビューも提供します。他の形式を明示的に要求された場合はそれが優先されます。
  • ラスターポスターやフラットイラストは、中間SVGとして構成し、利用可能なレンダラーでエクスポートできます。要求されたラスターファイルを提供し、そのSVGソースは要求された場合や引き継ぎに役立つ場合のみ含めます。要求された形式の代わりにファイル拡張子を変更することは絶対に行いません。
  • 写真、フォトリアリズム、絵画的な画像の場合、利用可能な画像生成・編集ツールを通じて同じ構成制約を適用します。そのワークフローについては references/image-direction.md を参照してください。要求されたラスター画像を提供します。SVGも要求された場合は、可能な限り別途ベクター解釈版を作成し、詳細の損失を特定します。要求された視覚スタイルを黙って置き換えてはいけません。
  • SVG内に配置されたラスター画像はハイブリッド構成であり、完全に編集可能なベクターアートワークではありません。関連性がある場合のみ提供し、埋め込まれたラスターを明確にラベル付けし、ライブテキストと個別のベクターオーバーレイを保持します。これを以下で説明するポータブルなベクターマスターとして提示してはいけません。
  • ユーザーの出力ディレクトリと、選択した形式に一致するファイル名(例:poster.svg や poster.png)を使用します。ファイルツールが利用可能な場合はファイルを作成し、引き継ぎ時にリンクします。ファイル書き込みが利用できない場合は、完全なSVGソースを返します。コードフェンスはフォールバックであり、利用可能なツールで作成できるファイルの代わりにはなりません。

構成を確立する

提供された指示書を使用します。詳細が不足している場合は、合理的なデフォルトを選択し、簡潔に説明します。不足している情報が結果を実質的に変える場合にのみ質問します。既存のデザインの場合は、その目的と有用なビジュアル言語を維持します。

メッセージ、焦点要素、読みの順序、出力サイズ、想定される最小表示サイズを特定します。生成前に、内部的なデザイン仕様をコンパクトに形成します:焦点の配置、プロポーションまたはグリッド、セーフマージン、スペーシング関係、タイプの役割、パレット、保護されたコピーエリア。これを使用してSVGを構築するか、画像ツールを指示します。最終的な説明で原則を述べるだけでは不十分です。具体的なプロポーションと光学上の決定については、references/composition.md を参照してください。

  • 黄金比 phi = (1 + sqrt(5)) / 2(約 1.618)をオプションの関係として扱います。使用可能な分割は、マージンとガターを差し引いた後の約 61.8% / 38.2% です。等幅カラム、三分割法、またはコンテンツ主導のレイアウトと比較します。コンテンツと光学上のバランスが実際に向上する場合にのみ保持します。比率が美しさを証明すると主張したり、洗練さを示すためにスパイラルを追加してはいけません。
  • ホワイトスペースに役割を持たせます:トピックの分離、関連アイテムの接続、可読性の保護、焦点の作成。内部スペーシングは通常、グループ間のスペーシングよりも小さくします。空のキャンバスの普遍的なパーセンテージを強制してはいけません。
  • サイズ、ウェイト、位置、スペースの意図的な違いで階層を構築します。配置と繰り返しの間隔を使用して関係を可視化します。幾何学的に整列された円、対角線、文字が中心からずれて見える場合は調整します。
  • パレットとタイプを主題に合わせます。ボディコピーを配信サイズで読みやすく保ち、混雑した構成を救うためにテキストを縮小してはいけません。スペースを埋めるためにコピーを捏造してはいけません。
  • 情報グラフィックやインターフェースの場合、色だけでなくラベルや形状でも意味を伝えます。実際の背景に対してコントラストを確認します。色のしきい値と適用可能性は構成リファレンスにあります。

編集可能なSVGマスターを構築する

SVGを生成または編集する前に、ラスターエクスポートに使用する中間ソースを含め、references/svg-contract.md を参照してください。デフォルトは静的で自己完結型のベクターのみの編集可能マスターです。このセクションはSVGの作成に適用されます。ラスター出力は編集可能なベクターコンテンツを装う必要はありません。

  • SVG名前空間と正しいサイズの viewBox を持つ完全なSVGドキュメントを作成します。SVG最終成果物の場合は、.svg ファイルを保存してリンクします。SVGでラップされたビットマップやプレビュースクリーンショットで代用してはいけません。
  • 独立したオブジェクトは個別に選択可能な状態を維持します。説明的なユニークなID、浅いセマンティックグループ、適切なプリミティブシェイプ、曲線が必要な場合のみコンパクトなパスを使用します。デザイン全体を複合パスに変換してはいけません。
  • マスターではテキストをライブの <text> / <tspan> として保持します。フォントファミリーとフォールバックを宣言し、置換リスクを開示します。オプションのアウトラインディストリビューションコピーは別の成果物です。アウトライン化するとテキストの編集可能性が失われます。
  • プレゼンテーション属性とシンプルなトランスフォームを優先します。ポータブルマスターでは、外部依存、スクリプト、埋め込みラスターコンテンツ、HTML、アニメーション、フィルター効果、CSS駆動の外観を避けます。ローカルのグラデーションやクリッピング定義は、視覚的な目的がある場合のみ使用します。互換性に敏感な機能は、テストされていない互換性の主張ではなく、意図されたエディターで検査する必要があります。
  • 既存のファイルをクリーンアップする場合、ID、ライブテキスト、グループ、有用な精度を維持します。破壊的な最適化を黙って実行したり、ソースマスターをフラット化してはいけません。

assets/starter.svg は、その構造が指示書に合致する場合のみ適応します。その比率、向き、色、スタイルは例であり、すべての出力にコピーするデフォルトではありません。

確認と引き渡し

最終または中間SVGの場合、Pythonが利用可能なときに、バンドルされた構造チェッカーを実行します:

python <skill-directory>/scripts/check_svg.py artwork.svg

エラーを修正します。各警告をレビューします。それはレビューの依頼であり、自動的にデザイン不良の証拠となるわけではありません。--strict は警告でも失敗します。--json は機械読み取り可能なレポートを出力します。チェッカーは保守的なオーサリングプロファイルをカバーしており、すべての有効なSVGをカバーするわけではありません。視覚的な品質、コントラスト、クリッピング、パスジオメトリ、クロスエディターの忠実度は測定しません。セキュリティサニタイザーとして呼び出してはいけません。

ラスター配信の場合、実際のエンコード形式、ピクセル寸法、アスペクト比、要求された背景または透明度を検証します。PNGまたは適切なWebPはアルファを保存できます。JPEGには意図的な不透明な背景が必要です。配信サイズでの圧縮とエッジ品質を検査します。PNGやJPEGをSVGチェッカーに通してはいけません。

引き渡し前に、実際のビジュアルをデザイン仕様と照らし合わせてレビューします:

  • 意図された主題やメッセージがエントリーポイントであり、明確な読みの順序があるか?
  • セーフマージンが重要なコンテンツを保護し、焦点の周りに目的のあるスペースがあるか?
  • グループ内とグループ間のギャップが明確で、偶発的な接点がないか?
  • 選択されたプロポーションがコンテンツに合致し、縮小や混雑を引き起こしていないか?
  • テキスト、色の関係、ベースライン、ストロークの太さが意図されたサイズで読みやすく一貫しており、偶発的なクリッピングや捏造された文字がないか?

可能な場合、配信サイズと小さなプレビューでSVGをレンダリングします。出力を検査し、配信前に観察された問題を修正します。単に従ったルールを列挙してはいけません。ラスター出力にも同じ視覚的レビューを適用します。計算式と構造的なリントは美的品質を保証できません。エディターが利用可能な場合は、SVGマスターを開き、テキストと代表的な形状が個別に選択および変更可能であることを確認します。レンダリングまたはエディター検証が利用できない場合は、合格したと主張せずにその制限を報告します。

選択された形式の実際のファイル(またはSVGタスクでファイル書き込みが利用できない場合は完全なSVGソース)と、構成、フォント、実際に実行されたチェックに関する短いメモを添えて引き渡します。関連する場合は正確な寸法と選択されたプロポーションを含めます。プレビューはソースとは別に保ちます。要求がない限りデザインエッセイを追加してはいけません。SVGのみまたはラスターのみの引き渡しを尊重します。

関連スキル