98.8K+ダウンロード
使い方ガイドへスキップ
brand-landingpage作者 Seth Hobson

Brand Landing Page スキル。

Claude Code と Codex 向けの UI デザイン用スキル。最初にブランドアイデンティティのインタビューを行い、Stitch を通じてランディングページを生成・改良します。

  • Web & UI
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
wshobson/agents · plugins/brand-landingpage/skills/brand-landingpage/SKILL.mdSKILL.md
--- name: brand-landingpage description: Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at … --- ## Phase 0: Prerequisites & Stitch Connection ## Phase 1: Brand Interview ## Phase 2: Design System Creation ## Phase 3: Generate & Review Loop ## Phase 4: Delivery Bundle ## Stitch Documentation
2026-09-14 に上流ファイルから読み込まれた冒頭部分とセクション見出し · 全 15,626 文字

01 できること

Claude CodeおよびCodexでbrand-landingpage Skillが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

ブランド優先のランディングページデザイナーで、3部構成のインタビュー（製品の目的、ブランドの雰感、ビジュアルの好み）を実行し、その回答をStitchデザインシステムに変換します（形容詞をcolorVariantに、フォントをheadlineFont/bodyFontに、シェイプをroundnessにマッピング）。デスクトップとモバイルの画面を生成し、構造化されたフィードバック（バリアント、編集、ロールバック）を通じて反復的な改善を導き、バージョン管理されたHTML、DESIGN.md、カラートークン、DEPLOY.mdを含むデプロイ可能なバンドルを提供します。

確立されたビジュアル方向性を持たず、単一目的のランディングページや製品マーケティングサイトを構築するユーザー向けです。ダッシュボード、複数ページアプリ、コンポーネントレベルの作業、または既存のデザインモックアップを持つユーザーには向いていません。

生成されるもの

  • index.html（デスクトップ）、mobile.html（生成された場合）、DESIGN.md、color-tokens.json、ユーザーアセット、DEPLOY.mdチェックリストを含む、デプロイ可能なzipバンドルです。
  • ブランドの雰感、16進数と根拠を伴うカラー方向性、タイポグラフィの選択、シェイプのroundnessの説明とともにデザインシステムを記録するDESIGN.mdです。
  • 構造化されたデザイントークンを持つcolor-tokens.jsonです：プライマリカラー、colorMode、colorVariant、フォント、roundness。
  • references/state-and-pitfalls.mdのテンプレートから生成されたDEPLOY.mdデプロイチェックリストです。
プロンプト例を見る ↗

仕組み

  1. 01
    Stitch SDKと環境の確認

    インタビューを開始する前に、スキルは不足している場合はSDKをインストールし、APIキーの環境変数が設定されていることを確認し、認証を確認するための最小限のSDK呼び出しを1回行います。

  2. 02
    3部構成のブランドインタビューを実行

    フェーズAでは、製品名、その機能、対象ユーザー、望ましいCTAを取得します。フェーズBでは、3つのブランド形容詞と明/暗の好みを取得します。

  3. 03
    インタビューをStitchパラメータに変換

    スキルは変換テーブルを使用して、ブランド形容詞をcolorVariant列挙型に、明/暗をcolorModeに、フォントの好みをheadlineFontとbodyFontに、シャープ/ラウンドをroundness列挙型にマッピングします。

  4. 04
    画面を生成してブラウザで開く

    スキルはdeviceType DESKTOPでgenerate_screen_from_textを呼び出し、返されたHTMLを.stitch/designs/にdesktop-v1.htmlとして保存し、OS固有のコマンドを使用してローカルで開きます。

  5. 05
    フィードバックループの反復

    生成のたびに、スキルは3つのフィードバック質問を行い、ユーザーのフィードバックを、対象を絞った変更のためのedit_screens呼び出しや、探索のためのgenerate_variantsに変換し、連番のファイル名で新しいバージョンを保存します。

  6. 06
    デプロイバンドルの提供

    スキルは、最終的なHTMLをindex.htmlにリネームし、生成された場合はmobile.html、ブランドシステムを記述するDESIGN.md、color-tokens.json、ユーザーアセット、DEPLOY.mdチェックリストを含むzipを作成します。

02 適合性を確認

brand-landingpage スキルを使用するタイミング

この種の UI デザイン作業では、Claude Code または Codex で brand-landingpage スキルを使用してください。適合範囲と制限事項は、スキル自体のファイルから引用しています。

適している場合

  • ユーザーがランディングページ、ホームページ、またはマーケティングページの作成、デザイン、構築を依頼しており、確立された視覚的方向性がない場合
  • ユーザーがプロダクト、サイドプロジェクト、またはサービスを構築済みでランディングページが必要だが、ブランドアイデンティティや視覚的方向性についてあまり考えていない場合
  • 単一目的のランディングページとプロダクトマーケティングサイト

境界を知る

  • ユーザーがデザインモックアップを持っている場合
  • ユーザーがダッシュボードやアプリUIを必要としている場合
  • ユーザーがコンポーネントレベルで作業している場合
  • ユーザーが既知のデザイントークンを使ってマルチページアプリを構築、または再スタイリングしている場合（代わりにfrontend-designを使用してください）

提供すべきもの

  • プロダクト名と目的プロダクトが何をするか、対象ユーザーは誰か、訪問者にどのようなアクションを取ってほしいか（登録、デモを試す、ウェイトリストに参加）。
  • 3つのブランド形容詞スキルは選択可能な形容詞のメニューを提供します。フェーズBからフェーズCに進むために必須です。
  • ライトまたはダークの好みStitchデザインシステムのcolorModeパラメータ（LIGHTまたはDARK）に直接マッピングされます。
  • カラーの方向性既存のブランドまたはアプリのカラーを16進数で、あるいは確立されたパレットがない場合はカラーのイメージを指定します。customColorパラメータにマッピングされます。
  • フォントと形状の好みモダンか伝統的かのフォントの好みは、headlineFontとbodyFontにマッピングされます。

03 スキルの内部

brand-landingpageスキルがClaude CodeとCodexに与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. APIキーを絶対に表示しない

    スキルは、環境を検証する際や認証エラーを診断する際に、Stitch APIキーを表示、転記、またはエコーしてはいけません。

  2. 画像を求めない

    StitchはAPI経由での画像アップロードを受け付けないため、スキルはユーザーに画像やロゴの提供を求めてはいけません。

  3. HTMLファイルを連番でバージョン管理する

    生成されたHTMLは、最初の生成ではdesktop-v1.html、次の反復ではdesktop-v2.htmlという形で保存します。

  4. 更新されたHTMLは常にブラウザで開く

    生成、編集、バリアント選択のたびに、このスキルはStitchの応答から更新されたHTMLを保存し、ローカルファイルをユーザーのブラウザで開く必要があります。

  5. 3ラウンド連続でポジティブな評価が得られたら出荷を提案する

    3ラウンド連続でポジティブなフィードバックが得られた場合、このスキルは「これはかなり良さそうです。さらに反復しますか、それとも出荷して後で仕上げますか？」と尋ねるべきです。

  6. 譲れない4つのインタビュー回答項目

    このスキルは、フェーズAからフェーズBに移る前に、プロジェクト名、その内容、対象ユーザー、希望するCTAを収集する必要があります。この4項目は譲れません。

  7. 失敗した生成をすぐにリトライしない

    生成に失敗した場合、すぐにリトライしてはいけません。get_screenまたはlist_screensを使って、非同期で完了していないかを確認してください。

04 実際に使う

Claude Code または Codex に brand-landingpage をインストールする

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに brand-landingpage を追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/wshobson/agents --skill brand-landingpage

plugins/brand-landingpage/skills/brand-landingpage/SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスを文書化している場合があります。

スキルに最初の UI デザインタスクを与える

SKILL.md にはサンプルプロンプトが含まれていません。このスターターはカタログの一行説明から作成されています。タスク行を実際のブリーフに置き換えてください。

Starter prompt
Use the brand-landingpage skill on the material I attach. What the skill should do here: Brand-identity interview first, then generates and iterates a landing page through Stitch. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

ソース：カタログの一行使用例から作成されたスタータープロンプト（SKILL.md からではありません）。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • OS固有のコマンド（macOSではopen、Linuxではxdg-open、Windowsではstart）を使って保存したHTMLファイルをユーザーのブラウザで開き、フル忠実度でデザインを確認する
  • 3つのフィードバック質問をする：最初の5秒での第一印象、これは自分のプロダクトらしいと感じるか、そして何か違和感がある、または欠けていると感じる部分はないか
  • ユーザーの注意を特定のデザイン要素に向ける：メッセージの明確さ、CTAの視認性、彼らの形容詞との色の一致度、そして読みの流れ
  • セッションを再開する際は、.stitch/metadata.jsonが存在し、プロジェクトID、デザインシステムのアセットID、インタビューの要約、画面履歴を含んでいることを確認する
  • DEPLOY.mdに記載された、ホスティング、ドメイン設定、アナリティクス、画像の入れ替えをカバーするデプロイチェックリストに従う

OpenDesignでは、SKILL.mdのリンクからbrand-landingpageをインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Seth Hobson
Repository
github.com/wshobson/agents ブランチ main
スキルファイル
plugins/brand-landingpage/skills/brand-landingpage/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット 4236bb9
License
MIT LICENSE より
リポジトリスター数
39,635 GitHub スナップショットは wshobson/agents リポジトリ全体に対して 2026-09-14 に取得されたもので、このカタログ内に18のスキルが含まれています。brand-landingpage の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. フェーズ0：前提条件とStitch接続インタビューを開始する前に、SDKのインストール、APIキーの環境変数を確認し、最小限のテスト呼び出しを行う
  2. 参照ファイルワークフロー中にinterview-framework.md、stitch-architecture.md、state-and-pitfalls.mdをいつ読むべきかを示します
  3. ワークフロー概要4つのフェーズ：セットアップ、3部構成のインタビュー、デザインシステムへの変換、生成とレビューのループ、納品バンドル
  4. フェーズ1：ブランドインタビュー3部構成：プロダクトの目的、形容詞によるブランドの雰囲気、色・フォント・形に関するビジュアルの好み
  5. フェーズ2：デザインシステムの作成マッピングテーブルを使ってインタビューの回答をStitchのパラメータに変換し、デザインシステムを作成・更新し、DESIGN.mdを書く
  6. フェーズ3：生成とレビューのループデスクトップ画面を生成し、ブラウザで開き、3つの質問でフィードバックを収集し、編集またはバリアントで反復する
  7. フェーズ4：納品バンドル最終的なHTML、DESIGN.md、カラートークン、ユーザーアセット、DEPLOY.mdチェックリストをバージョン付きzipにまとめる
  8. Stitchドキュメントstitch-design.aiにあるSDK利用ドキュメントとDESIGN.mdの例へのリンク
  9. 再開とエラー復旧metadata.jsonから状態を読み込み、再開時の生成失敗、レート制限、期限切れプロジェクトを処理する
スキル自身による説明
「ブランド優先のランディングページデザイナー — ブランドアイデンティティインタビュー（カラー、タイポグラフィ、シェイプ言語）を実行し、Stitch 経由でデプロイ可能な HTML を含む洗練されたランディングページを生成・反復します。ユーザーがランディングページ、ホームページ、マーケティングページの作成、デザイン、構築を依頼し、確立されたビジュアル方向性がない場合に使用します。デザインモックアップがある場合、ダッシュボードやアプリ UI が必要な場合、コンポーネントレベルで作業している場合、マルチページアプリを構築している場合、または既知のデザイントークンでリスタイルしている場合は使用せず、frontend-design を使用してください。」

SKILL.md からのフロントマター説明。ファイル全体は約15,626文字です。GitHub で完全なファイルを読む。

06 インストールする前に

brand-landingpageスキルについてよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

自社のロゴや製品スクリーンショットを提供できますか？

Stitchはテキストプロンプトから生成を行い、API経由での画像アップロードには対応していません。画像を添付した場合、スキルはその主な色、雰囲気、形状の特徴を自分の言葉で説明するように求め、それらの特徴をデザインに反映します。

元のファイルはバンドル内に保存されるため、シンプルなimgタグの置き換えによって最終的なHTMLに組み込むことができます。

なぜ生成に直接進まず、インタビューを行う必要があるのですか？

インタビューは価値の大部分を生み出す工程です。これを行わないと、結果は汎用的なテンプレートになってしまいます。

インタビューには約5分かかり、製品の目的、ターゲットユーザー、ブランドの形容詞、視覚的な好みを把握します。スキルはこれらの情報を、画一的な出力ではなく実際にブランドに合ったデザインシステムへと変換します。

最終的に何が得られますか？

デプロイ準備が整ったzipバンドルには、index.htmlにリネームされた最終的なデスクトップ用HTML、モバイル用バリアントを要求した場合はmobile.html、ブランドデザインシステムを記載したDESIGN.md、構造化されたデザイントークンを含むcolor-tokens.json、ユーザーが提供したアセット、そしてデプロイのチェックリストであるDEPLOY.mdが含まれます。すべての中間バージョンと状態は参照用に.stitch/内に保存されます。

Brand Landing Page

実際の UI デザインタスクで brand-landingpage を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから brand-landingpage をインポートし、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/wshobson/agents --skill brand-landingpage

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応