Community画像github.com

SaaSロゴ

Notion、Linear、Vercel、Slack、Miro、Airtable、Intercom、PostHog、Webflow、Mintlify、Claudeのようなソフトウェア製品向けに、フラットな幾何学シンボルのロゴマークを生成します。イメージモデルを使って複数のコンセプトを同時に作成し、最適なものを選択、透明PNGに切り出してサイトにそのまま配置できるようにします。

SaaSロゴ とは?

このスキルは、SaaS製品向けのプロフェッショナルなロゴマーク(ロゴ、アプリアイコン、ブランドマーク、ファビコンなど)を、分析済みの11の有名ブランド(Notion、Linear、Vercel、Slack、Miro、Airtable、Intercom、PostHog、Webflow、Mintlify、Claude)のスタイルに基づいて生成します。ユーザーが製品の概要や「Linear風」「Slack風」といったリクエストを指定すると、スキルはまず製品を分析し、動詞とオブジェクトを定義、5つのファミリー(Solid primitive、Repeated primitive、Letterform、Faceted object、Soft stroke)から最適なものを選択します。次に3〜4のコンセプトを幾何学的に記述し、OpenRouterを介して画像モデル(デフォルトはgoogle/gemini-3.1-flash-lite-image)に並行して生成させます。生成後、フラット、コーナー処理、カウント、シルエット、意味の点で評価し、リジェクトとリロールを行います。最終的に、選択したロゴを透明背景のマークと角丸アプリアイコンタイルの2つのPNGに切り出し、`out/saas-logo/<product>/`に保存します。このスキルはClaude Code、Cursor、Codexなどのエージェントで使用でき、OpenRouter APIキーとBrandfetchクライアントIDが必要です。

対応✓Claude Code~Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/paralect/saas-skills/tree/HEAD/skills/saas-logo

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

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

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

ドキュメント

SaaSロゴ は何をしますか?

このスキルが使用するすべてのファイルは、このSKILL.mdと同じフォルダ内の自身のフォルダに含まれており、パスはそのフォルダからの相対パスです。他のスキルやフォルダからファイルを探す必要はありません。ユーザーが別の場所を指定しない限り、生成されるすべてのファイルは現在のプロジェクトのout/saas-logo/に保存されます。

1つのシンボル、フラット。返されるのは、透明な背景にマークだけが配置され、その端にトリミングされたものと、同じマークがアプリアイコンタイル上に配置されたものです。これらのファイルはサイトにそのまま配置できます。このスキルが参考にするマークはreferences/analysis.mdで分析されています。各11のマークが幾何学的に何であるか、それらすべてが守る8つのルール、そしてそれらが分類される5つのファミリーが記述されています。最初のロゴを生成する前に一度読んでください。それがここで「本物のSaaSロゴのように見える」という意味です。

イメージモデルに送信されるプロンプトはprompt.mdにあり、モデルが必要とするすべての情報(共有ルール(キャンバス、タイル、フラットな塗りつぶし、線の太さ、色)と、参照マークが分類される5つのファミリー(それぞれに独自のルールあり))が含まれています。あなたの仕事は、プロンプトの前の思考(ファミリーとシンボルの選択)と、生成後の判断です。

手順

1. 製品を理解する

概要、README、ランディングページのコピーなど、存在するものを読みます。1行で次のように記述します。「名前 — ユーザーがそれを使って何をするか、1つの動詞で、1つのオブジェクトに対して」 「Hands tasks to coding agents」→ hand over, a task card。 「Publishes a folder as a site」→ publish, a page。マークは動詞またはオブジェクトを示し、カテゴリ(歯車、雲、ロケット、グラフなど)は示しません。製品にブランドカラーがある場合は(CSSトークン、ファビコン)、その色と頭文字をメモします。

2. ファミリーを選択する

prompt.mdのセクション3にある5つのファミリーと、それぞれが最適なもの:

  • Solid primitive (Vercel, Miro): インフラストラクチャ、開発者ツール、必然性を感じさせたいもの、1つの形状でアイデアを表現するもの。
  • Repeated primitive (Slack, Claude, Linear, Intercom, PostHog): コラボレーション、コミュニケーション、AI、多くのパーツが連動するもの。
  • Letterform (Webflow, Miro, Notion): 製品名自体がブランドであり、頭文字が強い形状(A, M, N, W, K, Z, S, V)を持つもの。
  • Faceted object (Airtable, Notion's page): データ、ストレージ、ドキュメント、何かを詰めたり積み重ねたりするもの。
  • Soft stroke (Mintlify, Intercom): フレンドリーな消費者向け製品、ドキュメント、サポート、技術的ではなく温かみのあるもの。

ユーザーがブランド名を指定した場合、ファミリーは自動的に決まります。「Slack風」や「Claude風」→ Repeated primitive; 「Vercel風」→ Solid primitive; 「Webflow風」や「Notion風」→ Letterform; 「Airtable風」→ Faceted object; 「Mintlify風」や「Intercom風」→ Soft stroke。ユーザーがファミリーを直接指定した場合はそれを使用します。何も指定がない場合は、コンセプトを2〜3のファミリーに分散します。シートが最終決定します。

3. 3〜4のコンセプトを書く

各コンセプトは、イメージモデルが推測せずに描画できる2〜3文で記述します:

  • シンボルは名詞ではなく幾何学的に記述。「タスクカード」ではなく「1つの角丸長方形(横長)、その後ろに同じ長方形を高さの4分の1だけ右上にオフセットして配置」。 「ハッシュマーク」ではなく「4つのピル型(各々はバーと片端の丸い突起)、中心を中心に90°回転」。
  • Repeated primitiveの数とリズム:「5本の垂直バー、高さは左から右に3-5-4-2-3」。
  • ファミリーを明記。Letterformの場合は、どの文字で、どの2〜3のストロークか。
  • 色:ブランドカラーがある場合はその16進数、ない場合は「黒タイル、白マーク」または「マリーゴールドタイル、黒マーク」。
  • 除外事項:コンセプトが余分な要素を誘発する場合(「ドットなし」「バーの周りにフレームなし」「カウンター(内部の空きスペース)は空のまま」)。

シルエットがコンセプト間で異なるようにします(縦長 vs 横長、1つの塊 vs 分散)。ファミリーが許可するよりも多くのプリミティブが必要なコンセプト、またはファミリーが禁止する色を使用するコンセプトは破棄します。

4. 構成して生成する

各コンセプトについて、prompt.mdを取得し、{{input}}を以下で置き換えます:

<Product> — <それが何で、何をするか>. 動詞は <verb>; オブジェクトは <object>.
ブランドカラー: <hex または

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル